订阅以接收新文章的通知:

Cloudflare Pages 集成 Early Hints 以进一步提速

2022/10/07

7 分钟(阅读时间)
Cloudflare Pages gets even faster with Early Hints

去年,我们展示了 Pages 在全球各地的一流性能,诠释了所谓“快如闪电”的含义。今天,怀着激动的心情,我们宣布推出一项集成,以进一步增强对速度的承诺: Pages 对 Early Hints 的支持。Early Hints 允许您在任何交付缓慢的 HTML 页面之前解除页面关键资源的加载。Early Hints 可以通过显著减少关键性能指标——例如最大内容绘制(LCP)——来改善访问者的加载体验。

什么是 Early Hints?

Early Hints是互联网的一项新功能,Chrome 从 103 版就开始支持,并由 Cloudflare 向使用我们网络的网站普遍提供。 Early Hints 取代 Server Push,用于向浏览器发送有关页面关键资源的“提示”(例如字体、CSS 和折叠线以上的图像)。浏览器可以在等待完整的 HTML 响应之前立即开始加载这些资源,从而利用了以前浪费的时间。使用 Early Hints 之前,浏览器收到响应的第一个字节之前,不能启动任何工作。现在,浏览器可以在之前等待的时间内进行有效的工作。Early Hints 可以给你的网站带来显著的性能改善,特别是对于 LCP 这样的指标。

Early Hints 如何工作

Cloudflare 缓存 200 OK 响应发送的任何 preloadpreconnect 类型  Link 标头,并将其作为 103 Early Hints 响应针对任何后续请求提前发送。

实际使用中,一个 HTTP 对话现在看起来如下:

请求

GET /
Host: example.com

Early Hints 响应

103 Early Hints
Link: </styles.css>; rel=preload; as=style

响应

200 OK
Content-Type: text/html; charset=utf-8
Link: </styles.css>; rel=preload; as=style

<html>
<!-- ... -->
</html>

Cloudflare Pages 上的 Early Hints

托管在 Cloudflare Pages 上的网站尤其可以从 Early Hints 受益。如果您在使用 Pages Functions 来生成动态服务器端渲染(SSR)页面,那么 Early Hints 很有可能显著提升您的网站性能。

性能测试

我们创建了一个简单的演示电子商务网站,以评估 Early Hints 的性能。

A screenshot of the landing page of a demo Cloudflare e-commerce website selling a t-shirt, cap and keycap. Each item is branded with the Cloudflare logo, and has a price and "stock remaining" number.

这个登陆页面上有每个物品的价格,以及剩余库存计数器。页面本身只是人工编写的 HTML 和 CSS,但这些价格和库存数字是通过 Pages Functions 实时填充到模板的。为了模拟从外部数据源( 可能由 KVDurable ObjectsD1 或甚至 Shopify 这样的 API 支持),我们在这个数据得到解析前增加一个固定的延迟。我们在响应中包含了到某些关键资源的 preload 链接:

  • 一个外部 CSS 样式表,
  • T 恤的图像,
  • 帽子图像,
  • 以及键帽图像。

第一个请求就像您所期望的那样形成了一个瀑布。在我们解析定价和库存数据时,第一个请求被阻塞了相当长的一段时间。一旦加载,浏览器就会解析 HTML,提取外部资源,并对其内容发出后续请求。CSS 和图像的尺寸和质量较大,显著延长了加载时间。最大内容绘制(LCP)发生在 T 恤图像加载时,一旦所有请求得到满足,文档就完成加载。

A network diagnostics waterfall for the page without Early Hints, as described above.

后续请求就是引人注目之处了。这些 preload 链接缓存在 Cloudflare 的全球网络上,并在文档加载前通过 103 Early Hints 响应发送。现在,瀑布看起来明显不同了。最初的请求是一样的,但是现在,针对 CSS 和图像的请求会往左边大幅偏移,因为 103 响应一发出就可以启动这些请求。浏览器在等待原始请求完成服务器端渲染时开始获取这些资源。LCP 再次发生在 T 恤图像加载后,但这次它被提前了 530ms,因为它的加载加快了 752ms,文档完全加载加快了 562ms,也是因为外部资源能全部更快开始加载。

A network diagnostics waterfall with Early Hints, as described above.

最后的四个请求(黄色突出显示)作为 304 Not Modified 响应返回,使用 If-None-Match 标头。默认情况下,Cloudflare Pages 要求浏览器确认所有资源都是最新的,如果出现一种罕见的情况,即这些资源在 Early Hints 响应和被使用之间被更新,浏览器会检查它们是否已被更改。鉴于它们没有被改变,没有内容正文需要下载,响应很快就完成了。要避免这种情况,可使用 一个_headers 文件在这些资源上设置一个自定义 Cache-Control 标头。例如,可以通过类似如下的规则将这些图像缓存一分钟:

# _headers

/*.png
  Cache-Control: max-age=60

我们可以通过探索 Cloudflare 提供的其他功能来开展进一步的性能审计,例如自动 CSS 最小化Cloudflare ImagesImage Resizing

我们已经从世界最快的网络之一支持 Cloudflare Pages —— Early Hints 只不过允许开发人员更充分地利用我们的全球网络。

使用 Early Hints 和 Cloudflare Pages

Cloudflare 的 Early Hints 目前仅限于缓存网页响应中的 Link 标头。通常,这意味着 Cloudflare Pages 用户要么使用 _headers 文件,要么使用 Pages Functions 来应用标头。然而, 为方便起见,我们也增加了将正文中的任何 <link> HTML 元素转换为 Link 标头的支持。这允许您从引用这些资源的相同文档中直接控制将发送的 Early Hints,无需离开 HTML 即可利用 Early Hints。

例如,对于如下 HTML 文件,将产生一个 Early Hints 响应:

HTML 文档

<!DOCTYPE html>
<html>
  <head>
    <link rel="preload" as="style" href="/styles.css" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Early Hints 响应

103 Early Hints
Link: </styles.css>; rel=preload; as=style

如上所述,Link 也可使用一个 _headers 文件设定:

# _headers

/
  Link: </styles.css>; rel=preload; as=style

Early Hints(及自动 HTML <link> 解析)已经为所有  pages.dev 域自动启用。如果您在 Pages 项目中配置了任何自定义域,请确保在 Cloudflare 仪表板的 “速度” 选项卡下启用该域的 Early Hints。有关更多信息,请参见我们的文档

此外,在未来,我们希望能够支持 Smart Early Hints 功能。 Smart Early Hints 将使 Cloudflare 能自动生成 Early Hints,即使不存在 Link 标头或 <link> 元素。做法是对网站流量进行分析,推断哪些资源对给定页面重要。我们不久后将分享有关 Smart Early Hints 的更多信息。

与此同时,欢迎立刻试用 Pages 上的 Early Hints 功能。并在我们的 Discord 服务器上告诉我们您的加载性能得到多大提升吧。

在 Cloudflare TV 上观看

我们保护整个企业网络,帮助客户高效构建互联网规模的应用程序,加速任何网站或互联网应用程序抵御 DDoS 攻击,防止黑客入侵,并能协助您实现 Zero Trust 的过程

从任何设备访问 1.1.1.1,以开始使用我们的免费应用程序,帮助您更快、更安全地访问互联网。要进一步了解我们帮助构建更美好互联网的使命,请从这里开始。如果您正在寻找新的职业方向,请查看我们的空缺职位
Early Hints (CN)Cloudflare Pages (CN)Speed & Reliability (CN)Product News (CN)简体中文

在 X 上关注

Greg Brimble|@GregBrimble
Cloudflare|@cloudflare

相关帖子