Shopify 首页自动播放视频拖慢加载怎么优化

现象#

首页 banner 用 15MB 的 MP4 自动播放，移动端首屏加载十几秒，流量消耗大。

原因#

• 视频直接托管在主题 assets 里，随 HTML 一起下载
• 没有 preload="none"，浏览器预取整段
• 未提供 poster 图，视频未就绪时空白
• 移动端也强制自动播放

处理步骤#

1. 视频上传到 Shopify Files 或外部 CDN，用 <video preload="none" poster="...">
2. 移动端改用静态图，桌面端再加载视频
3. 压缩到 3MB 以内，分辨率不超过 1280p，提供 WebM 与 MP4 双格式
4. 加 playsinline muted loop 保证自动播放可用

验收标准#

移动端首屏只加载 poster 图，桌面端视频延迟加载；LCP 不受视频影响，流量下降明显。