网页性能之 LCP 优化指南
zhezhongyun 2025-01-08 18:42 80 浏览
如果你做过网页端性能优化，一定对 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）的几种常见的方式和使用上注意事项，这仅仅是一些可行性的措施和建议，在项目实践中需要跟进实际情况按需使用。
如果本文对您有帮助，欢迎关注、点赞和转发，感谢您的支持！
- 上一篇：50个好用的前端框架，千万收好以留备用
- 下一篇：前端实现最佳截图方案(上)
相关推荐
- Python入门学习记录之一:变量_python怎么用变量
-
写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...
- python变量命名规则——来自小白的总结
-
python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...
- Python入门学习教程:第 2 章 变量与数据类型
-
2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...
- 绘制学术论文中的“三线表”具体指导
-
在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...
- Python基础语法知识--变量和数据类型
-
学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...
- 一文搞懂 Python 中的所有标点符号
-
反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...
- Python变量类型和运算符_python中变量的含义
-
别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...
- 从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序
-
在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...
- Python中下划线 ‘_’ 的用法，你知道几种
-
Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...
- 解锁Shell编程:变量_shell $变量
-
引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...
- 一文学会Python的变量命名规则!_python的变量命名有哪些要求
-
目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...
- 更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for
-
src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...
- C++第五课:变量的命名规则_c++中变量的命名规则
-
变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....
- Rust编程-核心篇-不安全编程_rust安全性
-
Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...
- 探秘 Python 内存管理:背后的神奇机制
-
在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- opacity 属性 (32)
- transition 属性 (33)
- 1-1. 变量声明 (31)