用于优化网页指标的 CSS 相关技术
您编写样式和构建布局的方式可能会对 Core Web Vitals 产生重大影响。这对于 Cumulative Layout Shift (CLS) 和 Largest Contentful Paint (LCP) 尤其如此。
本文介绍了与 CSS 相关的优化网页指标的技术。这些优化按网页的不同方面（布局、图片、字体、动画和加载）进行细分。在此过程中，我们将探索如何改进示例页面：
布局
将内容插入 DOM
在周围内容已加载后向网页中插入内容会将网页上的所有其他内容向下推。这会导致布局偏移。
Cookie 通知（尤其是放置在页面顶部的通知）是此问题的一个常见示例。在加载时，通常会导致此类布局偏移的其他页面元素包括广告和嵌入代码。
识别
Lighthouse“避免大幅布局偏移”审核会识别已发生偏移的页面元素。对于此演示，结果将如下所示：
这些发现结果中未列出 Cookie 通知，因为 Cookie 通知本身在加载时不会移动。而会导致页面上位于它下方的项（即 div.hero 和 article）移位。如需详细了解如何识别和修复布局偏移，请参阅调试布局偏移。
修复
使用绝对或固定定位将 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 元素。
在示例网站中，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 的“图片元素具有明确的宽度和高度”审核。
在此示例中，主推图片和文章图片都缺少 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">
字体
字体可能会延迟文本渲染并导致布局偏移。因此，快速提供字体非常重要。
延迟文本渲染
默认情况下，如果文本元素的关联网页字体尚未加载，浏览器不会立即渲染文本元素。这样做是为了防止“闪烁无样式文本”(FOUT)。在许多情况下，这会延迟 First Contentful Paint (FCP)。在某些情况下，这会延迟 Largest Contentful Paint (LCP)。
布局偏移
虽然字体切换非常适合快速向用户显示内容，但可能会导致布局偏移。当网页字体及其后备字体在页面上占据不同的空间时，就会发生这些布局偏移。使用比例相近的字体可最大限度地减少此类布局偏移的大小。
识别
如需查看特定网页上正在加载的字体，请在 DevTools 中打开网络标签页，然后按字体进行过滤。字体可能是较大的文件，因此仅使用较少的字体通常能提升性能。
如需查看请求字体所需的时间，请点击时间标签页。请求字体越早，加载和使用字体的速度就越快。
如需查看字体的请求链，请点击 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 属性进行过渡。
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 指标。如果这是一个真实的网站，下一步是从真实用户那里收集性能数据，以评估网站是否达到大多数用户的 Web Vitals 阈值。如需详细了解网页指标，请参阅了解网页指标。