去年,我们展示了 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 响应发送的任何 preload
和 preconnect
类型 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 实时填充到模板的。为了模拟从外部数据源( 可能由 KV、 Durable Objects、 D1 或甚至 Shopify 这样的 API 支持),我们在这个数据得到解析前增加一个固定的延迟。我们在响应中包含了到某些关键资源的 preload
链接:
一个外部 CSS 样式表,
T 恤的图像,
帽子图像,
以及键帽图像。
第一个请求就像您所期望的那样形成了一个瀑布。在我们解析定价和库存数据时,第一个请求被阻塞了相当长的一段时间。一旦加载,浏览器就会解析 HTML,提取外部资源,并对其内容发出后续请求。CSS 和图像的尺寸和质量较大,显著延长了加载时间。最大内容绘制(LCP)发生在 T 恤图像加载时,一旦所有请求得到满足,文档就完成加载。
后续请求就是引人注目之处了。这些 preload 链接缓存在 Cloudflare 的全球网络上,并在文档加载前通过 103 Early Hints 响应发送。现在,瀑布看起来明显不同了。最初的请求是一样的,但是现在,针对 CSS 和图像的请求会往左边大幅偏移,因为 103 响应一发出就可以启动这些请求。浏览器在等待原始请求完成服务器端渲染时开始获取这些资源。LCP 再次发生在 T 恤图像加载后,但这次它被提前了 530ms,因为它的加载加快了 752ms,文档完全加载加快了 562ms,也是因为外部资源能全部更快开始加载。
最后的四个请求(黄色突出显示)作为 304 Not Modified 响应返回,使用 If-None-Match
标头。默认情况下,Cloudflare Pages 要求浏览器确认所有资源都是最新的,如果出现一种罕见的情况,即这些资源在 Early Hints 响应和被使用之间被更新,浏览器会检查它们是否已被更改。鉴于它们没有被改变,没有内容正文需要下载,响应很快就完成了。要避免这种情况,可使用 一个_headers
文件在这些资源上设置一个自定义 Cache-Control
标头。例如,可以通过类似如下的规则将这些图像缓存一分钟:
我们可以通过探索 Cloudflare 提供的其他功能来开展进一步的性能审计,例如自动 CSS 最小化、Cloudflare Images 和 Image 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 服务器上告诉我们您的加载性能得到多大提升吧。