优化全屏视频背景的First Contentful Paint性能方案咨询

我的落地页采用全屏（110vh/vw）视频背景，置于网站所有内容后方，功能运行正常，但希望在Lighthouse测试中尽可能提升First Contentful Paint（FCP）性能。

大尺寸视频背景确实不是性能友好的选择，目前分数不算差，但我要打造视觉冲击力拉满的落地页。

我想能不能先显示封面图来优化性能/分数，等视频就绪或者FCP完成1秒后再加载/显示视频？

视频需要自动播放，因此无法使用preload="none"。

请问最佳实现方式是什么？有没有我没考虑到的方法，还是必须使用JavaScript？

CSS #

html {
  background: black;
}

html,
body {
  box-sizing: border-box;
  color: white;
  min-height: 100vh;
  margin: 0;
  padding: 32px;
  width: 100%;
}

.video-bg {
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: -1;
}

.video-bg video {
  height: 100vh;
  object-fit: cover;
  opacity: .48;
  width: 100vw;
}

.main {
  margin: 0 auto;
  max-width: 1200px;
}

HTML #

<div class="video-bg">
  <video autoplay loop muted playsinline poster="video/video-bg-poster.avif">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" width="1920" height="1080">
  </video>
</div>

<div class="main">
  <h2>Page Content</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
    ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>

1. poster+JS延迟加载视频源（最有效） #

你已经用了poster属性，但浏览器仍会优先加载视频资源拖慢FCP。可以先不设置视频源，等FCP完成或延迟一段时间再注入，用poster作为初始背景：

修改HTML：

<div class="video-bg">
  <video autoplay loop muted playsinline poster="video/video-bg-poster.avif" id="bg-video">
    <!-- 先移除source标签 -->
  </video>
</div>

添加JS逻辑：

function loadBgVideo() {
  const video = document.getElementById('bg-video');
  const source = document.createElement('source');
  source.src = '你的视频地址';
  source.type = 'video/mp4';
  video.appendChild(source);
  video.load(); // 触发视频加载
}

// 方案A：监听FCP事件，完成后延迟1秒加载
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'paint' && entry.name === 'first-contentful-paint') {
      setTimeout(loadBgVideo, 1000);
      observer.disconnect(); // 只监听一次
    }
  }
}).observe({ entryTypes: ['paint'] });

// 方案B：页面加载后固定延迟加载（比如2秒）
// window.addEventListener('load', () => {
//   setTimeout(loadBgVideo, 2000);
// });

2. CSS过渡实现平滑切换 #

避免视频加载后突兀出现，给视频加透明度过渡：

.video-bg video {
  /* 保留原有样式 */
  opacity: 0;
  transition: opacity 0.5s ease;
}

.video-bg video.loaded {
  opacity: 0.48;
}

在JS中视频加载完成后添加类：

function loadBgVideo() {
  const video = document.getElementById('bg-video');
  const source = document.createElement('source');
  source.src = '你的视频地址';
  source.type = 'video/mp4';
  video.appendChild(source);
  
  video.addEventListener('loadeddata', () => {
    video.classList.add('loaded');
  });
  
  video.load();
}

3. 视频本身的性能优化 #

• 压缩视频：降低码率、分辨率，用工具导出适合网页的版本
• 多格式支持：添加WebM格式视频（体积更小，主流浏览器支持）
• 用preload="metadata"：仅加载视频元数据，比默认的auto更节省资源

4. 无JS折中方案（效果有限） #

如果不想用JS，可设置preload="metadata"并确保poster图是优化后的小体积格式（如AVIF/WebP），但浏览器仍会加载部分视频数据，对FCP的提升不如JS延迟加载明显。

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