最大内容绘制_Largest-Contentful-Paint_LCP

**最大内容绘制 (Largest Contentful Paint，简称 LCP)** 是 Google 提出的“核心网页指标”(Core Web Vitals) 中非常关键的一项。它主要用来衡量网页的**加载性能**，准确地说是衡量用户“感知”到的加载速度。

#status / growing #type / concept #tech / dev / frontend #platform / browser #resource / web-vitals

[!info] related notes

简单来说，LCP 测量的是从用户请求打开网页开始，到视口 (Viewport，即屏幕可见区域) 内最大的图像或文本块渲染完成所花费的时间。

真实的用户体验： 过去的指标（如 load 或 DOMContentLoaded）只是告诉我们代码什么时候加载完，但不代表用户能在屏幕上看到有用的内容。LCP 关注的是“首屏最大的内容（通常是文章标题、主图或 Hero Banner）什么时候出现”，这直接决定了用户觉得你的网页是快还是慢。
SEO 排名因素： Google 已经将 Core Web Vitals（包括 LCP）作为搜索排名的重要信号。LCP 表现差的网页，在移动端和桌面端的搜索排名都会受到负面影响。

为了提供良好的用户体验，网站应努力将 LCP 控制在 2.5 秒 以内（基于页面加载的第 75 个百分位数数据）：

LCP 并不是计算页面上的所有元素，它只关注视口内占据面积最大的特定类型元素。目前主要包括：

注意：如果一个元素超出了屏幕可视区域（或者被裁剪、设置了不可见），超出部分不会计入 LCP 的大小计算。

LCP 时间过长通常是由以下四个主要瓶颈造成的：

如果浏览器等了很久才收到服务器发来的第一份 HTML 数据，那么后续所有的渲染都会被推迟。

优化方向： * 优化后端数据库查询和逻辑处理。
- 将静态资源和 HTML 页面推送到 CDN（内容分发网络），缩短物理距离。
- 使用服务端缓存（如 Redis）或 HTTP 缓存。

浏览器在渲染内容之前，必须先解析 HTML 并构建 DOM 树。如果在这个过程中遇到了同步加载的外部 CSS 或 JS 文件，就会停止解析，直到这些资源下载并执行完毕。

优化方向：
- 提取并内联“关键 CSS” (Critical CSS) 到 <head> 中，延迟加载非关键的 CSS。
- 尽量压缩 CSS 和 JS 文件体积。
- 对非关键的 JavaScript 使用 defer 或 async 属性。

LCP 元素通常是一张大图或特定的网页字体，如果这些文件太大或网络不佳，加载就会很慢。

优化方向：
- 图片优化： 压缩图片体积，使用现代图片格式（如 WebP、AVIF），并根据屏幕尺寸提供响应式图片 (srcset)。
- 预加载 (Preload)： 如果你知道某个资源（比如 Hero Image 或主字体）一定是 LCP 元素，可以在 HTML 头部使用 <link rel="preload" as="image" href="…"> 强制浏览器尽早下载它。
- 避免客户端渲染导致的延迟： 如果 LCP 是一张图片，不要用 JavaScript 动态注入它，尽量直接写在 HTML 中。

如果你主要使用纯 React、Vue 等构建单页应用 (SPA)，浏览器通常需要先下载一个巨大的 JS bundle，执行它，然后再去请求数据并渲染 DOM。这会导致 LCP 非常长。

优化方向：
- 尽量缩小 JavaScript 的体积（Code Splitting、Tree Shaking）。
- 考虑使用 服务端渲染 (SSR) 或 静态站点生成 (SSG)，让服务器直接返回渲染好的 HTML 字符串，这样浏览器拿到 HTML 就能立刻绘制出 LCP 元素。

你可以使用以下工具进行测试和监控：

实验室工具（用于开发和调试）： Chrome 开发者工具 (Performance 面板和 Lighthouse)、WebPageTest。
真实用户监控（用于了解线上表现）： PageSpeed Insights (PSI)、Google Search Console (核心网页指标报告)、Chrome User Experience Report (CrUX)。

Related notes