Largest Contentful Paint (LCP)
编者按:本文作者Berwin,W3C性能工作组成员,360导航资深前端工程师。《深入浅出Vue.js》作者。
LCP 全称 “Largest Contentful Paint”,翻译为“最大内容绘制”,用于监控网页可视区内“绘制面积”最大的元素开始呈现在屏幕上的时间点。
1. 介绍
度量网页 “主要内容” 何时呈现在用户眼里是一项非常具有挑战的事情。
历史上一直如此,最早期使用 load 与 DOMContentLoaded,但它俩无法度量内容何时渲染,“主要内容”何时呈现在用户眼里更无法度量,特别是单页应用流行起来之后,这两个度量标准更无参考价值。
后面使用 First Paint 与 First Contentful Paint,但它俩更多的是专注于“初始渲染”,不会考虑绘制内容的重要性。如果页面一开始显示一个小菊花(Loading Indicator),此时此刻这个被捕获的时间点所呈现给用户的内容并不是有价值的主要内容。
使用比较高级的 First Meaningful Paint 与 Speed Index 可以度量主要内容何时呈现在用户眼里,但它俩的捕获原理比较复杂,所以经常出错,FMP在最佳情况下的准确率也只有77%。
关于FMP的捕获原理可以查看文章 《捕获FMP的原理》1
随着不断研究,前不久一种新的度量标准诞生了,也就是本文介绍的对象LCP。
2. LCP
根据W3C Web性能工作组的讨论和Google的研究,发现度量页面主要内容的可见时间有一种更精准且简单的方法是查看 “绘制面积” 最大的元素何时开始渲染。
所谓绘制面积可以理解为每个元素在屏幕上的 “占地面积”,如果元素延伸到屏幕外,或者元素被裁切了一部分,被裁切的部分不算入在内,只有真正显示在屏幕里的才算数。
图片元素的面积计算方式稍微有点不同,因为可以通过CSS将图片扩大或缩小显示,也就是说,图片有两个面积:“渲染面积”与“真实面积”。在LCP的计算中,图片的绘制面积将获取较小的数值。例如:当“渲染面积”小于“真实面积”时,“绘制面积”为“渲染面积”,反之亦然。
页面在加载过程中,是线性的,元素是一个一个渲染到屏幕上的,而不是一瞬间全渲染到屏幕上,所以“渲染面积”最大的元素随时在发生变化。如果使用 PerformanceObserver 去捕获LCP,会发现每当出现“渲染面积”更大的元素,就会捕获出一条新的性能条目。
如果元素被删除,LCP算法将不再考虑该元素,如果被删除的元素刚好是 “绘制面积” 最大的元素,则使用新的 “绘制面积” 最大的元素创建一个新的性能条目。
该过程将持续到用户第一次滚动页面或第一次用户输入(鼠标点击,键盘按键等),也就是说,一旦用户与页面开始产生交互,则停止报告新的性能条目。
所以应该仅向分析服务器发送最后捕获出的那个性能条目。
图中绿色蒙层代表“绘制面积”最大的元素,可以看出,随着页面不断加载,“绘制面积”最大的元素在不停的变化。
3. 限制
LCP也不是完美的,也很容易出错,它具有如下问题:
该算法在检查到用户与页面产生交互时停止,也就是说,如果在“主要内容”显示之前发生了“用户输入”,算法将不会捕获到主要内容。如果用户很早就开始与网页产生交互,该算法将会捕获错误的结果或者没有结果。
由于元素一旦删除就不能被视为是面积最大,所以在具有大图片轮播的页面中会出现问题。如果在绘制下一张图时,当前图片被删除,并且下一张图被认为是面积最大,那么算法将基于轮播图不断更新LCP。
元素被删除后不能被认为是面积最大主要是解决“启动画面”问题。
4. Example
使用 PerformanceObserver 捕获LCP非常简单,仅需设置entryType 为 largest-contentful-paint 即可。
const observer = new PerformanceObserver((entryList) => {const entries = list.getEntries();const lastEntry = perfEntries[perfEntries.length - 1];const lcp = lastEntry.renderTime || lastEntry.loadTime;console.log('LCP:', lcp) }); observer.observe({entryTypes: ['largest-contentful-paint']});
总结
本文讲述了一种新的性能度量标准LCP,LCP 是一种侧重于用户体验的性能度量标准,与现有度量标准相比,更容易理解与推理。
文内链接
https://github.com/berwin/Blog/issues/42
关于奇舞周刊
《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后,直接发送链接到后台即可给我们投稿。
Largest Contentful Paint (LCP)相关推荐
- Google 最新的性能优化方案,LCP 提升30%!
大家好,我是 ConardLi. 网页的性能,大部分情况下是影响用户使用体验的第一要素,特别是对于很多电商.金融网站,可能几秒的性能提升就意味着更大的转化率和收益. 所以优化网页的性能,一直是前端工程 ...
- React脚手架案例
React脚手架 一 初始化 react 脚手架 需要理解的概念有: 脚手架的作用是什么 脚手架的支持技术是什么?webpack(入口.出口.加载器.模式.插件) 脚手架将会做哪些工作 JSX的预解析 ...
- 腾讯企鹅辅导 H5 性能极致优化
企鹅辅导 H5 页面在长期迭代过程中,逐渐累积了一些性能问题,导致页面加载.渲染速度变慢.为了提升用户体验,近期针对页面加载速度,渲染速度做了专项优化,本文是对此次优化的实践总结.分析过程比较细致,希 ...
- 腾讯企鹅辅导 H5 性能极致优化总结
企鹅辅导 H5 页面在长期迭代过程中,逐渐累积了一些性能问题,导致页面加载.渲染速度变慢.为了提升用户体验,近期针对页面加载速度,渲染速度做了专项优化,本文是对此次优化的实践总结.分析过程比较细致,希 ...
- 秋招斩获所有互联网大厂面经之前端
1 flash和js通过什么类如何交互? ExternalInterface ----------------------------------- 2 call和apply: -apply传入的是一 ...
- 跨境电商须知: Google CWV新政及应对之道(上)
Google官方发布新政 2020年 11 月,Google曾宣布在 Google 搜索中推出网页体验排名规则变更,称之为"网页体验更新".谷歌在2021年的6月到8月,用了两个月 ...
- 前端面经 300条,背完这些就够了!
前沿 确实有些标题党哈,但是确实是本人秋招之间总结的经验,前端岗位,会很多也不行,有时候秋招就是面试官看你的知识广度和深度,特别是前端的岗位,设计的方方面面太多了,只有提前准备好,理解好,然后背下来, ...
- IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...
- chrome performance性能检测面板
chrome performance性能检测 参考 https://developer.chrome.com/docs/devtools/evaluate-performance/(主要参考,很多直接 ...
- 前端页面性能优化指标
前端页面性能优化指标 一.有哪些指标 LCP(Largest Contentful Paint) FID( First Input Delay) CLS(Cumulative Layout Shift ...
最新文章
- 2022-2028年中国封装用胶膜行业运营现状及投资发展潜力报告
- 数据库审计服务器性能要求,数据库审计技术指标资质要求-.docx
- php和python区别-PHP与Python语言有哪些区别之处?选择哪一个好?
- UI自动化之特殊处理三(日期控件\表格\富文本)
- 中国电梯市场产量规模与盈利趋势分析报告2022-2028年
- Core Data(3)- 使用绑定
- oracle 删除用户 递归,ORACLE递归查询遍历详解
- Install Cloud foundry MTA plugin
- LVS--NAT模型配置
- Haproxy 与 Cookie
- 【2019牛客暑期多校训练营(第二场) - D】Kth Minimum Clique(bfs,tricks)
- PHP能在Mac上运行吗,PHP Composer无法在Mac上运行
- SpringBoot实战:整合Redis、mybatis,封装RedisUtils工具类等(附源码)
- Android 面试总结~~~
- dell服务器开机进系统黑屏,dell电脑开机黑屏,教你几步解决_故障
- 如何使用微信小程序第三方UI组件库
- 基于校园图书管理系统需求分析
- python文件同时读写_python可以同时对文件进行读写操作吗
- 3-10 统计输入字符串中的单词个数及单词的平均长度(高教社,《Python编程基础及应用》习题7-7)
- 黄金搭档:老虎+猫头鹰+孔雀+考拉