之前已经介绍过 FCP，可以点击查阅前端页面加载性能指标之 FCP。本文介绍与之相对应的 LCP。通过上文得知，FCP 衡量的是页面首次渲染出有意义的内容的时间点，这通常包括文本、图像、非白色画布或 SVG 的渲染，可以让用户感知到网页正在加载。那么 LCP 又是什么？

什么是 LCP

Largest Contentful Paint（LCP）衡量的是页面从开始加载到视口内最大的图片或文本块完全渲染的时间。LCP 关注的是用户感知的主要内容加载速度，这通常包括页面上最显眼的元素，如大图像或文本块。

最大LCP元素

LCP 测量哪些元素

LCP 测量的通常是用户视图范围内的元素，包括   image、 svg、 video，通过 url 设置的 backgroud，以及包含文本节点或内联子元素的块级元素。

因为 LCP 是跟视图大小有关，所以 LCP 元素也不是一成不变。

以下情况的元素则不纳入 LCP 计算范围

  • 不可见元素：如果元素的透明度设置为 opacity: 0。
  • 全视口元素：覆盖整个视口的元素可能被视为背景而非主要内容。
  • 低熵图片：低熵图片通常指的是图像中灰度分布较为集中，灰度值较为单一或变化较小的图片。

不管什么元素，通过 css 设置了 margin，padding，border 这些属性，计算尺寸时都不会参与计算。

LCP 多少及格

根据谷歌的定义，一个良好的 LCP 得分是在 2.5 秒以内，这表示要求 75%的用户能够在这个时间内看到页面的主要内容 。如果 LCP 时间超过 4 秒，则被认为是“差”的用户体验。

LCP及格线

如何测量 LCP

下面推荐几种方式来测量 LCP 元素

  • Chrome 的 Performance（推荐）
  • Chrome 的 LightHouse
  • PageSpeed Insights
  • 使用 PerformanceObserver API

Performance（推荐）

Chrome 的 Performance 面板可以帮助我们分析页面的性能数据，包括 DCL、FP、FCP、LCP 等指标。鼠标点击响应的指标，可以查看关联的元素。下图就可以看到 LCP 元素。Performance 面板可以帮助我们更直观的分析页面性能数据，通常我也是用来分析页面加载性能，包括请求时序队列，JS 执行性能等。

Performance

Lighthouse

LightHouse 是谷歌浏览器提供的一个性能测试工具，可以诊断手机和桌面设备的网页性能。

接下来我们来测试一下该网站的性能数据，可以得出下面的性能概览。

kelen.cc的性能概览

通过分析结果可以看出首页的性能数据，包括 LCP、FCP、FID、CLS 等指标，下面是一些优化建议。虽然从数据看出，我的网站性能总体还是不错的，不过这仅仅是一个参考，具体的优化还需要根据实际情况来。

kelen.cc的性能指标数据

kelen.cc的LCP元素

PageSpeed Insights

PageSpeed Insights  是谷歌提供的在线网站性能分析工具，可以帮助你分析页面性能。它会给你一个关于页面性能的综合报告，包括 LCP。这个工具跟部署的服务器区域有关，所以可能会有不同的结果。类似于 Lighthouse，PageSpeed Insights 也会给出一些优化建议。这里就不做展示了。

使用 PerformanceObserver api

PerformanceObserver 可以通过脚本的方式来获取 LCP 元素。可以作为前端性能指标收集的一种方式。

let lastLcp;

const po = new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();

  for (const entry of entries) {
    if (entry.startTime !== lastLcp) {
      console.log("========下面是检测到的LCP元素========");
      console.log(entry.element);
      lastLcp = entry.startTime;
    }
  }
});

po.observe({ type: "largest-contentful-paint", buffered: true });

如何改进 LCP

  • 图像优化：压缩图片、选择合适的图像格式，如 WebP，以减少文件大小。
  • 懒加载：延迟加载页面上非关键内容，直到用户滚动到它们。
  • 提前加载：对影响LCP的关键请求可以提前发起请求。
  • 使用 cdn：通过内容分发网络加速静态资源的加载。
  • 减少服务器响应时间：优化服务器性能，利用接口，资源缓存减少数据传输。
  • 移除或延迟非必要的第三方脚本：减少对主要内容加载的阻塞 。