Early Hints 帮助浏览器更快地加载网页。Early Hints 在所有 pages.dev 域名和自定义域名上自动启用。
Early Hints 会自动缓存任何 preload ↗ 和 preconnect ↗ 类型的 Link 标头 ↗,作为 Early Hints 发送给浏览器。这些提示在完整响应准备完成之前发送给浏览器,浏览器可以据此更快地加载网页。在 Pages 中有两种创建这些 Link 标头的方式:
可以使用以下两种方法之一创建 Early Hints。
使用 _headers 文件 创建自定义标头。如果在网站的 /blog/ 部分包含特定样式表,可以创建以下规则:
/blog/*
Link: </styles.css>; rel=preload; as=stylePages 将附加此 Link: </styles.css>; rel=preload; as=style 标头。缓存后,Early Hints 将作为 Early Hint 发出此标头。
为简化编写体验,Pages 还会从具有以下属性的任何 <link> HTML 元素自动生成 Link 标头:
hrefas(可选)rel(preconnect、preload或modulepreload之一)
包含任何其他附加属性(例如 fetchpriority、crossorigin 或 data-do-not-generate-a-link-header)的 <link> 元素不会用于生成 Link 标头,以防止意外丢失作为 Early Hint 丢弃的自定义优先级逻辑。
这样你可以直接在编写文档时创建 Early Hints,而无需在 HTML 和 _headers 文件之间切换。
<html>
<head>
<link rel="preload" href="/style.css" as="style" />
<link rel="stylesheet" href="/style.css" />
</head>
</html>通过将以下内容添加到 _headers 文件来移除任何自动生成的 Link 标头:
/*
! Link