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 事件触发
参考

2. First Paint 与 First Contentful Paint

  • 关注初始渲染。
  • 不会考虑绘制内容的重要性。
  • loading 图会导致没有价值的时间点。如果页面一开始显示一个小菊花(Loading Indicator),此时此刻这个被捕获的时间点所呈现给用户的内容并不是有价值的主要内容。
解释
  • First Paint:是 html 的第一个像素渲染到屏幕上所用的时间。
  • First Contentful Paint:是当浏览器渲染第一块完整内容的时间。可以作为 FMP 的近似值,但它经常捕获没有意义的渲染,如头部和导航栏。

3. First Meaningful Paint 与 Speed Index

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

4. Largest Contentful Paint (LCP)

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

参考

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文结合谷歌官方工具 Lighthouse,分析了最新的前端页面性能评分标准,帮助大家更好地理解各项性能指标,以提...
    vivo互联网技术阅读 397评论 0 0
  • 术语 FP、FCP、FMP与LCP 从前面的评测报告中,我们会看到FP、FCP、FMP与LCP这几个字母很接近的术...
    奇点_wu123阅读 1,403评论 0 0
  • 背景 现代网页设计越来越复杂,用户体验日渐受到更多开发者的关注,但用户体验和网站性能是比较主观感受的概念,因此需要...
    livcll学院阅读 2,757评论 0 3
  • 定位应用的性能问题 Vue应用的性能问题可以分为两个部分:运行时性能问题,加载性能问题。和其他 web应用一样,定...
    hellomyshadow阅读 2,262评论 1 15
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,571评论 16 22