用于网页指标的 CSS

用于优化 Web Vitals 的 CSS 相关技巧

Katie Hempenius
Katie Hempenius
X
Una Kravets

您编写样式和构建布局的方式可能会对 Core Web Vitals 产生重大影响。这对于 Cumulative Layout Shift (CLS) 和 Largest Contentful Paint (LCP) 尤其如此。

本文介绍了用于优化 Web Vitals 的 CSS 相关技巧。这些优化按网页的不同方面（布局、图片、字体、动画和加载）进行细分。在此过程中，我们将探索如何改进示例页面：

示例网站的屏幕截图

布局

将内容插入 DOM

在周围内容已加载后向网页中插入内容会将网页上的所有其他内容向下推。这会导致布局偏移。

Cookie 通知（尤其是位于页面顶部的通知）就是一个常见的例子。其他在加载时经常导致此类布局偏移的页面元素包括广告和嵌入内容。

识别

Lighthouse 的“避免出现大幅度的布局偏移”审核会找出发生偏移的页面元素。对于此演示，结果如下所示：

Lighthouse 的“避免出现大幅度的布局偏移”审核

这些结果中未列出 Cookie 通知，因为 Cookie 通知本身在加载时不会发生偏移。而是会导致页面上其下方的项（即 div.hero 和 article）发生偏移。如需详细了解如何识别和修复布局偏移，请参阅调试布局偏移。

修复

使用绝对或固定定位将 Cookie 通知放置在页面底部。

页面底部显示 Cookie 通知

Before:

.banner {
  position: sticky;
  top: 0;
}

之后：

.banner {
  position: fixed;
  bottom: 0;
}

修复此布局偏移的另一种方法是在屏幕顶部为 Cookie 通知预留空间。这种方法同样有效。如需了解详情，请参阅关于 Cookie 的通知最佳实践。

图片

图片和 Largest Contentful Paint (LCP)

图片通常是网页上的 Largest Contentful Paint (LCP) 元素。其他可以成为 LCP 元素的网页元素包括文本块和视频海报图片。LCP 元素的加载时间决定了 LCP。

请务必注意，网页的 LCP 元素可能会因网页加载次数而异，具体取决于网页首次显示时向用户显示的内容。例如，在此演示中，Cookie 通知的背景、主打图片和文章文字都是潜在的 LCP 元素。

一张图表，突出显示了不同场景中的网页 LCP 元素。

在示例网站中，Cookie 通知的背景图片实际上是一张大图片。如需缩短 LCP 用时，您可以改为在 CSS 中绘制渐变效果，而不是加载图片来实现该效果。

修复

更改 .banner CSS，以使用 CSS 渐变而非图片：

Before:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

之后：

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

图片和布局偏移

浏览器只能在图片加载后确定图片的大小。如果图片在页面呈现后加载，但未为图片预留空间，则图片显示时会发生布局偏移。在演示中，主推图片在加载时会导致布局偏移。

识别

如需识别没有明确的 width 和 height 的图片，请使用 Lighthouse 的“图片元素具有明确的宽度和高度”审核。

Lighthouse 的“图片元素具有明确的宽度和高度”审核

在此示例中，主推图片和文章图片都缺少 width 和 height 属性。

修复

请为这些图片设置 width 和 height 属性，以避免布局偏移。

Before:

<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">

之后：

<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
现在，图片在加载时不会导致布局偏移。

字体

字体可能会延迟文本渲染并导致布局偏移。因此，快速提交字体非常重要。

延迟文本渲染

默认情况下，如果文本元素的关联 Web 字体尚未加载，浏览器不会立即渲染该文本元素。这样做是为了防止出现“未设置样式的文本闪烁”(FOUT)。在许多情况下，这会延迟 First Contentful Paint (FCP)。在某些情况下，这会延迟 Largest Contentful Paint (LCP)。

布局偏移

虽然字体切换非常适合快速向用户显示内容，但可能会导致布局偏移。当网页字体及其后备字体在页面上占据不同的空间时，就会发生这些布局偏移。使用比例相近的字体可最大限度地减少此类布局偏移的大小。

显示由字体切换导致的布局偏移的示意图
在此示例中，字体切换导致页面元素向上偏移了 5 像素。

识别

如需查看特定网页上正在加载的字体，请在 DevTools 中打开网络标签页，然后按字体进行过滤。字体可以是大型文件，因此通常使用较少的字体可以提高性能。

开发者工具中显示的字体的屏幕截图

如需查看请求字体所需的时间，请点击时间标签页。请求字体越早，加载和使用字体的速度就越快。

开发者工具中“Timing”（时间）标签页的屏幕截图

如需查看字体的请求链，请点击发起者标签页。一般而言，请求链越短，请求字体的时间就越短。

开发者工具中“Initiator”（发起者）标签页的屏幕截图

修复

此演示使用 Google Fonts API。Google Fonts 提供了通过 <link> 标记或 @import 语句加载字体的选项。<link> 代码段包含 preconnect 资源提示。与使用 @import 版本相比，这样可以加快样式表的传送速度。

概括地说，您可以将资源提示视为一种向浏览器提示其需要设置特定连接或下载特定资源的方式。因此，浏览器会优先执行这些操作。使用资源提示时，请注意，优先处理特定操作会从其他操作中夺走浏览器资源。因此，应慎重使用资源提示，不要对所有内容都使用。如需了解详情，请参阅提前建立网络连接以提高感知的网页速度。

从样式表中移除以下 @import 语句：

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

将以下 <link> 标记添加到文档的 <head>：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

这些链接标记会指示浏览器尽早与 Google Fonts 使用的来源建立连接，并加载包含 Montserrat 和 Roboto 字体声明的样式表。这些 <link> 标记应尽可能放在 <head> 的开头部分。

动画

动画影响 Web Vitals 的主要方式是导致布局偏移。您应避免使用两种类型的动画：触发布局的动画和移动页面元素的“类似动画”效果。通常，您可以使用 transform、opacity 和 filter 等 CSS 属性，将这些动画替换为性能更出色的等效动画。如需了解详情，请参阅如何创建高性能 CSS 动画。

识别

Lighthouse 的“避免使用未合成的动画”审核功能可能有助于识别效果不佳的动画。

Lighthouse 的“避免使用未合成的动画”审核

修复

将 slideIn 动画序列更改为使用 transform: translateX()，而不是对 margin-left 属性进行过渡。

Before:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}

之后：

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

关键 CSS

样式表会阻塞渲染。也就是说，如果浏览器遇到样式表，则会停止下载其他资源，直到下载并解析完样式表为止。这可能会导致 LCP 延迟。为了提升性能，不妨考虑移除未使用的 CSS、内嵌关键 CSS 以及推迟非关键 CSS。

总结

虽然仍有进一步改进的空间（例如，使用图片压缩更快地传送图片），但这些更改已显著改善了此网站的 Web Vitals 指标。如果这是真实网站，则下一步是从真实用户那里收集性能数据，以评估该网站是否满足大多数用户的 Core Web Vitals 阈值。如需详细了解 Web Vitals，请参阅了解 Web Vitals。