本文详细介绍了如何在PHP中通过HTTP Link Header发送Early Hints，以优化网页加载性能。重点阐述了使用`rel="preload"`和`rel="preconnect"`等指令预加载或预连接关键资源的方法，并强调了在发送这些提示时必须添加`nopush`属性，以避免不必要的HTTP/2服务器推送，确保性能优化达到预期效果。
引言：理解Early Hints与前端性能优化
在现代Web开发中，页面加载速度是用户体验和SEO的关键因素。HTTP 103 Early Hints是一种强大的性能优化机制，它允许服务器在处理主请求（例如，生成HTML内容）的同时，提前向浏览器发送关于可能需要的关键资源的提示。这些提示通过Link HTTP头发送，浏览器可以根据这些提示尽早开始连接或加载资源，从而显著减少页面渲染时间。
Link头可以用于多种目的，其中最常用于Early Hints的指令是rel="preload"（预加载资源）和rel="preconnect"（预连接到其他域）。
PHP中发送Link Header的基础
在PHP中，我们使用内置的header()函数来发送HTTP头。为了发送Early Hints，我们需要在任何实际内容输出之前调用header()函数。当服务器和客户端都支持HTTP 103 Early Hints时（例如，通过Cloudflare等CDN），这些Link头将作为103 Early Hints响应的一部分被发送。
立即学习“PHP免费学习笔记（深入）”；
header()函数的基本语法如下：
header("Header-Name: Header-Value", [replace], [http_response_code]);对于Link头，通常将replace参数设置为false，以允许发送多个Link头，而不是替换掉之前的同名头。
关键指令：preload与preconnect
1. rel="preload"：预加载关键资源
rel="preload"指令告诉浏览器立即开始下载并缓存指定的资源，因为这些资源在当前页面渲染过程中很快就会被需要。这对于CSS样式表、JavaScript文件、字体文件和图片等关键资源特别有用。
示例：预加载CSS样式表
<?php
// 确保在任何输出之前发送
header("Link: <https://example.com/style.css>; rel=preload; as=style", false);
// ... 其他Early Hints 或 PHP逻辑
?>关键点：as属性
as属性是rel="preload"指令中至关重要的部分。它告诉浏览器预加载资源的类型（例如，as="style"表示样式表，as="script"表示脚本，as="font"表示字体）。浏览器会根据as属性来：
- 确定资源的优先级。
- 应用正确的CSP策略。
- 在资源加载完成后，将其放入正确的缓存区域。
如果缺少as属性，浏览器可能不会预加载资源，或者可能以错误的优先级处理它，从而降低性能优化的效果。
2. rel="preconnect"：预连接到其他域
rel="preconnect"指令告诉浏览器尽快建立与另一个域名的连接。这包括DNS解析、TCP握手以及TLS协商（如果使用HTTPS）。这对于从第三方CDN加载资源、分析脚本或广告等场景非常有用，因为它可以消除后续请求的连接延迟。
示例：预连接到CDN域
<?php
// 确保在任何输出之前发送
header("Link: <https://cdn.example.com>; rel=preconnect", false);
// ... 其他Early Hints 或 PHP逻辑
?>rel="preconnect"通常不需要as属性，因为它仅仅是建立连接，而非下载特定类型的资源。
核心注意事项：nopush指令的重要性
在发送rel="preload"类型的Link头时，一个非常重要的细节是添加nopush属性。
问题所在：HTTP/2 Server Push
在HTTP/2协议中，存在一个“Server Push”机制，允许服务器在客户端明确请求之前，主动将资源推送给客户端。这在某些情况下可以提高性能，例如，当服务器确定客户端在请求HTML后一定会立即请求某个CSS文件时。
然而，如果仅仅发送rel=preload而不加nopush，在支持HTTP/2 Server Push的服务器环境中，服务器可能会错误地将该资源通过Server Push再次发送给浏览器。这可能导致以下问题：
- 资源重复： 如果浏览器已经缓存了该资源，或者在服务器推送完成之前已经自行请求并下载了该资源，Server Push就会导致带宽浪费。
- 不必要的推送： 服务器可能推送浏览器当前不需要的资源，占用带宽和客户端资源。
- 缓存问题： Server Push的缓存机制可能比浏览器自身的缓存更复杂，有时会导致意想不到的问题。
解决方案：务必添加nopush
为了避免上述问题，当您通过Link头发送rel=preload指令时，强烈建议添加nopush属性。这个属性明确地告诉服务器，即使它支持HTTP/2 Server Push，也不要对这个特定的预加载资源执行推送操作。
正确示例：预加载CSS并禁用Server Push
<?php
// 确保在任何输出之前发送
header("Link: <https://example.com/style.css>; rel=preload; as=style; nopush", false);
// 预连接到CDN，此指令通常不需要nopush，因为它不涉及资源推送
header("Link: <https://cdn.example.com>; rel=preconnect", false);
?>通过添加nopush，您确保了rel=preload仅仅是作为Early Hint发送给浏览器，让浏览器自行决定何时何地下载资源，而不会被服务器强制推送，从而避免了潜在的性能倒退。
PHP实现Early Hints的完整示例
以下是一个结合了preload和preconnect，并遵循nopush最佳实践的PHP代码片段：
<?php
// 确保在任何HTML或其他内容输出之前调用header()函数
// 1. 预加载关键CSS文件，并禁用HTTP/2 Server Push
header("Link: <https://example.com/css/main.css>; rel=preload; as=style; nopush", false);
header("Link: <https://example.com/css/theme.css>; rel=preload; as=style; nopush", false);
// 2. 预加载关键JavaScript文件，并禁用HTTP/2 Server Push
header("Link: <https://example.com/js/app.js>; rel=preload; as=script; nopush", false);
// 3. 预加载自定义字体，并禁用HTTP/2 Server Push
header("Link: <https://example.com/fonts/myfont.woff2>; rel=preload; as=font; crossorigin; nopush", false);
// 注意：预加载字体通常需要 crossorigin 属性
// 4. 预连接到第三方CDN，以加速外部资源加载
header("Link: <https://cdnjs.cloudflare.com>; rel=preconnect", false);
header("Link: <https://fonts.gstatic.com>; rel=preconnect", false);
// 5. 其他PHP逻辑，例如数据库查询、会话处理等
// ...
// 6. 输出页面的HTML内容
echo "<!DOCTYPE html>";
echo "<html lang='zh'>";
echo "<head>";
echo " <meta charset='UTF-8'>";
echo " <title>我的优化页面</title>";
echo " <!-- 实际的CSS和JS引用 -->";
echo " <link rel='stylesheet' href='https://example.com/css/main.css'>";
echo " <link rel='stylesheet' href='https://example.com/css/theme.css'>";
echo "</head>";
echo "<body>";
echo " <h1>欢迎来到优化后的网站</h1>";
echo " <script src='https://example.com/js/app.js'></script>";
echo "</body>";
echo "</html>";
?>总结与最佳实践
Early Hints是提升前端性能的强大工具，但其有效性依赖于正确的实现。
- 时机关键： 确保header()函数调用在任何实际内容输出之前执行。
- 选择关键资源： 仅对页面渲染初期最关键的资源使用preload和preconnect。过度使用可能适得其反。
- as属性不可或缺： 对于rel="preload"，始终包含正确的as属性，以确保浏览器正确处理资源。
- nopush是强制要求： 对于rel="preload"，务必添加nopush属性，以避免不必要的HTTP/2 Server Push，从而确保性能优化效果。
- 环境支持： 确认您的Web服务器或CDN（如Cloudflare）支持HTTP 103 Early Hints。
通过遵循这些指南，您可以在PHP应用程序中有效地利用Early Hints，为用户提供更快、更流畅的Web体验。
