最大内容绘制时间 Largest Contentful Paint (LCP)

发布日期：2021-07-09

今天鸽介绍一个非常天才的概念LCP。这个老CP。而是大CP。而且是最大的。

最大内容绘制的时间(LCP)绝对是一个重要的、以用户为中心的度量指标，用于测量用户真实感知负载速度。因为它标记了页面加载时间轴上的一个里程碑，此时页面的主要内容很有可能已经加载完成了。优秀的LCP有助于让用户确信页面是有用的。

以前，衡量网页主要内容的加载速度和对用户可见的速度一直是网页开发者面临的一个挑战。像onLoad或DOMContentLoaded这样的老指标并不好，因为它们不一定对应于用户在屏幕上看到的内容。而像First Contentful Paint (FCP)等现代的、以用户为中心的性能指标只能捕捉加载体验的最开始。如果一个页面显示一个闪屏或显示一个加载指示器，那么这个时刻对用户来说就就没有什么实际意义。

在过去，我们推荐像FMP和SI这样的性能指标来帮助我们在开始绘制后跟踪加载时的用户体验。但这些指标都很复杂，很难解释。更离谱的是，由于经常掉链子，它们有时不能正确识别页面的主要内容已经加载。越简单的概念往往越好。根据谷歌的讨论和研究，我们发现一个更准确的方法来衡量页面的主要内容何时被加载，就是查看最大的页面元素何时被呈现。

 

什么是 LCP? 

页面首次开始加载之后，页面视图中的最大的图片和文字块的呈现时间

 

什么是一个优秀的LCP? 

为了提供良好的用户体验，网站应该努力让LCP保持在2.5秒或更少。因为手机上的加载速度比较慢，为了保险，其实最好将其在PC上的值控制在2秒以内。起飞页和虎翼基本上能将其控制在0.3秒以内。

 

LCP会考虑哪些内容元素呢?

主要是文本和图片，或者有图片和渐变色背景的大块区域，例如:
  • img
  • 在SVG中的image
  • video(需要带封面）
  • 通过url()函数加载背景图像的DIV，或者使用了CSS渐变色的DIV
  • 包含文本节点或其他内联级文本元素的块

您也许会说还有其它的页面元素也有可能包含主要内容呢。Google公司的研究人员为了保持LCP概念的简单，所以目前仅包含这些元素。

 

如何判断是最大的呢?

报告为最大内容绘制元素的大小通常是用户在视口中可见的大小。如果元素扩展到视口之外，或者任何元素被裁剪或有不可见的溢出，这些部分不计入元素的大小。对于从固有尺寸调整大小的图像元素，报告的尺寸可以是可见尺寸，也可以是固有尺寸，以较小的为准。例如，缩小到比其固有尺寸小得多的图像将只报告其显示的尺寸，而拉伸或扩大到较大尺寸的图像将只报告其固有尺寸。对于文本元素，只考虑其文本节点的大小(包含所有文本节点的最小矩形)。对于所有的元素，通过CSS应用的任何边距、填充或边框都不会被考虑。
 
确定哪些文本节点属于哪些元素有时可能很棘手，特别是对于子元素包括内联元素和纯文本节点，但也包括块级元素的元素。关键在于，每个文本节点都属于(且仅属于)其最近的块级上级元素。
 

何时会认为可以计算LCP（会不会有更大的家伙出现）?

Web页面通常是分阶段加载的，因此，页面上最大的元素可能会发生变化。为了处理这种可能发生的变化，浏览器在绘制第一帧后立即分派一个PerformanceEntry，类型为“最大内容绘制”，标识最大的内容元素。但是，在呈现后续帧之后，每当最大的内容元素发生变化时，它就会发送另一个PerformanceEntry。例如，在一个带有文本和英雄图像的页面上，浏览器最初可能只渲染文本，此时浏览器将发送一个内容最丰富的paint条目，其元素属性可能引用a，p或h1。之后，一旦英雄图像完成加载，第二个最大的PerformanceEntry将被分派，其元素属性将引用img。
 
需要注意的是，一个元素只有在呈现并对用户可见后才能被认为是最大的内容元素。尚未加载的图像不被认为是“渲染”。文本节点在字体块期间也不使用web字体。在这种情况下，较小的元素可能被报告为最大的有内容的元素，但是一旦较大的元素完成呈现，它将通过另一个PerformanceEntry对象被报告。除了延迟加载图像和字体外，当有新内容可用时，页面还可以向DOM添加新元素。如果这些新元素中的任何一个大于前一个最大的内容元素，则还将报告一个新的PerformanceEntry。如果当前最大的内容元素被从视口中移除(甚至从DOM中移除)，它将保持最大的内容元素，除非呈现更大的元素。
 
在Chrome 88之前，被删除的元素并不被认为是最大内容的元素，删除当前的候选元素将触发一个新的LCP PerformanceEntry被分派。然而，由于流行的UI组件(如图像幻灯片)经常删除DOM元素，该指标被更新以更准确地反映用户体验。
 
一旦用户与页面进行交互(通过点击、滚动或按键)，浏览器就会停止报告新条目，因为用户交互经常会改变用户可见的内容(滚动时尤其如此)。出于分析目的，应该只分析最近分派的PerformanceEntry。
 

如何处理元素布局和大小的变化?

为了降低计算和分配新的性能条目的性能开销，改变元素的大小或位置不会产生新的LCP候选项。只考虑元素在视口中的初始大小和位置。这意味着最初在屏幕外渲染然后在屏幕上转换的图像可能不会被报告。这也意味着元素最初呈现在视图中，然后被下推到视图之外，仍然会报告他们的初始视图中的大小。以下是一些在一些流行的网站上出现最大内容的例子:
 
 
在上面的两个例子中，最大的元素随着内容加载而变化。在第一个例子中，不断有新的内容被添加到DOM中，这就改变了哪个元素是最大的。在第二个例子中，布局变化和以前最大的内容从视口中被删除。通常情况下，延迟加载的内容比页面上已经存在的内容更大。
 
但情况并非一直如此，接下来的两个例子显示了在页面完全加载之前出现的最大内容绘制。
 
 
在第一个例子中，Instagram的logo加载相对较早，即使其他内容逐步显示，它仍然是最大的元素。在谷歌搜索结果页面的例子中，最大的元素是在任何图像或logo加载完成之前显示的一段文本。因为所有单独的图像都比这个段落小，所以在整个加载过程中，它仍然是最大的元素。在Instagram时间轴的第一帧中，你可能会注意到相机的logo周围没有一个绿色的方框。那是因为它是svg元素。svg元素目前不被认为是LCP的候选元素。第一个LCP候选是第二帧中的文本。
 

如何改进LCP？

针对性的改进LCP的方法其实很简单，就是尽快的把最大的内容区域显示在视图中然后保持不动。更重要的是，其它通用的性能改进方法也能够提高LCP。例如：改进网速，升级服务器硬件，改进CSS和JS。这里就不一一展开了。鸽感觉，LCP的度量意义远超于概念本身。没有特别需要对LCP本身进行改进。
 
 
 
上一篇没有了
首次输入延迟 First Input Delay (FID)下一篇
下一篇首次输入延迟 First Input Delay (FID)