2026 年 8 月一个客户的首页自动播放背景视频，12 兆，移动端 4G 下首屏 6 秒。市场部坚持要留，说品牌感靠它。我们最后改成点击播放，首屏回到 2.1 秒，视频还在，只是不再自动加载。
视频的成本不只是字节
字节是最直观的：12 兆的视频，4G 网络按 3 兆每秒算，光下载就四秒。
解码是第二层：手机解码视频吃 CPU，同时还要渲染页面，主线程被占，交互会卡。
内存是第三层：移动浏览器对自动播放的视频有内存限制，低端机经常直接不播，用户看到一块黑。
什么情况值得放
产品演示视频，用户点了会看，值得放，但别自动播。
品牌片，放在关于页或者首屏下面，用户想看会自己点。
氛围视频，比如抽象的光影流动，这类基本是自我感动，收益最低，成本最高。
我们的判断标准很简单：这段视频能不能回答用户一个问题。不能，就别放在首屏。
替代方案
用视频的第一帧做静态图，视觉上差不多，体积小几十倍。
如果一定要动，做三到五秒的无声循环，体积控制在 500KB 以内，并且用 poster 保证首帧立刻显示。
动效也可以用 CSS 做，几百字节的事，别为了一个渐变动画加载一个视频。
如果一定要放
用 preload=none，别预加载。
只放 poster，等用户交互或者滚到位置再加载视频。
移动端直接隐藏视频，给一张静态图。这条最有效，因为大部分流量和大部分性能问题都在移动端。
一个对比数据
改之前，移动端 LCP 5.2 秒，首屏视频占 12 兆。改成点击播放之后，LCP 2.1 秒，视频文件还在服务器上，想看的人照样能看。
转化数据没有变差。市场部最担心的品牌感，也没人反馈丢了。
这件事的难点不在技术，在沟通。把视频的字节数、加载时间、移动端占比摆出来，比讲技术道理有效。
移动端单独处理
同一个首页，桌面放视频、移动端放静态图，这个做法我们用了很多次。
用户不会因为手机上没有视频就觉得品牌差，但会在意打开要等六秒。
实现上用媒体查询或者服务端判断，别用 JS 判断，因为 JS 判断本身就要等脚本加载完。
一个规矩
我们给新站定了一条规矩：首屏不放自动播放的视频和音频，不放超过 500KB 的动画资源。
要放，走评审，说明为什么这段视频必须在首屏、为什么不能用静态图替代。
规矩定在前头，比上线后再砍容易得多。
元析智能
为软件公司做 SEO 和 GEO 优化