去年，我们展示了 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 对话现在看起来如下：
请求
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 的性能。
这个登陆页面上有每个物品的价格，以及剩余库存计数器。页面本身只是人工编写的 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 标头。例如，可以通过类似如下的规则将这些图像缓存一分钟：
# _headers
/*.png
Cache-Control: max-age=60
我们可以通过探索 Cloudflare 提供的其他功能来开展进一步的性能审计，例如自动 CSS 最小化、Cloudflare Images 和 Image 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 服务器上告诉我们您的加载性能得到多大提升吧。