网站性能优化：如何获得良好的 LCP 分数？

terry 2年前 (2023-09-26) 阅读数 70 #网站优化

最大内容绘制 (LCP) 指标表示可视区域中最大图像或文本块完成渲染所需的相对时间（基于页面首次加载的时间）。

良好的 LCP 分数意味着什么？

为了保证良好的用户体验，网站应将最大内容显示时间控制在2.5秒或更短。为了确保大多数用户在访问期间达到建议的目标，一个好的测量阈值是页面加载的第 75 个百分位数，并且该阈值适用于移动和桌面设备。

我们考虑哪些因素？

根据当前最大内容绘制 API，最大内容绘制考虑的元素类型为：

元素
嵌套 ❝❝ 元素元素图像>元素
元素（使用封面图像）
已加载壁纸元素是一个级元素，它是一个文本块级元素内联级文本元素子元素。

请注意，为了在初始阶段保持简单，我们特意将商品限制为这几种有限类型。随着研究的进展，将来可能会添加其他元素（例如，、）。

如何确定元素的大小？

为最大内容绘制报告的元素大小通常是用户在可见区域中可见的大小。如果存在超出可见区域的元素，或者任何元素被截断或存在不可见溢出，则这些部分不会计入元素大小。

对于调整到原始大小以上的图像元素，向指示器报告的元素大小是可见大小或原始大小，具体取决于哪个较小。例如，远小于原始尺寸的缩放图像仅代表图像的显示尺寸，而拉伸或放大的图像仅代表图像的原始尺寸。

对于文本元素，指标仅考虑其文本节点的大小（包含所有文本节点的最小矩形）。

对于所有元素，不考虑通过 CSS 设置的边距、填充或边框。确定哪些文本节点属于哪些元素有时可能很棘手，特别是对于同时包含内联元素和纯文本节点的子元素，以及属于块级元素的元素。要点是每个文本节点都属于（并且仅属于）其最近的块级祖先。规范地解释：每个文本节点都属于创建容器块的元素。

我们什么时候报告最大内容抽取？

网页通常是分阶段加载的，因此即使页面的最大元素也可能会发生变化。

为了处理可能的更改，浏览器会发送一个 绘制，其最大内容 类型为 PerformanceEntry，从中直接识别第一帧。内容元素。但是，在渲染后续帧后，当最大内容元素发生更改时，浏览器会发送另一个 PerformanceEntry。

例如，在包含文本和标题图像的网页上，浏览器首先仅显示文本部分，同时发送具有最大内容♼元素的绘画，其 属性通常被引用为

或。然后，在加载第一个图像后，浏览器会发送第二个最高内容绘制条目，其元素属性为♷ im。
需要注意的是，在元素被渲染并且对用户可见之前，它不会被视为最大内容元素。尚未加载的图像不被视为“渲染”。这同样适用于在字体屏蔽期间使用网页字体的文本节点。在这种情况下，较小的元素可以报告为最大的内容元素，但是一旦较大的元素完成渲染，就会通过另一个 PerformanceEntry 对象进行报告。
除了图像和字体的延迟加载之外，页面还可以在新内容可用时向 DOM 添加新元素。如果任何新元素大于先前最大的内容元素，浏览器还会报告新的 PerformanceEntry。
如果当前最大的内容元素从可见区域（甚至从 DOM）中删除，它仍然是最大的内容元素，除非更大的元素完成渲染。在 Chrome 88 之前，删除的项目不算是最大的内容项目，删除当前候选项目会在浏览器中启动一个新的 toppaint 条目。然而，该指标已针对流行的 UI 模式（例如图像轮播）进行了更新，这些模式通常会删除 DOM 元素以更准确地反映用户体验。有关更多详细信息，请参阅变更日志。
当用户与页面交互（通过点击、滚动或按下按钮）时，浏览器会立即停止报告新帖子，因为用户交互通常会更改用户可见的内容（尤其是在滚动时）。
出于分析目的，仅向分析服务报告最新分发的 PerformanceEntry 报告。
注意由于用户可能会在后台打开页面，而用户聚焦在选项卡上的时间可能比页面首次加载时要晚很多，因此用户可能会聚焦在选项卡。未绘制最大内容。
加载时间 vs.渲染时间
出于安全原因，对于缺少 Timing-Allow-Origin 的跨域图像，不会显示图像渲染时间戳，而是仅显示图像加载时间（因为加载时间已在通过 ) 可以看到许多其他 Web API。
下面的用法示例展示了如何处理渲染时不可用的元素。但是，我们始终建议尽可能设置 Timing-Allow-Origin 标头，以使指针更加准确。
我们如何处理元素布局和大小的更改？
为了保持新性能条目的计算和分发成本较低，改变元素的大小或位置将不会生成新的LCP候选。仅考虑可见区域内元素的初始大小和位置。
也就是说，最初在屏幕外完成然后切换到屏幕上的图像可能不会被报告。这也意味着最初显示在可见区域内然后被推出可见区域的元素仍将在可见区域内具有其初始大小。
示例
以下示例显示了一些热门网站上出现最大内容拖累的点：
在上面的两个时间轴中，最大的元素随着内容加载而变化。在第一个示例中，新内容被添加到 DOM 中，因此最大的元素发生了变化。在第二个例子中，由于布局的修改，之前最大的内容被从可见区域中移除了。
虽然延迟加载的内容通常比页面上的内容大，但情况并非一定如此。以下两个示例显示了页面完全加载之前发生的最大内容渲染。
在第一个示例中，Instagram 徽标加载相对较早，尽管其他内容较晚到达，但徽标始终是最大的元素。在 Google 搜索结果页面示例中，最大的元素是在任何图像或徽标加载完成之前出现的一段文本。由于每个图像都小于该文本，因此该文本在加载过程中仍然是最大的元素。在 Instagram 时间线的第一帧中，您可能已经注意到相机徽标没有被绿色框包围。这是因为该标志是元素，并且元素当前不被视为 LCP 候选元素。第一个 LCP 候选是第二帧的文本。