CSS 与 Web Vitals

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

您编写样式和构建布局的方式会对 Core Web Vitals 产生重大影响。对于累积布局偏移 (CLS)最大内容ful Paint (LCP) 尤其如此。

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

Screenshot of example site

布局

将内容插入 DOM

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

Cookie 通知,特别是那些放置在页面顶部的通知,是此问题的常见示例。加载时经常导致此类布局偏移的其他页面元素包括广告和嵌入内容。

识别

Lighthouse “避免大型布局偏移”审核会识别已偏移的页面元素。对于此演示,结果如下所示

Lighthouse's 'Avoid large layout shifts' audit

Cookie 通知未在这些结果中列出,因为 Cookie 通知本身在加载时并未偏移。相反,它会导致页面上位于其下方的项目(即 div.heroarticle)发生偏移。有关识别和修复布局偏移的更多信息,请参阅调试布局偏移

修复

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

Cookie notice displayed at bottom of page

之前

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

之后

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

修复此布局偏移的另一种方法是在屏幕顶部为 Cookie 通知预留空间。此方法同样有效。有关更多信息,请参阅Cookie 通知最佳实践

图像

图像和最大内容ful Paint (LCP)

图像通常是页面上的最大内容ful Paint (LCP) 元素。其他可以作为 LCP 元素的页面元素包括文本块和视频海报图像。LCP 元素加载的时间决定了 LCP。

重要的是要注意,页面的 LCP 元素可能会因页面加载而异,具体取决于页面首次显示时用户可见的内容。例如,在此演示中,Cookie 通知的背景、hero 图像和文章文本是一些潜在的 LCP 元素。

Diagram highlighting the page's LCP element in different scenarios.

在示例站点中,Cookie 通知的背景图像实际上是一个大图像。为了改进 LCP,您可以改为在 CSS 中绘制渐变,而不是加载图像来创建效果。

修复

更改 .banner CSS 以使用 CSS 渐变而不是图像

之前

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%);

图像和布局偏移

浏览器只有在图像加载后才能确定图像的大小。如果图像加载发生在页面呈现之后,但没有为图像预留空间,则当图像出现时会发生布局偏移。在演示中,hero 图像在加载时会导致布局偏移。

识别

要识别没有显式 widthheight 的图像,请使用 Lighthouse 的“图像元素具有显式宽度和高度”审核。

Lighthouse's 'Image elements have explicit width and height' audit

在此示例中,hero 图像和文章图像都缺少 widthheight 属性。

修复

在这些图像上设置 widthheight 属性以避免布局偏移。

之前

<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)”。在许多情况下,这会延迟首次内容ful Paint (FCP)。在某些情况下,这会延迟最大内容ful Paint (LCP)。

布局偏移

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

Diagram showing a layout shift caused by a font swap
在此示例中,字体交换导致页面元素向上偏移了五个像素。

识别

要查看在特定页面上加载的字体,请打开 DevTools 中的 Network 选项卡,然后按 Font 进行筛选。字体可能是大文件,因此通常使用较少的字体对性能更好。

Screenshot of a font displayed in DevTools

要查看请求字体所需的时间,请单击 Timing 选项卡。字体请求得越早,就越早可以加载和使用。

Screenshot of 'Timing' tab in DevTools

要查看字体的请求链,请单击 Initiator 选项卡。一般来说,请求链越短,字体请求得越早。

Screenshot of 'Initiator' tab in DevTools

修复

此演示使用 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 的主要方式是当它们导致布局偏移时。您应避免使用两种类型的动画:触发布局的动画和移动页面元素的“类似动画”的效果。通常,这些动画可以使用 CSS 属性(如 transformopacityfilter)替换为性能更高的等效项。有关更多信息,请参阅如何创建高性能 CSS 动画

识别

Lighthouse “避免非复合动画”审核可能有助于识别非高性能动画。

Lighthouse's 'Avoid non-composited animations' audit

修复

更改 slideIn 动画序列以使用 transform: translateX() 而不是转换 margin-left 属性。

之前

.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。如果这是一个真实站点,则下一步将是从真实用户收集性能数据,以评估它是否满足大多数用户的 Web Vitals 阈值。有关 Web Vitals 的更多信息,请参阅了解 Web Vitals