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

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

2022-10-07

4 分钟阅读时间
这篇博文也有 EnglishFrançaisDeutschEspañol繁體中文版本。

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

Cloudflare Pages gets even faster with Early Hints

什么是 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 对话现在看起来如下:

请求

Early Hints 响应

GET /
Host: example.com

响应

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

Cloudflare Pages 上的 Early Hints

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

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

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

性能测试

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

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

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
  • 一个外部 CSS 样式表,

  • T 恤的图像,

  • 帽子图像,

  • 以及键帽图像。

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

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

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

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

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

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

# _headers

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

我们已经从世界最快的网络之一支持 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 文档

Early Hints 响应

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

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

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

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

# _headers

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

此外,在未来,我们希望能够支持 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 HintsCloudflare Pages速度和可靠性产品新闻

在 X 上关注

Greg Brimble|@GregBrimble
Cloudflare|@cloudflare

相关帖子

2024年10月24日 13:00

Durable Objects aren't just durable, they're fast: a 10x speedup for Cloudflare Queues

Learn how we built Cloudflare Queues using our own Developer Platform and how it evolved to a geographically-distributed, horizontally-scalable architecture built on Durable Objects. Our new architecture supports over 10x more throughput and over 3x lower latency compared to the previous version....

2024年10月09日 13:00

Improving platform resilience at Cloudflare through automation

We realized that we need a way to automatically heal our platform from an operations perspective, and designed and built a workflow orchestration platform to provide these self-healing capabilities across our global network. We explore how this has helped us to reduce the impact on our customers due to operational issues, and the rich variety of similar problems it has empowered us to solve....

2024年10月08日 13:00

Cloudflare acquires Kivera to add simple, preventive cloud security to Cloudflare One

The acquisition and integration of Kivera broadens the scope of Cloudflare’s SASE platform beyond just apps, incorporating increased cloud security through proactive configuration management of cloud services. ...