LCP 的衡量与优化

LCP 衡量什么，如何优化？

---

• 概念：最大内容绘制（Largest Contentful Paint）指的是加载页面最大视觉部分所需的时间。这个时间对应的是最大资源或文本块呈现在用户可见视口区域时的时间点。最大资源一般是指图片资源，如果可视区内没有图片，LCP 记录的就是最后一次显示内容的区域，比如文本块区域。也就是“准备好”给用户使用
• 特点：
  • LCP 指标记录的时间一定是在 FCP 的衡量与优化 时刻或之后
  • LCP 标记的 DOM 元素可能是文本或图片
  • LCP 元素内容必须在视口可见。如果在加载过程中被移出视口，或者尺寸大小超出视口，就不符合 LCP 标记条件了。
  • LCP 标记的是视口内最大的内容块，即使最后加载完成的是图片，如果图片尺寸小于文本块，那么 LCP 标记的仍然是文本块。
• LCP 元素类型：
  • 图片元素。<img> 是 LCP 中最常见的元素，也最常影响范围最大的元素。另外还包括 SVG 中的 <image> 元素。
  • <video> 视频元素。浏览器会根据 <video> 元素定义的 poster 属性值或第一帧视频画面作为最大内容。
  • 使用 CSS 的 url() 函数的图片背景样式元素。
  • 包含文本节点的块级元素。
• 如何优化：
  • 使用 <link> 元素把一些长图，大图预加载

    LCP 标记的是视口内最大的内容块，即使最后加载完成的是图片，如果图片尺寸小于文本块，那么 LCP 标记的仍然是文本块。

  • 大图拆分成小图并行加载
  • 使用新一代图片格式，比如 webp
• 比较常见的场景是，产品的宣传页，往往会有一个占比比较大的大型图片