【译】我们对 2023 年核心页面指标的建议

　　原文地址：https://web.dev/top-cwv-2023，在正文开始前，推荐一款前端监控脚本：shin-monitor，它能监控前端的错误、通信、打印等行为，以及计算各类性能参数，包括 FMP、LCP、FP 等。

　　我们 Google 希望我们的性能建议侧重于：

  • 对现实世界产生最大影响的建议
  • 与大多数网站相关且适用的建议
  • 大多数开发人员可以实施的建议

　　在过去的一年里，我们花了很多时间来审核我们提出的全套性能建议，并根据上述三个标准对每一个建议进行评估（定性和定量）。

　　这篇文章概述了我们为提高每个核心页面指标（Core Web Vitals）的性能而提出的首要建议。

一、LCP

　　第一组建议是针对最大内容在可视区域内变得可见的时间（LCP)，它是负载性能的衡量标准。

　　当今网络上所有站点中的 LCP 只有大约一半达到建议的阈值——所以让我们从这里开始。

1）确保可以从 HTML 源中发现 LCP 资源

　　根据 HTTP Archive 的 2022 Web Almanac，72% 的移动页面将图像作为 LCP 元素，这意味着对于大多数网站来说，要优化 LCP，需要确保这些图像可以快速加载。

　　许多开发人员可能不太清楚的是，加载图像所需的时间只是挑战的一部分，另一个关键部分是图像开始加载之前的时间。

　　事实上，在 LCP 元素是图像的页面中，39% 的图像具有无法从 HTML 文档源中发现的源 URL。

　　换句话说，这些 URL 在标准 HTML 属性（例如 或 ）中找不到，而这些属性可以让浏览器迅速发现它们并立即开始加载。

　　如果页面需要等待 CSS 或 JavaScript 文件完全下载、解析和处理，然后图像才能开始加载，那么可能已经太晚了。

　　作为一般规则，如果您的 LCP 元素是图像，则图像的 URL 应该始终可以从 HTML 源中找到。 使之成为可能的一些技巧是：

  • 使用具有 src 或 srcset 属性的 元素加载图像。
    • 不要使用需要 JavaScript 才能呈现的非标准属性，如 data-src，因为那样总是会更慢。 9% 的页面在 data-src 后面遮盖了他们的 LCP 图像。
  • 首选服务端呈现 (SSR) 而不是客户端呈现 (CSR)。
    • 因为 SSR 意味着完整的页面元素（包括图像）存在于 HTML 源代码中。 CSR 解决方案要求在图像被发现之前运行 JavaScript。
  • 如果你的图片需要从外部 CSS 或 JS 文件中引用，你仍然可以通过 标签将其包含在 HTML 源代码中。
    • 请注意，浏览器的预加载扫描器无法发现内联样式引用的图像，因此即使在 HTML 源中找到它们，在加载其他资源时仍可能会阻止对它们的发现，因此预加载在这些情况下会有所帮助。

 　　为了帮助你了解 LCP 图像是否存在可发现性问题，Lighthouse 将在 10.0 版（预计 2023 年 1 月）中发布新的审查器。

　　 确保可以从 HTML 源中发现 LCP 资源可以带来可衡量的改进，并且还可以解锁额外的机会来确定资源的优先级，这是我们的下一个建议。

2）确保优先加载 LCP 资源

　　确保可以从 HTML 源中发现 LCP 资源是确保 LCP 资源可以及早开始加载的关键的第一步，但另一个重要步骤是确保优先加载该资源并且不会排在一堆不太重要的资源后面。

　　例如，即使 LCP 图像出现在 的标准属性中，但是在它之前有一堆