为什么电商与内容站想用「悬停预览 WebP」替代小窗 MP4？
商品列表悬停预览的核心是「一眼多看半秒信息」：织法、反光、开合角度，比静态主图更带货。用户常搜「商品卡 hover 视频 性能」「webp 悬停 动图」「cls 优化 列表页」——痛点是：每个卡片挂一个 `<video>` 会拖慢列表脚本与内存，移动端还没有 hover。动画 WebP 在桌面端能像图一样被缓存与解码，常比微型视频播放器更轻；但仍要处理「无 hover 设备的降级」与「悬停误触导致流量偷跑」的体验问题。把 MP4 源裁成真正只展示差异点的 2～3 秒循环，并控制像素尺寸，才能避免列表滚动时同时解码过多动图把帧率拖崩。搜索侧也会出现「商品动图 webp」「详情页 体积优化」等长尾词，把体验指标与收录体验一并写进需求评审，比上线后再救火更省成本。
商品卡悬停预览从 MP4 到动画 WebP 的落地要点
- 先定义只在桌面宽屏启用悬停预览的断点规则，并为移动端准备静态图或点击进入详情再播放的策略，避免同一 MP4 被无差别转换后在手机上徒增流量。
- 从 MP4 截取最能体现材质差异的短循环，在工具里把宽度限制为列表缩略图列宽的一倍以内，并降低帧率，确保单卡解码成本可控。
- 上线后在真实商品列表页打开性能录制，观察滚动时主线程与 GPU 占用，再按类目分批灰度；若某些类目动效收益低，应回退为静态图而不是全站一刀切。
MP4 转 WebP 悬停预览常见问答
当列表里同时存在十几张悬停动画 WebP 时，如何避免用户快速滚动导致解码排队卡顿、有没有推荐的懒触发策略？
应延迟到指针停留超过阈值再解码，离开即取消；并用 `IntersectionObserver` 暂停视口外动图，必要时只解码当前行附近几枚卡片。
若商品视频源含模特肖像与未授权背景音乐，把其中三秒截成悬停 WebP 是否比整段视频外链更不容易触发版权争议？
截短并不自动缩小权利范围：肖像与场景仍受约束；应使用已获电商授权的素材母带，或在法务清单内替换为纯产品镜头。
悬停预览动画 WebP 是否可能导致列表布局抖动从而恶化 CLS，如果有应如何在 CSS 层预先消除？
应为缩略图容器固定宽高比与占位背景，动图替换时不得改变布局盒模型；对异步加载使用骨架屏而非插入后再撑开高度。
跨境站点在不同国家线路 CDN 上缓存动画 WebP 时，若某区域命中率低导致悬停首帧慢，应优先调缓存键还是降低单文件体积？
先确认是否因查询串或错误缓存头导致穿透回源；若命中率正常仍慢，再压缩体积与降低分辨率，避免把问题误判为 CDN 故障。
A/B 测试显示悬停预览提升了点击率但略降了滚动帧率，产品决策上应如何量化取舍这类体验 trade-off？
建立综合指标：转化收益、滚动帧率分位数与跳出率；允许分人群或分品类启用动效，并把最差设备表现写入上线门槛而不是只看平均数。