用于网页指标的 CSS

用于优化网页指标的 CSS 相关技术

凯蒂·亨佩纽斯
Katie Hempenius
X
尤娜·克拉维兹

编写样式和构建布局的方式会对核心网页指标产生重大影响。对于 Cumulative Layout Shift (CLS) 和 Largest Contentful Paint (LCP)，尤其如此。

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

示例网站的屏幕截图

布局

将内容插入 DOM

如果在网页中插入内容，而相关内容已经加载完毕之后，那么网页上的其他所有内容都会下推。这会导致布局偏移。

Cookie 通知，尤其是放置在页面顶部的 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">
现在，图片加载时不会导致布局偏移。

字体

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

文本呈现延迟

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

布局偏移

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

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

识别

如需查看在特定页面上加载的字体，请在开发者工具中打开网络标签页，然后按字体进行过滤。字体可能很大，因此一般而言，只使用较少的字体可以提高性能。

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

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

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

如需查看字体的请求链，请点击 Initiator（发起方）标签页。 一般来说，请求链越短，请求字体的速度就越快。

开发者工具中“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> 中。

动画

动画对网页指标的影响主要是当动画导致布局偏移时。您应该避免使用两种类型的动画：触发布局的动画和移动页面元素的“类似动画”的效果。通常，可以使用 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。

总结

虽然仍有改进的空间（例如，使用图片压缩更快地传送图片），但这些更改显著提升了此网站的网页指标。如果该网站是一个真实网站，下一步将收集真实用户的性能数据，以评估该网站是否达到了大多数用户的网页指标阈值。 如需详细了解网页指标，请参阅了解网页指标。