针对PageSpeed的网页视频优化最佳实践咨询

嵌入式YouTube视频优化 #

• 给iframe添加loading="lazy"属性，仅当视频滚动到视口附近时才触发资源加载，避免占用首屏渲染资源。
• 用静态缩略图替代初始iframe加载：初始状态只展示视频的缩略图（可存储在自有服务器避免第三方请求），用户点击后再动态注入YouTube的iframe，这一操作可减少初始页面对YouTube的数十个请求，大幅提升LCP（最大内容绘制）得分。
• 优化iframe参数：在YouTube嵌入地址末尾追加?autoplay=0&rel=0&showinfo=0，禁用自动预加载、相关推荐和顶部信息栏，减少不必要的额外资源加载。

自托管视频优化 #

• 优先选择高压缩率编码：同等画质下AV1编码比H.264体积小50%左右，H.265也能缩小30%体积，优先选这两种编码生成视频文件，降低资源体积。
• 配置多分辨率片源：针对不同设备和网络环境提供480P/720P/1080P等不同分辨率的片源，自动匹配最优版本加载，避免移动端加载不必要的4K资源。
• 控制预加载逻辑：给<video>标签设置preload="none"属性，仅当用户点击播放时再加载视频内容；如果是默认自动播放的静音背景视频，可设置preload="metadata"只提前加载元数据，避免占用过多带宽。
• 采用分片渐进式加载：将完整视频切割为10s左右的小分片，按需加载分片内容，不需要等完整视频下载完成即可开始播放，降低首帧等待耗时。
• 搭配CDN分发视频资源：将视频文件存储在CDN节点，降低用户访问的传输延迟，同时避免源站带宽被占满影响页面其他资源加载。
• 不要用GIF替代短视频：同画质的MP4体积仅为GIF的1/10不到，所有短视频场景都用视频格式替代GIF，减少资源体积。

通用视频优化规则 #

• 首屏最多保留1个视频，其余视频全部放在非首屏区域配合懒加载逻辑，避免首屏资源占用过高拉低性能得分。
• 静音背景视频控制时长在30s以内，压低码率，同时设置兜底静态封面图，视频加载完成前先展示封面，避免出现空白区域拉低用户体验。
• 可选支持自适应比特率流（ABR）：播放过程中根据用户实时网速自动调整播放分辨率，避免卡顿的同时减少不必要的带宽消耗。

内容的提问来源于stack exchange，提问作者fulgency