前端优化-LCP

什么是LCP

LCP是最大内容绘制的简称。LCP是用来测量感知加载速度。感知加载速度是以用户为中心的重要指标。因为该项指标会在页面的主要内容基本加载完成时，在页面加载时间轴中标记出相应的点，迅捷的LCP有助于让用户确信页面时有效的。以前的指标测量比如load(加载)或者DOMContentLoad(DOM内容加载完毕)并不是很好，因为这些指标并不一定与用户看到的内容相对应。而向First Contentful Paint 首次内容的绘制(FCP)这类以用户为中心的新指标只会捕获加载最开始的部分。如果某个页面显示时一段启动动画或者加载之时，那么这些时刻与用户的关联性并不大。First Meaningful Paint 首次有效绘制（FMP）和Speed Index速度指数（SI），这些指标能够捕获到更多初始后的加载速度，但是这些指标复杂，难以理解，而且容易出错。
LCP指标会根据页面首次开始加载的时间点来报告可视区域可见的最大图像或者文本完成渲染的相对时间.良好的LCP的时间时2.5，较差的值为4.0s.最大内容的绘制考量的元素类型为

• img元素
• 内嵌套在svg元素内的image元素
• video 元素（使用封面图像）
• 通过url函数加载的背景图片的元素
• 包含文本节点或者其他行内级文本元素的子元素的块级元素

如何确定一个元素的大小

报告给最大内容绘制的元素大小通常时用户在可视区域可见的大小，如果元素延伸到可视区域之外，或者任何元素被剪裁或者包含不可见的溢出，那么这部分不计入元素的带线啊哦。对于在原始尺寸之上经过调整的图像元素，报告给指标的元素大小为可见尺寸或者原始尺寸。

何时报告最大内容绘制

网页通常时分阶段加载的，因此，页面上最大元素也可能会发生变化。为了应对这种潜在的变化，浏览器会绘制第一帧立即发送一个largest-contentful-paint类型的PerformanceEntry，用于识别最大内容元素，但是，在渲染后续帧之后，浏览器会在最大内容元素发生变化时候分发另一个PerfornacneFanceEntry。需要主要的是，一个元素只能在渲染完成并且对用户可见之后才视为最大元素，尚未加载点额元素不能视为渲染完成。在字体阻塞期使用网页字体的文本节点也是这样。在这种情况下，较小的元素可能会被报告称最大元素，但一旦更大的元素完成渲染，就会通过另外一个PerformanceEntry对象进行报告

如何处理元素布局和元素大小的更改

为了使计算和分发新性能条目的性能开销保持在较低的水平，对元素大小或者位置的更改不会生成新的LCP候选对象，只有元素在可视区域的初始化大小和位置会纳入考量范围。也就是说，最初在屏幕外完成渲染，然后过滤到屏幕上的图像可能不会得到报告，这也意味着最初可视区域内进行渲染，然后被推出到可视区域外的元素人讲报告其在可视区域的初始化大小

如何改进LCP

LCP主要受四个因素影响

• 缓慢的服务器响应速度
• Javascript和css渲染阻塞
• 资源加载速度
• 客户端渲染

名词解是

• FCP 最大内容的渲染时间
• FMP 主要内容的渲染时间
• SI 屏幕可视之后的渲染速度