首页 / 文章 / 使用 Next.js 视频背景防止累积布局偏移

Next.js CSS Performance Web Vitals Frontend

使用 Next.js 视频背景防止累积布局偏移

学习实用的CSS与布局技巧，防止Next.js中的背景视频在不同设备及网络速度下引发累积布局偏移问题。

1289 词

有一种特定类型的前端漏洞，在理想条件下开发时完全看不出来，但一旦网络速度变慢，你添加的背景视频就会让页面出现剧烈跳动，就像混乱的情景喜剧场景一样。

恭喜：你刚刚遇到了累积布局偏移问题。

视频背景很容易被忽视，因为它们位于页面后台，在高速网络下表现良好，而且工程师们往往将视频视为纯粹的视觉元素，而非参与页面布局的部分。

然而浏览器并不认同我们的这种假设。当初始渲染时某个元素的尺寸未知时，浏览器不得不进行猜测。而恰恰是这些猜测，会成为决定页面布局的因素，这是我们最不希望看到的。

了解了背景情况后，现在让我们来探讨技术细节吧。

核心规则：在视频加载前预留空间

Cumulative Layout Shift用于衡量可见内容出现意外移动的程度。避免这种情况的最直接方法是在媒体资源实际下载完成之前，就为这些元素设定可预测的尺寸。通过明确指定宽度和高度，或使用CSS的aspect-ratio属性，可以让浏览器在布局计算时提前预留相应空间。

简而言之：在元素实际渲染之前就为其预留空间。

对于带有背景视频的首页区域，较好的做法是使用固定尺寸的容器，而非让<video>标签自行决定该区域的大小。

export function VideoHero() {
  return (
    <section className="relative min-h-[70svh] overflow-hidden">
      <video
        className="absolute inset-0 h-full w-full object-cover"
        autoPlay
        muted
        loop
        playsInline
        preload="metadata"
        aria-hidden="true"
      >
        <source src="/hero-video.mp4" type="video/mp4" />
      </video>

      <div className="relative z-10 mx-auto max-w-6xl px-6 py-24">
        <h1 className="text-5xl font-bold text-white">
          Build products people remember.
        </h1>
      </div>
    </section>
  );
}

这里最关键的部分根本不是视频标记本身。

而是这一行代码：

min-height: 70svh;

正因如此，即使在视频开始播放之前，标题区域就已经有了固定的视觉呈现。

视频本身被绝对定位在那个容器内，这意味着一旦其资源加载完成，就无法再将下方的内容突然推到视频下方。

这一差异决定了页面的稳定性如何。

不要让视频决定布局

典型的问题设置如下：

<video
  src="/hero-video.mp4"
  autoPlay
  muted
  loop
/>

接着有人会提出：

video {
  width: 100%;
}

之后又会疑惑为何页面的表现会因网络质量或屏幕尺寸的不同而出现差异。

问题在于浏览器需要提前知道视频的尺寸。如果视频仅仅是装饰性背景内容，那么它几乎没有理由参与到正常的文档流中。

相反，应将布局任务交给包裹视频元素的容器，即那个围绕在视频周围的 div。

<div style="height: 100px; width: 100%">
  <video
    src="/hero-video.mp4"
    autoPlay
    muted
    loop
  />
</div>

采用这种结构后，视频可以在内部以任意方式显示，但周围的 div 会将所有内容限制在其中。

为背景视频使用 `object-fit: cover`

一旦视频被设置为绝对定位，object-fit: cover 就会真正发挥作用（这是 CSS 属性中极少能完全按预期工作的案例）。

.heroVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这样可以让视频完全填满预留的展示区域，而无需改变容器本身的尺寸。

需要注意一个小的权衡点：当视口的长宽比与源视频的長宽比不匹配时，cover 模式会裁剪视频的部分内容。但这是个可以接受的合理代价。

真正的错误在于过分强调对原始视频的像素级精确保留，而设计实际上需要的是稳定且可预测的布局。

以海报作为初始视觉状态

一种特别有效的方法是为视频元素提供一张精心挑选的海报图片。

<video
  className="absolute inset-0 h-full w-full object-cover"
  autoPlay
  muted
  loop
  playsInline
  preload="metadata"
  poster="/images/hero-poster.webp"
  aria-hidden="true"
>
  <source src="/videos/hero.mp4" type="video/mp4" />
</video>

在视频仍在下载时，海报能为访问者提供明确的视觉内容。请谨慎选择这张图片，因为它实际上就是你的备用设计。

更重要的是，这意味着你的布局不再依赖于视频资源能否立即获取。

应将海报视为可靠的基准状态，而视频则作为渐进增强层叠加在之上，就像在其他场景中使用的骨架加载器或旋转图标一样。

如果通过速度较慢的移动网络传输视频需要几秒钟，页面依然会显得完整且正常，而不会出现故障或加载不完整的情况。

注意 `100vh` 的隐患

全屏视频区域还存在另一个隐蔽的陷阱。

过去，开发者们通常这样写：

height: 100vh;

移动浏览器让情况更加复杂，因为随着浏览器界面元素（地址栏、工具栏）的显示与隐藏，可见视口高度会发生变化，因此 100vh 的表现并不符合预期。

对于需要在不同设备上良好适配的布局，通常最好使用更新的视口单位，例如：

min-height: 100svh;

或者，根据希望视频区域占据屏幕的比例来选择：

min-height: 80svh;

简而言之：优先使用 100dvh 或 100svh，而非旧式的 100vh。

避免向移动端用户提供桌面尺寸的视频

即便页面的CLS值完美，如果背景视频本身体积过大，依然会让人感觉极其缓慢。

这就是性能优化需要更加精细处理的地方。

一个大小为12 MB的精美电影片段在高速桌面网络下可能播放得很好，但在信号不稳定的移动设备上，同一个文件就会成为负担。

对于大多数着陆页而言，为桌面和移动端分别提供不同的视频资源是合理的做法。

在某些情况下，正确的选择是为特定访问者完全跳过视频播放。

尊重用户对降低动画速度的偏好就是很好的例子：

const prefersReducedMotion =
  window.matchMedia("(prefers-reduced-motion: reduce)").matches;

在真实的 React 应用中，这种检查应当放在客户端组件中执行，且需谨慎处理，以避免破坏服务器端已渲染的 HTML 结构。

其基本原则很明确：决定是否播放视频应基于性能和无障碍性考虑，而非仅看下载速度。

绝不能让视频决定布局

这是整个过程中需要牢记的指导原则。

在以下流程下，你的页面结构仍应保持稳定：

Hero container
    ↓
Poster
    ↓
Video enhancement

并且绝不能依赖以下情况：

Video starts loading
    ↓
Browser discovers dimensions
    ↓
Hero changes height
    ↓
Everything below moves
    ↓
Lighthouse gets angry

在较重的媒体资源加载之前，浏览器就必须已经理解你的页面布局。

这才是解决由视频引发的 CLS 问题的真正方法。

要在实际环境中验证这一点，可以在速度较慢、带宽受限的网络连接下加载你的网站，观察其表现。