采用跨网站预提取的方式来加快 LCP 速度

介绍现成的技术。

Kenji Baheux
Kenji Baheux
Michael Buettner
Michael Buettner
Devin Mullins
Devin Mullins

为什么网页加载速度很重要?

通常,大多数用户认为网页加载速度缓慢是主要原因之一(Google 开展的一项用户研究显示,此比例为 54%)。因此,网页加载速度越快会给业务带来更好的效果,就不足为奇了。事实上,如果访问者在与网站互动之前就感到失望,那么他们不太可能会停留足够长的时间来欣赏网站的价值。事实上,Google 对 254 个电子商务、金融和旅游网站进行的另一项研究显示,在 2 秒内加载完毕的网站的转化率可提高 15%。

加快 Largest Contentful Paint (LCP)

有一种说法,不衡量也就无从改进。对于网站上的用户体验,我们认为核心网页指标是一组以用户为中心的可靠指标,旨在捕获用户体验的基本要素。特别需要指出的是,Largest Contentful Paint (LCP) 会报告向用户显示最大文本或图片块所需的时间,以此衡量网页的加载性能。为了提供良好的用户体验,LCP 应在网页首次开始加载后的 2.5 秒内发生(即良好的 LCP 阈值)。

我们来看一下典型网页的 LCP 影响因素。

网页加载瀑布流。
加载网页所需的典型广告瀑布流

当用户访问某个网页时,浏览器会向服务器请求 HTML。服务器通过 HTML 进行响应,从而为浏览器提供更多有关接下来要提取的内容(包括 CSS、JavaScript、字体和图片)的提示。随着这些响应返回,浏览器还必须执行一些工作来对其进行评估,并最终在网页上布置和绘制组件。但大部分时间花在等待这些数据包从设备传输到服务器,然后再传回设备。事实上,我们的数据(Android 版 Chrome;中间值)表明,大约 40% 的用户可见延迟时间通常是由浏览器用来等待从服务器返回第一个字节

预提取的强大功能

如果可以预提取所有这些文件(即在用户访问网页之前提取),这将大幅提升速度,只留下少数任务(在显示网页之前):评估、计算布局和绘制。

流线型瀑布。
预加载所有资源后,广告瀑布流会完美地简化。

考虑到之前共享的数据,用户还可以仅预提取主要资源,仍然能够显著加快页面加载速度。在同一网站的情况下,这种技术可通过基元(例如 rel=prefetch)轻松使用。但是,对于跨网站情景,情况并非如此简单。

跨网站导航

尽管预提取已经存在一段时间了,但在用户访问另一个网站时,从一个网站预提取网页时应考虑额外的因素。

假设引荐网站要指示浏览器从其他网站预提取网页。显然,当用户点击指向此预提取网页的链接时,他们将享受到更快的网页加载速度,从而获得更好的用户体验。但是,如果用户从不点击此链接,该怎么办?在引荐网站上浏览某个主题时,他们不会知道自己在关联的网站上可能对某个主题感兴趣。然而,这存在很大的风险,因为预提取请求会像任何其他常规请求一样携带用户的 IP 地址和 Cookie(如果有)。

解决方案

为了实现注重隐私保护的跨网站预提取,我们在过去 3 年中开发了两种解决方案:专用预提取代理Signed Exchange (SXG)。我们还开展了一项大规模实验,确认跨源预提取可以显著提升速度。具体而言,当我们查看 Google 能够安全地预提取主 HTML 以供用户下次导航时的情况时,我们发现 LCP 为“良好”的网页加载比例增加了 14 个百分点!

主要注意事项

虽然专用预提取代理和 Signed Exchange 适用于相同的使用情形,但这两种技术之间存在不同的权衡。因此,最佳选择实际上取决于您网站的具体需求。为帮助您了解所涉及的利弊,以下各部分将介绍启用跨网站预提取以及在两种可用技术之间进行选择时需考虑的两大注意事项。您还可以参阅针对每项技术的深入文章,了解更多详细信息。

回访者

为首次访问您网站的用户轻松启用跨网站预提取。对于回访者而言,这取决于您网站上的个性化程度。这是因为出于隐私保护方面的原因,跨网站预提取请求不能包含 Cookie。

  • 对于初访者,此限制不会带来任何挑战,因为这些访问者一开始没有 Cookie。因此,您无需对您的网站进行任何更改,即可为这些用户启用跨网站预提取。
  • 如果您想为回访者启用跨网站预提取功能,并且您的网站是基于 Cookie 的个性化内容,那么您需要在用户浏览网页后延迟加载这些个性化元素。这种方法之所以有效,是因为在导航时,不再需要对 Cookie 的限制,因为用户已明确选择访问您的网站。因此,在导航时,您的网站可以照常访问其 Cookie。如需具体指南,请参阅这些延迟加载最佳实践
    • 如果您目前是将个性化设置直接编码到 HTML 中,您仍可以在有 Cookie 时继续这样做,并将延迟加载用作预提取网页的后备策略。
    • 如果您的网站并非基于 Cookie 进行个性化设置,或者个性化不太重要,那么您可以选择向回访者和初访者展示相同的内容。

目前,专用预提取代理仅面向初访者(没有 Cookie 的链接)启用,我们仍在不断努力将覆盖范围扩大到回访者(使用 Cookie 的链接)。另一方面,Signed Exchange 已经支持对首次访问者和回访者进行跨网站预提取(采用上述方法)。

通过预提取提供额外数据

启用跨网站预提取可能会导致额外提供数据。事实上,如果引荐网址预提取了您的网页,但用户没有点击链接,那么就会为您带来额外的流量。

  • 为了缓解这一问题,您可以要求引荐来源网址在处理预提取请求时降低要求。同样,引荐来源网址或浏览器可以通过关注相对轻量但至关重要的资源(例如,主要资源、关键 CSS 或 JavaScript 子资源)来缓解这种情况。这本质上是在速度优势与额外流量之间的权衡取舍。
  • 或者,您可以通过选择启用额外的缓存来减少此类流量(如需了解详情,请参阅关于 Signed Exchange 的这一部分)。这样做的缺点是,缓存内容的时间过长可能会导致向用户显示旧信息。这本质上是在额外数据传送与内容新鲜度之间进行权衡取舍。

为了在这一方面做出最佳决定,请问问自己,您的网站处于最高时效性与最低额外请求之间浮动的比例。这个问题的解答最终取决于您的企业和用户的具体需求。

使用入门

这些技术已集成到 Google 搜索中,因此网站可以立即开始改进其 LCP。我们希望这样也能鼓励其他热门引荐者效仿,从而全面提升网络速度!

虽然这两种技术都适用于同一应用场景,但针对上文所述的关键考虑因素做出了不同的权衡。您甚至可以决定从一种技术开始,然后随着需求或对优势的欣赏不断演变逐步升级为另一种技术。请参阅以下深入研究,了解哪种技术最适合您的特定情况: