最大内容绘制（LCP）
最大内容绘制（LCP）是一项 Core Web Vitals 指标，它衡量从导航开始到视口中最大的可见元素完成渲染所用的时间。它是 Google 用来代表「页面在用户感受上何时加载完成」的主要指标。
最大内容绘制（LCP）是一项 Core Web Vitals 指标，它衡量从导航开始到视口中最大的可见元素完成渲染所用的时间。它是 Google 用来代表「页面在用户感受上何时加载完成」的主要指标。
为什么重要
LCP 是三项 Core Web Vitals 之一，也是一项已确认的 Google 排名信号。Google 的阈值为：良好 ≤ 2.5 秒，需要改进 2.5–4.0 秒，差 > 4.0 秒。处于「良好」区间的页面，其跳出率明显更低、转化更高，而在第 75 百分位上 LCP 不达标可能会在竞争激烈的查询上压制排名。
什么算作「最大元素」
LCP 追踪在可见视口中绘制的最大元素。符合条件的候选项包括 <img>、<video> 海报帧、通过 CSS url() 加载的背景图像，以及块级文本节点。「最大」元素在加载过程中可能会变化，LCP 采用最终确定的那个最大元素。
LCP 缓慢的常见原因
服务器响应缓慢（TTFB）：如果 HTML 需要 1.5 秒才能到达，LCP 就不可能低于 2.5 秒。
阻塞渲染的资源：head 中的同步 CSS 和 JS 会延迟首次绘制。
未优化的图像：主视觉图像往往就是 LCP 元素。尺寸过大、未压缩或加载过晚的图像主导了大多数 LCP 不达标的情况。
客户端渲染：在水合之后才用 JS 渲染的 SPA 框架，会将 LCP 推到远超「良好」阈值之外。
对 LCP 元素进行懒加载：给主视觉图像添加 loading="lazy" 是一个常见错误，它会延迟 LCP 正在衡量的那个元素。
如何改善 LCP
预加载主视觉图像：<link rel="preload" as="image" href="..."> 让浏览器抢先一步。
使用现代图像格式：相比 JPEG，WebP 和 AVIF 可将负载削减 30–50%。
为主视觉图像添加 fetchpriority="high"，使其抢在其他资源之前。
通过 CDN 提供服务，以削减远端用户的 TTFB。
内联关键 CSS 并延迟加载其余部分。
使用 SSR 或静态生成，而非对内容密集型页面采用客户端渲染。
积极缓存，在边缘为回访用户进行缓存。
衡量 LCP
实地数据：Chrome 用户体验报告（CrUX）、Google Search Console Core Web Vitals 报告、PageSpeed Insights，这些都反映真实用户。
实验室数据：Lighthouse、WebPageTest、Chrome DevTools 性能面板，可复现但属于合成数据。
Google 基于实地数据的第 75 百分位进行排名，因此仅靠合成测试是不够的。
Sources: