关于web:页面加载性能之LCP

LCP (Largest Contentful Paint) 是一个以用户为核心的性能指标，能够测试用户感知到的页面加载速度，因为当页面次要内容可能加载实现的时候，它记录下了这个工夫点。一个疾速的 LCP，能够让用户感触到这个页面的可用性。

以往，对开发者而言，要测试一个页面次要内容加载并出现给用户的速度是一个很大的挑战。

旧指标，像 load 和 DOMContentLoaded 并不是很好，因为它不肯定跟用户屏幕上看到的内容绝对应。然而新的以用户为核心的指标，比方 FCP (First Contentful Paint) 只是记录了加载体验的最开始。如果页面显示的是启动图片或者 loading 动画，这个时刻对用户而言没有意义。

在过来，咱们也有举荐的性能指标，如：FMP (First Meaningful Paint) 和 SI (Speed Index) 能够帮咱们捕捉更多的首次渲染之后的加载性能，但这些过于简单，而且很难解释，也常常出错，没方法确定次要内容什么时候加载完。

有时候越简略越好。通过 W3C 性能工作小组的探讨和谷歌的钻研，咱们发现了一个更准确的测量形式，当最大的内容块渲染完的时候，基本上主内容都加载完了。

LCP 指标代表的是视窗最大可见图片或者文本块的渲染工夫。

个别是至多 75% 用户可能在 2.5 秒内，包含挪动和桌面设施。

跟 Largest Contentful Paint API 外面定义的统一，蕴含以下几种元素类型:

<img> 标签
<svg> 中的 <image> 标签
<audio> 标签
带 url() 背景图的元素
块级元素带有文本节点或者内联文本子元素

要留神的是，限度元素在这些范畴内只是为了一开始简略一点，当前可能会退出更多的元素。

LCP 中元素尺寸的定义就是用户视窗所见到的尺寸。如果元素在视窗里面，或者如果元素被 overflow 裁剪了，这些局部不计算入 LCP 的元素尺寸。

对于曾经被设置过大小的图片元素而言，LCP 的尺寸就是设置的尺寸，并非图片原始尺寸。
对于文本元素而言，只有蕴含所有文本节点的最小矩形才是 LCP 的尺寸。
对于其余元素而言，css 款式里的 margin、padding 和 border 都不算。

因为 Web 页面都是分阶段加载的，所以最大元素可能随时会发生变化。

为了捕捉这种变动，浏览器会派发一个类型是 largest-contentful-paint 的 PerformanceEntry 对象，示意浏览器绘制第一帧的时候最大的元素。在起初的渲染帧中，如果最大元素发生变化，会再次派发一个 PerformanceEntry 对象。

举个例子，一个页面蕴含一个文本题目和一张图片，首帧渲染的时候，文本是最大元素，随着图片加载实现，图片或成为最大元素。

很重要的一点是，只有元素曾经渲染，而且对用户可见，这个元素才能够被当成最大元素。未加载的图片未被渲染，所以不会被思考在内。如果用了自定义字体的文本，在字体文件加载之前，也不会被当成最大元素。

起初被 JS 增加到 dom 树上的节点，如果尺寸大于之前的最大元素，浏览器也会派发一个 PerformanceEntry 对象。

如果元素被移除，这个元素不会被当成最大元素。如果图片元素的 src 属性更改了，在新图片加载之前，这个元素也不会被当成最大元素。

将来，移除元素可能还会被当成最大元素，具体的须要期待 google 最新钻研

如果用户产生了交互行为（如点击、滚动、按键等），浏览器会进行上报新的 entry，因为用户的交互行为可能会导致页面元素的可见性变动。

对统计而言，你只须要统计最近上报的一次 PerformanceEntry 即可。

须要留神的是，如果用户关上页面之后，切换到后盾，等再次回到前台的时候，用户产生了交互行为，该埋点就不精确了，会比实在的工夫缩短一些。

因为平安的因素，如果跨域图片短少 Timing-Allow-Origin 的 header，图片渲染的工夫无奈拿到，相应的，能够用图片加载工夫来代替。不过举荐还是尽可能的加上这个 header。

为了使计算和派发新的条目标性能耗费放弃较低，元素的大小和位子的扭转不会创立新的 LCP 条目。只有元素在视窗内的初始大小和地位才会被思考。

这也意味着图片如果在屏幕外渲染，前面被挪动到了屏幕内不会上报。反之，如果图片开始在屏幕内渲染，后被移到了屏幕外，也会被上报。

下面两张图都是在页面加载过程中，最大元素发生变化。第一张图，新的内容被退出到 dom，而且这个元素成为了最大元素。第二张图，布局产生了变动，之前在视窗中的元素被移出了视窗外。

一般来说，后加载的内容比之前曾经渲染的内容要更大，但也有特例。

第一张图，Instagram logo 加载的比拟早，而且直到页面齐全加载，它仍旧是最大元素。第二张图，一开始是输入框中的文本元素最大，起初是段落文本最大，之后加载的每一张图片元素都没段落大。

最简略的形式就是应用 webvitals 的 js 库，代码如下:

import {getLCP} from 'web-vitals';

// Measure and log the current LCP value,
// any time it's ready to be reported.
getLCP(console.log);

应用 Element Timing API 来设置本人的自定义指标。

LCP 次要受以下四方面影响:

较慢的服务器响应工夫
阻塞渲染的 js 或者 css
资源加载工夫
客户端渲染性能

具体的优化敬请期待前面的文章。

LCP 对咱们来说是一个十分直观的能够看到实在用户的体验的数据，不过因为设施兼容性问题，目前仅在 Android 8 及其以上零碎，pc 上 Chrome 浏览器等反对，如果应用 webvitals 的 js 库，如果不反对，也不会有影响，库自身不会报错，也不会给你回调。在现有的安卓和 iOS 的市场占有率来看，如果我的项目中集成 LCP 指标统计，能够看到大略 50% 用户的体验数据，还是有集成的必要。

https://web.dev/lcp/

关于web:页面加载性能之LCP

什么是 LCP

一个好的 LCP 得分是多少？

如何确定元素类型？

如何确定元素的大小？

LCP 什么时候上报？

加载工夫 vs 渲染工夫

元素的布局和尺寸的变动如何捕捉？

示例

如何测量 LCP？

如果最大元素并非次要内容怎么办？

如何改善 LCP？

总结

参考