产品演示视频别一进页面就自动播放。去年 12 月我们查一个 SaaS 首页，三个 Wistia 播放器嵌在首屏下方，光播放器脚本就 690KB，首屏 LCP 3.2 秒里有 0.9 秒在等它们。
先算代价
视频本身 18MB，播放器脚本 690KB，加上封面图和统计脚本，一个"看看产品长什么样"的模块占了首屏资源的一半。移动端更糟：62% 的用户根本不会点播放，但所有人都在为它付流量。
我们拉了一个月的统计：这个模块移动端展示 8.4 万次，实际播放 1.2 万次，播放率 14%。也就是说 86% 的加载是白费的。
改法：封面图加点击加载
三步。第一步，把播放器换成点击后才注入的 iframe，初始只放一张 60KB 的 WebP 封面。第二步，封面上加播放按钮，用原生 button 保证可访问性。第三步，点击时才加载播放器脚本，用户等一秒可以接受，因为他已经表达了意愿。
改完首屏资源从 2.1MB 降到 740KB，LCP 从 3.2 秒到 1.8 秒。播放率没降，反而从 14% 涨到 17%，因为页面快了，模块更早出现在视野里。
什么情况可以自动播放
只有一种：静音、循环、无控制条的背景视频，体积压到 1.5MB 以内，并且用 poster 兜底。这种视频的作用是氛围，不是内容。
就算这样也要注意移动端。iOS 的低电量模式会拦住自动播放，用户看到的是静止封面，所以封面本身要好看、能传达信息。
视频托管的取舍
自托管的好处是没第三方脚本、能控制缓存，坏处是带宽和转码自己扛。用 YouTube 或 Vimeo 省事，代价是多一个第三方域名、多一层 DNS 和 TLS。
我们的默认建议是：演示视频放第三方，但必须点击后才加载；产品内的短视频自托管，走 CDN。最不该做的是用第三方播放器做首屏自动播放，那是两头不讨好。
一个容易忽略的细节
视频封面图和播放器不要放在同一个 DOM 容器里手动切换，否则容易引起布局位移。封面和 iframe 用同一个固定比例的外层容器，切换时高度不变。这个站在改版时踩过一次，CLS 从 0.02 跳到 0.17，查了半天才发现是播放器初始化时把容器撑高了。
如果老板坚持要自动播放
我的经验是拿播放率和转化数据说话，而不是讲性能原理。这个站改完两周，播放率从 14% 到 17%，预约演示的转化没变差也没变好。也就是说自动播放并没有带来额外收益，但它确实拖慢了首屏。
如果一定要保留自动播放，折中方案是：只在桌面端自动播放，移动端用封面加点击；视频压到 1.5MB 以内，用 AV1 或者 H.265；加 preload="none"，让浏览器别预取整个文件。这三条做完，代价能压到可接受的范围。
元析智能
为软件公司做 SEO 和 GEO 优化