用于 Web Vitals 的 CSS
用于优化 Web Vitals 的 CSS 相关技术
您编写样式和构建布局的方式会对 Core Web Vitals 产生重大影响。对于累积布局偏移 (CLS) 和最大内容绘制 (LCP) 尤其如此。
本文介绍用于优化 Web Vitals 的 CSS 相关技术。这些优化按页面的不同方面进行细分：布局、图像、字体、动画和加载。在此过程中，我们将探索改进示例页面：
布局 #
将内容插入 DOM #
在周围的内容已经加载的前提下，如果将内容插入到页面，则会导致页面上的其他所有内容下移。即布局偏移。
Cookie 通知，尤其是放置在页面顶部的通知，是此问题的常见示例。加载时经常导致这种类型的布局偏移的其他页面元素包括广告和嵌入。
识别 #
Lighthouse“避免大的布局偏移”审计会识别已经偏移的页面元素。对于此演示，结果如下所示：
这些发现中未列出 cookie 通知，因为 cookie 通知本身在加载时不会偏移。相反，它会导致页面上它下面的项目（即 div.hero 和 article ）偏移。有关识别和修复布局偏移的更多信息，请参阅调试布局偏移。
修复 #
使用绝对位置或固定位置将 cookie 通知放在页面底部。
前：
.banner {
position: sticky;
top: 0;
}后：
.banner {
position: fixed;
bottom: 0;
}修复这种布局偏移的另一种方法是在屏幕顶部为 cookie 通知保留空间。这种方法同样有效。有关更多信息，请参阅Cookie 通知最佳实践。
图像 #
图像和最大内容绘制 (LCP) #
图像通常是页面上最大的内容绘制 (LCP) 元素。可以作为LCP 元素的其他页面元素包括文本块和视频海报图像。LCP 元素加载的时间决定 LCP。
请务必注意，页面的 LCP 元素可能会因页面加载而异，具体取决于页面首次显示时用户可见的内容。例如，在本演示中，cookie 通知的背景、首图和文章文本是一些潜在的 LCP 元素。
在示例站点中，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%);图像和布局偏移 #
浏览器只能在图像加载后确定图像的大小。如果在页面呈现后加载图像，但没有为图像保留空间，则在图像出现时会发生布局偏移。在本演示中，首图图像在加载时导致布局偏移。
识别 #
要识别没有明确 width 和 height 的图像，请使用 Lighthouse 的“图像元素具有明确的宽度和高度”审计。
在本例中，首图和文章图像都缺少 width 和 height 属性。
修复 #
在这些图像上设置 width 和 height 属性以避免布局偏移。
前：
<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） 。在许多情况下，这会延迟首次内容绘制 (FCP) 。在某些情况下，这会延迟最大内容绘制 (LCP)。
布局偏移 #
字体交换虽然非常适合快速向用户显示内容，但有可能导致布局偏移。当 Web 字体及其后备字体在页面上占用不同数量的空间时，就会发生这些布局偏移。使用类似比例的字体将最小化这些布局偏移的大小。
识别 #
要查看特定页面上加载的字体，请打开 DevTools 中的 Network 选项卡并按 Font 筛选器。字体可以是大文件，因此只使用较少的字体通常会提高性能。
要查看请求字体所需的时间，请点击 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“避免非合成动画”审计可能有助于识别不良动画。
修复 #
更改 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。