前端性能优化技巧：提升 LCP（Largest Contentful Paint）
作者：自由的巨浪
https://juejin.cn/post/7406143794000019506
Largest Contentful Paint（LCP）是衡量页面加载性能的关键指标之一，它记录了页面中最大文本块或图像元素被渲染的时间。优化LCP可以提升用户体验，以下是一些提升LCP的策略：
- 优化关键渲染路径：确保关键资源（如CSS、JavaScript和图像）尽快加载，以便浏览器可以快速渲染页面内容。
- 减少重排和重绘：通过减少DOM操作和使用CSS属性来避免重排和重绘，可以加快页面渲染速度。
- 使用性能预算：为网站设置性能预算，限制资源文件的大小，避免过大的文件影响页面加载。
- 延迟非关键资源加载：使用
async或defer属性加载非关键JavaScript文件，或者使用lazy-loading属性加载非视口图像，以减少对LCP的影响。 - 优化图像：使用现代图像格式（如WebP）和适当的压缩，确保图像快速加载且不影响视觉质量。
- 使用CDN和缓存：通过内容分发网络（CDN）和浏览器缓存来减少资源加载时间。
- 监控和测试：使用工具如Google Lighthouse来监控LCP，并根据测试结果进行优化。
- 服务器响应时间：优化服务器性能，减少首字节时间（Time to First Byte, TTFB），以加快资源的加载速度。
通过这些方法，可以有效地提升LCP，从而改善用户在浏览网页时的感知加载速度。
今天分享这篇文章来详细谈谈如何有效地提升LCP。
以下是正文：
导读
LCP 是 Core Web Vitals 的三个关键指标之一，Core Web Vitals 是 Google 用于评估网页用户体验的标准之一。为了获得良好的用户体验，Google 建议 LCP 时间在 2.5 秒以内。如果 LCP 超过 4 秒，则需要进行优化。
文本将详细介绍如何提升 LCP（Largest Contentful Paint），优化前端性能。
什么是 LCP？
LCP (Largest Contentful Paint) 是 Core Web Vitals 一个关键的 Web 性能指标，用于衡量网页的加载性能。
具体来说，LCP 是指从用户请求页面开始到页面主体内容（如大图像、视频或大块文本）完全加载并显示在视口中所需的时间。LCP 越短，用户感受到的页面加载速度就越快，这对提升用户体验和页面留存率至关重要。
为了获得良好的用户体验，Google 建议 LCP 时间在 2.5 秒以内。如果 LCP 超过 4 秒，则需要进行优化。
Core Web Vitals 三个关键指标中其它两个指标是 FID（First Input Delay，首次输入延迟） 和 CLS（Cumulative Layout Shift，累积布局偏移） 。优化这些指标可以提升用户体验和搜索引擎排名。
优化 LCP 的重要性
优化 LCP 不仅仅是为了提高网站的加载速度，还与 SEO 密切相关。Google 已将页面体验作为排名因素，LCP 是核心网页指标之一。一个优化的 LCP 时间有助于：
- 提高搜索引擎排名：页面加载时间快的网站往往在搜索引擎结果中排名更高。
- 提升用户体验：快速的 LCP 时间可以减少用户等待时间，提高用户满意度。
- 增加页面留存率：加载速度快的页面可以减少用户流失，尤其是在移动设备上。
关键渲染路径（Critical Rendering Path）
在介绍如何优化 LCP 前，我要先给大家介绍一下什么是 关键渲染路径（Critical Rendering Path）。
Critical Rendering Path (CRP) 是浏览器从接收到 HTML 文档到将网页完全呈现给用户这一过程中所需的关键步骤。CRP 主要涉及将 HTML、CSS 和 JavaScript 解析为像素并呈现在用户的屏幕上。理解 CRP 有助于优化网页性能，减少页面的首次加载时间，从而提高用户体验。
CRP 的关键步骤
HTML 解析和 DOM 树构建 (HTML Parsing and DOM Construction)
- 浏览器从服务器接收 HTML 文件并开始解析它，构建一个称为 DOM（文档对象模型） 的树状结构。DOM 树包含网页的内容和结构，表示 HTML 文档的层次。
CSS 解析和 CSSOM 树构建 (CSS Parsing and CSSOM Construction)
- 与 HTML 解析并行，浏览器解析所有的 CSS 文件，构建 CSSOM（CSS 对象模型） 树。CSSOM 树包含了所有样式规则及其关系，定义了网页的视觉展示。
合成 Render Tree (Render Tree Construction)
- 一旦 DOM 和 CSSOM 树构建完成，浏览器将这两个树合并，生成 Render Tree（渲染树） 。Render Tree 只包含需要在屏幕上显示的节点，因此隐藏的元素（例如
display: none;）不会包含在内。这个树代表了每个节点如何被绘制在页面上。
布局 (Layout)
- 在渲染树生成之后，浏览器计算每个节点在页面中的确切位置和大小，这个过程称为 布局 或 回流 (reflow) 。这是一个逐步的过程，因为浏览器需要考虑不同设备和屏幕尺寸的布局规则。
绘制 (Paint)
- 布局完成后，浏览器将每个节点的样式应用于它们，并开始 绘制 (painting) ，将内容实际呈现到屏幕上。这个阶段涉及将渲染树的每个节点转换为屏幕上的像素。
合成和显示 (Compositing and Display)
- 在绘制之后，浏览器将这些像素块组合成图层，并最终在屏幕上显示。这一阶段包括 GPU 加速的合成操作。
LCP 的触发元素
了解关键渲染路径后，让我们再看看 LCP 触发元素通常是什么：
- 图像 (
<img>元素) - 图片背景 (
<image>或 CSSbackground-image) - 块级文本元素（如
<div>,<p>,<h1>等） - 视频海报 (
<video>元素内的poster属性)
这些元素在视口内加载时，浏览器会记录它们的渲染时间，并将其中加载时间最长的元素作为 LCP。
如图所示通过 lighthouse 分析出，我的 icons.toolkit.vue 项目页面的 LCP 元素是 H1 标签。
其实优化 LCP 关键是优化 CRP 中 LCP 的触发元素的加载速度。以下是一些指导性的优化策略：
- 减少阻塞的 CSS 和 JavaScript: 避免使用阻塞渲染的 CSS 和 JavaScript。可以将 CSS 放在
<head>中，JavaScript 放在页面底部或使用async和defer属性。 - 减少 DOM 和 CSSOM 树的复杂性: 减少不必要的 HTML 和 CSS，尽量避免深层的嵌套结构。
- 利用浏览器缓存: 缓存静态资源，如 CSS 和 JavaScript 文件，可以减少重新加载时间。
- 优化图片和其他资源: 使用现代格式的压缩图片，减少图片的大小，并使用懒加载技术，避免加载不在视口中的图片。
如何优化 LCP？
在了解完 CRP 和 LCP 的触发元素后，我们已经知道优化 LCP 主要是确保关键内容尽快渲染在用户视口中，从而改善页面的加载性能。以下是一些具体的优化策略：
1. 优化服务器响应时间
服务器响应时间直接影响 LCP，因为服务器需要在页面开始加载之前发送初始 HTML 文档。为了优化服务器响应时间，可以：
- 使用内容分发网络 (CDN) ：CDN 可以缓存网站内容，并将其分发到离用户最近的服务器，从而减少延迟。
- 优化服务器配置：确保服务器的性能能够高效处理请求，使用快速的 Web 服务器（如 Nginx 或 Apache）。
- 减少后端处理时间：优化数据库查询，减少不必要的处理逻辑，使用缓存技术（如 Redis 或 Memcached）。
2. 加载关键资源优先
关键资源（如 CSS 和大块的主要内容）应尽可能快速加载，以避免阻塞页面的渲染。可以采取以下措施：
- 延迟加载非关键资源：将非关键的 JavaScript 和样式表设置为异步加载或延迟加载，以确保关键内容优先加载。
- 使用 HTTP/2：HTTP/2 可以并行加载多个资源，有效减少加载时间。
- 内联关键 CSS：将页面折叠部分（above-the-fold）的关键 CSS 直接内联到 HTML 文档中，以减少首次渲染所需的时间。
- 使用
preload指令：对关键资源（如字体、重要图片）使用<link rel='preload'>标签预加载，确保这些资源快速加载和呈现。
3. 优化图像和媒体
图像通常是影响 LCP 的主要因素，因为它们往往是页面中最大的内容。优化图像可以显著提升 LCP：
- 压缩图像：使用现代图像格式（如 WebP 或 AVIF），并应用适当的压缩技术，减少图像文件大小。
- 设置正确的图像尺寸：使用响应式图像 (
srcset和sizes属性) 根据设备尺寸加载合适的图像。 - 懒加载非关键图像：使用
loading='lazy'属性延迟加载页面中不可见的图像，减少初始页面加载时间。
4. 减少第三方脚本的影响
第三方脚本（如广告、社交媒体小部件、分析工具）可能会显著拖慢页面加载速度。优化这些脚本可以有效提升 LCP：
- 异步加载脚本：使用
async或defer属性，避免脚本阻塞页面渲染。 - 减少不必要的第三方脚本：只加载必要的第三方服务，去除不必要的脚本。
减少不必要的第三方脚本
上图是通过 Lighthouse 分析出的 js 代码的覆盖率的统计图。通过它可以知道页面中未使用的 js 资源的占比，我们可以根据统计数据，想办法尽量减少未使用 js 资源的占比。
例如 vue 项目中使用 splitChunks 配置处理 import 动态加载组件的方式，减少初始化项目时的 js 资源体积。
// 懒加载非初始化必须的组件
const CopyrightMeta = import('./components/CopyrightMeta')
然后就是类似 element-ui 和 lodash 之类的第三方库使用按需加载的方式仅加载需要的组件和功能函数。
5. 使用浏览器缓存
利用浏览器缓存可以减少重复请求，提高页面的加载速度：
- 设置适当的缓存头：确保静态资源（如图像、CSS 和 JavaScript 文件）具有合适的缓存策略，以便用户在后续访问时可以直接从缓存中加载资源。
- 利用服务工作线程 (Service Workers) ：服务工作线程可以在用户的浏览器中缓存资源，从而减少后续访问时的加载时间。
6. 优化 CSS 和字体加载
- 最小化和压缩 CSS：删除不必要的空格、注释和代码，并压缩 CSS 文件，减少文件大小。
- 使用字体显示策略：使用
font-display属性来控制自定义字体的加载行为，避免阻塞文本渲染。
字体显示策略
为了提升视觉效果和品牌一致性，许多网站使用自定义字体。然而，自定义字体的使用也会引发一些性能问题，比如增加网页的加载时间，导致文本闪烁或不可见。这些问题会对用户体验产生负面影响。
为了更好地控制字体加载行为，CSS 提供了 font-display 属性，它允许开发者指定在字体加载时，浏览器如何处理文本的显示。通过合理使用字体显示策略，可以优化网页的加载体验，确保在字体加载过程中为用户提供最佳的视觉体验。
font-display 的值
font-display 属性有多个可能的值，每个值代表一种不同的字体显示策略：
- auto（默认值）
- block
- swap
- fallback
- optional
如何选择合适的 font-display 策略？
选择合适的 font-display 策略取决于具体的项目需求和用户体验的优先级：
- 快速显示文本：如果优先考虑页面内容的快速展示，可以使用
swap或optional，确保在字体加载过程中文本总是可见。 - 确保一致的视觉效果：如果视觉一致性和自定义字体的使用是优先考虑的，可以选择
block或fallback，在字体加载后呈现自定义字体。 - 性能优先：在移动端或性能敏感的应用中，使用
optional可以减少字体加载对性能的影响。
针对 LCP 指标具体来说就是使用 font-display: swap; 使浏览器在加载字体的同时立即使用后备字体呈现文本。当自定义字体加载完成后，后备字体将被替换为自定义字体，这种策略被称为“闪烁的无样式文本”（Flash of Unstyled Text, FOUT）。
@font-face {
font-family: 'IconFont';
src: url('iconfont.woff2') format('woff2');
font-display: swap;
}
优点: 文本始终可见，避免了空白文本的问题，提高了可读性。
缺点: 字体切换可能导致短暂的视觉不一致。
如何测量 LCP？
要有效地优化 LCP，监控和测量是必不可少的。以下是一些工具和方法来监控 LCP：
- Google PageSpeed Insights：提供对 LCP 的详细分析，并提出优化建议。
- Web Vitals 扩展：Google Chrome 浏览器的 Web Vitals 扩展可以实时监控 LCP。
- Lighthouse：Lighthouse 是一个开源工具，用于分析网页性能，包含对 LCP 的评估。
- Web.dev：这是一个由 Google 提供的在线工具，用于测试网页性能，并生成优化建议。
LCP 是一个关键的性能指标，直接影响用户体验和 SEO。通过优化服务器响应时间、加载关键资源、优化图像、减少第三方脚本的影响、使用缓存和优化 CSS 与字体加载等措施，可以显著提升 LCP。
定期监控和优化 LCP，可以确保网站为用户提供快速、流畅的体验，并在搜索引擎排名中保持竞争力。
总结
虽然今天的主题聊的是前端性能优化，不过可以看出，作为前端工程师，现在的要求是越来越高了。不仅仅需要掌握前端相关的技术，还需要掌握一些后端相关的技能。在做前端性能优化时，很多时候还需要了解一些 nginx 服务器配置相关的知识，才能更加系统的优化前端性能的。
例如前端性能优化的另外一个重要手段；启用浏览器缓存，就要求需要了解如何在服务端配置启动用缓存。还有为了提高服务器的 HTTP 响应速度，需要在服务端开启 HTTP/2。这都要求前端工程师掌握一定的后端的服务器配置能力。
