今天，我们很高兴地宣布我们正在借助 Cloudflare 网络的强大能力将 Early Hints 和Fetch Priorities自动化。大约一年前， 我们推出了 Early Hints。Early Hints 是一种方法，Web 服务器可以在准备完整响应的同时异步向浏览器发送指示。这将主动告知浏览器如何更快地为访问者加载网页，而不是被动地等待完整的网页响应。
在最初的实验室试验中，我们观察到页面加载速度改进了 30% 以上。自那时起，我们已经使用该产品，代表 150000 个网站发送了大约二万亿个提示。
为了在网站上有效使用 Early Hints，必须对 HTTP 链接标头或 HTML 链接元素进行配置，以指定应预先加载哪些资产，或应预先连接哪些第三方服务器。要作出这些决定，需要了解您的网站与浏览器的交互方式，并确定要提示的渲染阻塞资产，而无需实施占用网络带宽的优先级策略来处理非关键资源（即，不能简单地对所有资源都采用 Early Hint，并期望获得理想的效果）。
对于那些具备相关知识并能够在源站点（或通过Worker）配置 Early Hints 的用户而言，一切都可以顺利进行。然而，对于那些无法访问源服务器（例如 SaaS 平台），或不确定要预先加载/优先处理哪些最优资产，或者只是选择专注于构建其自己的应用程序的用户来说，则面临着问题：“作为中介服务器，Cloudflare 难道不应该知道对我的网站或性能进行优先级排序的最佳方法吗？”
答案是肯定的，这也是为什么我们开始热烈讨论 Smart Hints 如何确定具有最高优先级的 Web 资源，而无需开发人员进行任何配置的原因。如果您有兴趣帮助我们测试此功能，可以在此处注册，我们将在今年晚些时候与您联系，并提供有关如何帮助我们测试 Smart Hints 的更多说明。
背景
当访问网页时，浏览器实际上会向服务器请求大量独立资源。这些资源包括图像、文本和视频等可见元素，以及支持网站分析、功能等的幕后逻辑（JavaScript 等）。浏览器加载这些资源的顺序，在决定用户查看页面并与之交互的速度方面起着至关重要的作用。
当您的浏览器收到来自服务器的响应时，其会从开始到结束按顺序解析 HTML 响应。当 HTML 响应到达浏览器时，会被分成两个部分：<head> 和 <body>。
<head> 部分显示在 HTML 响应的开头，其中包含了诸如样式表、脚本和其他指令等基本元素，以供浏览器使用。样式表定义页面的外观，而脚本则提供交互式功能的必要逻辑。1
样式表对于浏览器的加载速度非常重要，因为浏览器会等待样式表加载完成后才能知晓如何向访问者显示内容。脚本则十分有趣，而脚本的有趣之处在于，其可以根据提供给浏览器的指示以不同的方式运行。如果脚本缺乏具体指示（例如 defer/async/inline），则可能成为“阻塞”资源。当浏览器遇到阻塞脚本资源时，它会暂停处理网页，并等待直到脚本已完全加载并完全执行。这确保脚本的功能可供访问者使用。然而，这种阻塞行为可能导致延迟向用户显示内容，因为浏览器需要等待脚本完成，才能继续进行下一步。
在浏览器到达文档的 <body> 部分之前，访问者看不到任何内容。这就是为什么尽可能优化 <head> 部分的加载过程至关重要。通过尽可能减少加载样式表和阻塞脚本所花费的时间，浏览器可以更快地渲染页面内容，让访问者可以更快看到网页并与之交互。
实现最佳 Web 性能是一个复杂的挑战。尽管浏览器通常负责确定加载构建网页所需不同资源的顺序，但最近发布了许多工具（Early Hints、Fetch Priority、Lazy-Loading、H2 Priorities），以帮助开发人员为浏览器指定唯一的资源优先级，从而改善网站加载性能。尽管用于指定资源优先顺序的这些工具和方法富有成效，但其需要实施和测试，以确保其正确执行。
优先级工具
作为改善网站性能的工具，Early Hints 和 Fetch Priorities 这两种方法已广受欢迎。这些工具向浏览器提供信息，告知其应如何按正确顺序加载资源，以改善关键资源的性能。
Early Hints
Early Hints 让服务器能够在最终响应可用之前向客户端提供某些信息。
当客户端向服务器发送请求时，服务器可以使用“提前提示 (early hint)”来提供有关最终响应的线索。这个早期提示是一个单独的响应，包含与最终响应相关的标头，例如可早期提取的重要静态对象，以及用于获取相关资源的链接。
Early Hints 的作用是允许客户端在等待最终响应的同时开始处理已收到的信息。客户端可以使用 Early Hint 发起早期资源预先加载，并预先连接到拥有最终响应信息的服务器，这可以加快页面加载时间。
Fetch Priority
优化资源加载领域的另一个强大工具是 Fetch Priorities，之前被称为 Priority Hints。
在分析网页时，Web 浏览器通常会优先提取脚本和样式表等资源，以优化下载顺序并有效使用带宽。分配给这些资源的优先级由浏览器根据资源类型、在网页中的位置以及其在 HTML 响应中的位置等因素决定。例如，对访问者可见的区域中的图片应具有较高的优先级，而 <head> 部分中早期加载的基本脚本可能会被分配极高的优先级。尽管浏览器通常会有效处理优先级分配事宜，但需要注意的是，这并非对所有场景而言都是最佳方案。
利用 Fetch Priorities。开发人员可以对资源加载拥有额外的控制权，并向网页上的不同资源分配较高/较低的优先级，从而帮助优化网页的整体性能。
尽管 Early Hints 和 Fetch Priorities 对于优化网页性能都非常有用，但它们通常需要对 HTML 资源的访问权限，以更改其优先级，同时还要了解如何对其他资源进行最佳优先级排序。虽然这些工具的协同使用可以让开发人员实施愈加复杂的性能策略，但随着网页的变化，也需要进行大量的测试、配置和管理。Smart Hints 通过使用我们的 RUM 数据信标和启发更好地实施优先级策略，而无需开发人员执行任何操作，从而简化对这些工具的管理。
我们将如何对资产进行优先级排序？
Cloudflare 的 Smart Hints 将利用 Early Hints 的能力和 Fetch Priority 功能，通过使用互联网上网站的大量 RUM 数据来优化资源交付；我们将实时动态地优化资源的优先级。Smart Hints 将基于具体响应动态确定适当的提示和优先级。
但如何做到呢？
Cloudflare 通过两种方式收集性能数据：综合测试和真实用户度量 (RUM)。综合测试通过在受控环境的自动化浏览器中加载网页来收集性能数据。RUM 也收集性能数据，但这些数据来自真实用户在真实浏览器上浏览网页时的数据。RUM 通过在网页中注入一小段 JavaScript 或信标来工作。Cloudflare 会从数千个网站中收集大量 RUM 数据。
通过这两个性能数据源，Cloudflare 可以智能地分析网页的加载瓶颈。如果加载瓶颈是由下载渲染阻塞资源导致，则 Cloudflare 可以为浏览器生成 Smart Hints，以优先下载这些资源。
随着 Smart Hints 的推出，我们将探索使用学习模型查找可转化为经验法则的模式。然后，可以利用这些经验法则来改善不使用 RUM 或综合测试的相似网站的性能。
通过 Smart Hints，Cloudflare 可以彻底改变交付网站和应用程序的方式，提供更快、更顺畅、更愉悦的浏览体验。通过为给定客户端推断正确的优先级，Cloudflare 将帮助客户找到最适合其网站性能的优先级，同时最大限度地减少优化不断变化的网页所需的时间。
我如何帮助 Cloudflare 实现此目标？
在更广泛地推出此工具之前，我们将对系统执行大规模的测试，以确保能够为各类内容作出最佳的性能决策。
在未来的几个月里，我们将建立测试小组，并与之合作，以确保每位用户都能获得良好的 Smart Hints 使用体验。如果您想要在此过程中提供帮助，请在此处（位于仪表板的 Speed Tab 中）注册以加入封闭测试，我们将在准备好启用该功能以及提供反馈的方式时与您联系。
总结
我们期望与我们的社群合作，共同打造并优化这种无代码/配置体验，让每位用户的页面加载都得到巨大的提升。
1是的，脚本和样式表也可以放在<body>部分中，但其主要是放在 <head> 中。