跳转到内容
搜索文档

Early Hints

最后更新 查看 MarkdownAgent 设置

Early Hints 帮助浏览器更快地加载网页。Early Hints 在所有 pages.dev 域名和自定义域名上自动启用。

Early Hints 会自动缓存任何 preloadpreconnect 类型的 Link 标头,作为 Early Hints 发送给浏览器。这些提示在完整响应准备完成之前发送给浏览器,浏览器可以据此更快地加载网页。在 Pages 中有两种创建这些 Link 标头的方式:

配置 Early Hints

可以使用以下两种方法之一创建 Early Hints。

1. 配置 _headers 文件

使用 _headers 文件 创建自定义标头。如果在网站的 /blog/ 部分包含特定样式表,可以创建以下规则:

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

Pages 将附加此 Link: </styles.css>; rel=preload; as=style 标头。缓存后,Early Hints 将作为 Early Hint 发出此标头。

为简化编写体验,Pages 还会从具有以下属性的任何 <link> HTML 元素自动生成 Link 标头:

  • href
  • as(可选)
  • relpreconnectpreloadmodulepreload 之一)

包含任何其他附加属性(例如 fetchprioritycrossorigindata-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

这篇文档对您有帮助吗?