当前位置：网站首页 > 技术文章 > 正文

网页性能之 LCP 优化指南

zhezhongyun 2025-01-08 18:42 70 浏览

如果你做过网页端性能优化，一定对 LCP（Largest Contentful Paint）指标有所了解，本文将首先阐述下 LCP 相关概念，然后重点阐述 LCP 指标的优化方法及注意事项。

1.LCP 介绍

Largest Contentful Paint (LCP) 是三大 Core Web Vitals（LCP、FID、CLS）之一，也是谷歌搜索引擎算法中的网络性能指标。

LCP 是一个时间值，用于测量用户浏览器在视口中呈现最大内容元素所需的时间。最大的内容元素可以是：

包含文本（如标题或段落）的块级元素
使用 <img> HTML 标签、<svg> 元素中的 <image> SVG 标签或 CSS 函数 url() 定义的 CSS 背景图片（不包括渐变背景）添加的图片
带有 poster 属性的 <video> 元素（使用 poster 的图像的呈现时间）

LCP 的结果跟进颜色进行分类：

绿色：表示 LCP 得分良好
黄色：表示 LCP 需要改进
红色：表示 LCP 分数较差

下面阐述常见的 LCP 优化方法和注意事项。

2.最小化 CSS 和 JavaScript 文件

最小化 CSS 和 JavaScript 文件是改善 LCP 指标的基本方法，也是比较简单的方法。

根据堆栈和受众的特点（如他们通常使用的连接类型），您可以使用不同的缩减策略。由于现在大多数网络连接都是通过 HTTP/2 或 HTTP/3 进行的，您不一定需要将所有内容都捆绑到一个文件中，因为这两种通信协议都支持流复用（用户的浏览器可以同时下载多个文件）。

有许多 CSS 和 JavaScript 压缩工具可供选择，包括：

在线压缩，CSS 比较常用的是 CSS Minify 和 CSSO，JavaScript 比较常用的是 Minifier 和 JSCompress。
NPM 包，如 cssnano（这是一个PostCSS插件）和 UglifyJS。
模块打包工具，比如 Vite、Turbopack、Webpack、Parcel 和 Rollup，它们都带有各种优化扩展和内置的有利于网页性能的功能，如代码分割。

3.在标签中嵌入关键CSS

关键 CSS 是指适用于首屏内容的样式规则。

由于 LCP 衡量的是首屏的内容的渲染时间，您可以通过提取关键CSS并将其作为内联CSS置于 <head> 部分中的一对 <style></style> 标签中来改善它。

这种方式的主要优势是浏览器可以在无需等待整个 CSS 文件被解析完成的情况下渲染首屏内容（在网络状况不佳的情况下，这一点非常重要）。

由于您需要针对各种设备类型进行代码优化，从小屏智能手机到大屏幕监视器，没有严格的规定哪些元素适用于首屏和非首屏的内容。如果要手动提取关键CSS，您将需要根据估计值进行操作（例如，最可能需要添加适用于可见内容（例如标题、段落等）的大部分或全部样式规则）。

或者，您可以使用在线关键 CSS 生成器，例如：

由 Jonas Ohlsson Aden 开发的 Penthouse
由 Addy Osmani 开发的 Critical
由 Arjen Karel 开发的 Critical CSS Generator

上面我们提取了关键 CSS 并内联到 <head> 部分，那么非关键 CSS 如何优化呢？

可能最先想到的是延迟非关键 CSS 的渲染。然而加载样式表的 <link> 标签没有像 <script> 标签一样具有 defer 属性。

推迟非关键 CSS 的最佳解决方法是：

使用 rel="preload" 和 as="style" 属性预加载CSS文件
同时，将额外的 rel="stylesheet" 属性添加到 onload 事件处理程序中

这种技术使得浏览器只在页面内容加载后处理 CSS 文件（但由于文件已经被预加载，所以浏览器可以立即开始处理它）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- meta tags -->
    <title>Inline Critical CSS</title>
    <style><!-- critical CSS inlined and minified --></style>
    <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="style.css"></noscript>
  </head>
  <body>

  </body>
</html>

上面的代码示例还在添加 rel="stylesheet" 属性之前将 onload 事件处理程序置空，这是某些浏览器所要求的（以防止在 rel 属性的值发生变化时重新调用处理程序）。<noscript> 标签的作用是兜底，因为只有当用户浏览器启用 JavaScript 时，onload 属性才会起作用。

您还可以使用 media 属性有条件地加载一些非关键 CSS（如移动和打印样式），从而进一步提高 CSS 性能。

4.defer 或 async 非关键 JavaScript

现在，让我们来看看如何优化 JavaScript 资源的加载，以改善 Largest Contentful Paint(LCP)。

1）defer 非关键 JavaScript：

使用 defer 属性，您可以延迟下载非首屏或由用户操作触发的非关键脚本，这样浏览器就能更快地呈现最大的内容元素。

您可以按以下方式在 <script> 标签中添加 defer 属性：

<script defer src="deferred-script.js"></script>

在 <script> 标记中添加 defer 属性后，只有在解析 HTML 页面后，但仍在 DOMContentLoaded 事件之前，才会执行该属性。

2）async 非关键 JavaScript：

async 属性是 defer 的另一种选择。它的作用是异步加载脚本（独立于 DOM）。

与 defer 不同，它与 DOMContentLoaded 事件无关。它会尽快执行，但与延迟一样，优先级较低。它通常被添加到第三方脚本中。

您可以按以下方式使用它：

<script async src="asynchronous-script.js"></script>

defer 和 async 属性都能将 JavaScript 文件转化为非渲染阻塞资源。

请注意，您不能在内联脚本中添加 defer 和 async 属性--它们只有在 src 属性存在时才起作用。

3）内联关键脚本：

关键 JavaScript 是一种渲染阻塞脚本，包含浏览器在渲染页面之前需要加载的功能。

虽然大多数脚本都可以延迟或异步加载，但如果仍有关键脚本，请将其作为内联 JavaScript 添加到 HTML 页面的 <head> 部分，并用 <script> 标签包裹起来。

5.优化图片

首屏的图像是 LCP 候选元素。即使文本节点（如标题）也符合条件，视口中最大的图像也很有可能成为 LCP 元素。

总的来说，图片优化的目标是使 LCP 候选图片加载速度更快，而将可能加载到折页下方的图片延后加载。

为了优化图像来提升 LCP，可以使用以下一种或多种技术：

1）图片压缩：

你可以使用各种图像压缩工具，包括独立的 Web 应用程序和 API，如 Squoosh、TinyPNG 和 ImageOptim，以及 imageMagic 等。

对于图像压缩，重要的一点是需要在压缩率和图像质量之间找到平衡，因为过度优化图像会导致图像模糊或质量低下，从而损害用户体验。

2）使用下一代图像格式：

新一代图像格式使用先进的算法压缩图像，与 JPEG 等传统图像格式相比，能以更小的文件大小提供相同或更好的图像质量。

WebP 是目前支持最广泛的新一代图像格式，所有现代浏览器都支持它。AVIF 是一种更新的格式，能生成更小的图像文件，但支持它的浏览器较少（如 Edge 不支持）。

您可以使用上面列出的一些图像优化应用程序（如 Squoosh）将图像转换为新一代图像。

但要注意的是，只有 WebP 和 AVIF 图像格式的有损算法才会比 JPG 格式的有损算法性能更高。它们的无损算法（用于 PNG 压缩）有时会导致图像文件比 PNG 等效格式大。

您可以使用 <picture> 和 <source> HTML 元素添加带有 WebP 和 JPG 兜底的 AVIF 图像：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Image"  width="900" height="600">
</picture>

如果只想添加 WebP 格式，只需使用上述代码示例中的第二个标记即可。还要注意的是，如果不需要支持传统浏览器，就不需要 JPG 兜底 - 在这种情况下，只需将 WebP 图像添加到

元素即可。

3）使用响应式图像：

上面的代码片段就是响应式图像语法的一个例子。不过，HTML 和 CSS 提供了多种实现响应式图像的方法。

响应式图像是指为页面上的每个 <img> 元素定义多个源文件，浏览器会选择最适合当前条件的文件（例如，备选源文件的格式（如上文 WebP/AVIF 示例中的格式）、大小、分辨率、方向等都可能不同）。

例如，您可以使用 srcset 和 sizes 属性在移动屏幕上加载较小的图片 -- 这将提高您的移动端 LCP 分数：

<img src="image-sm.webp" srcset="image-sm.webp 400w, image-md.webp 800w, 
images-lg.webp 1200w" sizes="80vw" alt="Image">

4）懒加载视口外图像：

视口外的图片包括在非首屏或画布外菜单、标签、弹出窗口、模态等内呈现的图片。

懒加载（又称按需加载）是指只在需要时下载内容，例如当用户向下滚动页面，图像即将到达视口时。您可以在 HTML 和 JavaScript 中实现懒加载。但最简单的方法是在

标签中添加 loading="lazy" 属性：

<img loading="lazy" src="image.webp" alt="Image" width="900" height="600">

提醒：loading="lazy" 已经被所有现代浏览器所支持

5）预加载 LCP 候选图像：

如果想加快 LCP 候选图片的处理速度，也可以考虑在 HTML 页面的 <head> 部分添加以下代码来预载图片（注意，仍需使用 <img> 标签将预载图片添加到 <body> 部分）：

<!-- Preload the LCP image in the head section -->
<head>
  <link rel="preload" as="image" href="image.webp">
</head>
<!-- Render the preloaded image in the <body> section -->
<body>
  <img src="image.webp" alt="LCP Candidate" width="900" height="600">
</body>

6）使用图像 CDN：

如果从内容分发网络 (CDN) 加载图像（可能还有其他静态资源），则可以进一步加快图像速度，降低最大内容绘制时间。CDN 通过从地理位置上最靠近相应访问者的数据中心加载图片来减少延迟。

6.使用 fetchpriority 属性确定资源加载的优先级

FetchPriority API 以前称为优先级提示（Priority Hints），它实现了一种浏览器提示，允许您向浏览器提供关于如何在页面上优先加载资源的建议。由于它们只是提示而非命令，因此浏览器可自行决定是否将其纳入考虑范围。

fetchpriority 属性是 FetchPriority API 的 HTML 句柄。

您可以将其添加到 <img>、<iframe>、<script> 和 <link> 元素中，以对图片、iframe 以及 CSS 和 JavaScript 文件进行优先级排序或取消优先级排序。

它的取值范围如下：

height
low
auto（默认值）

例如，您可以在 LCP 候选图像中添加 fetchpriority="high" 提示：

<img src="hero-image.webp" fetchpriority="high" alt="LCP candidate"
width="900" height="600">

有趣的是，由于 <link> 元素也接受 fetchpriority 属性，因此可以将其添加到要预加载的资源中。

例如，您可以让通过 CSS 添加的首屏背景图片更快地预载：

<link rel="preload" as="image" href="css/images/background.webp" fetchpriority="high">

最后

本文探讨了优化 Largest Contentful Paint（LCP）的几种常见的方式和使用上注意事项，这仅仅是一些可行性的措施和建议，在项目实践中需要跟进实际情况按需使用。

如果本文对您有帮助，欢迎关注、点赞和转发，感谢您的支持！

HTML5 内联 SVG

上一篇：50个好用的前端框架，千万收好以留备用
下一篇：前端实现最佳截图方案(上)

网页性能之 LCP 优化指南

1.LCP 介绍

2.最小化 CSS 和 JavaScript 文件

3.在标签中嵌入关键CSS

4.defer 或 async 非关键 JavaScript

5.优化图片

6.使用 fetchpriority 属性确定资源加载的优先级

最后

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

网页性能之 LCP 优化指南

1.LCP 介绍

2.最小化 CSS 和 JavaScript 文件

3.在 标签中嵌入关键CSS

4.defer 或 async 非关键 JavaScript

5.优化图片

6.使用 fetchpriority 属性确定资源加载的优先级

最后

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

3.在标签中嵌入关键CSS