Largest Contentful Paint (LCP)

发展历程

Load 与 DOMContentLoaded
First Paint 与 First Contentful Paint
First Meaningful Paint 与 Speed Index
Largest Contentful Paint (LCP)

1. Load 与 DOMContentLoaded

• 无法度量内容何时渲染
• “主要内容”何时呈现在用户眼里更无法度量
• 单页应用流行起来之后，这两个度量标准更无参考价值

解释

• DOMContentLoaded：浏览器首先加载解析 HTML，HTML 加载解析完成后，触发 DOMContentLoaded Event。此时浏览器尚未开始渲染，其他静态资源，比如图片等也还没加载。
• load：html 文档中的图片资源，js 代码中有异步加载的 css、js 、图片资源都加载完毕之后，load 事件触发

参考

• DOMContentLoaded 和 load 的区别

2. First Paint 与 First Contentful Paint

• 关注初始渲染。
• 不会考虑绘制内容的重要性。
• loading 图会导致没有价值的时间点。如果页面一开始显示一个小菊花（Loading Indicator），此时此刻这个被捕获的时间点所呈现给用户的内容并不是有价值的主要内容。

解释

• First Paint：是 html 的第一个像素渲染到屏幕上所用的时间。
• First Contentful Paint：是当浏览器渲染第一块完整内容的时间。可以作为 FMP 的近似值，但它经常捕获没有意义的渲染，如头部和导航栏。

3. First Meaningful Paint 与 Speed Index

• 关注主要内容何时呈现。
• 原理复杂，经常出错。
• FMP 最佳情况下准确率不到 80%。

解释

• First Meaningful Paint (FMP)：首次有效渲染。是当页面的主要内容出现在屏幕上花的时间。
  主要内容：

参考

• https://segmentfault.com/a/1190000009870748

4. Largest Contentful Paint (LCP)

查看 “绘制面积” 最大的元素何时开始渲染

• 用户交互时会停止检测。
• 最大的元素被删除后需要重新确定新的最大的元素。
• LCP 指标
• Largest Contentful Paint (LCP) - 奇舞周刊

参考

• Largest Contentful Paint (LCP) - 奇舞周刊
• Chrome Performance常见名词解释(FP, FCP, LCP, DCL, FMP, TTI, TBT, FID, CLS)