了解如何使用预加载、预获取和预连接等资源提示来优化网站加载时间，并在全球范围内改善用户体验。
利用资源提示加速网站速度：预加载、预获取和预连接
在当今快节奏的数字世界中，网站速度至关重要。用户期望网站快速加载并即时响应。加载时间过长会导致糟糕的用户体验、更高的跳出率，最终导致业务损失。资源提示是强大的工具，可以通过告知浏览器哪些资源很重要以及如何优先处理它们，从而帮助开发人员优化网站加载时间。本文探讨了三个关键资源提示：preload、prefetch和preconnect，并提供了实际的实施示例。
了解资源提示
资源提示是指示浏览器未来网页所需资源的指令。它们允许开发人员主动告知浏览器关键资源，使其能够比平时更早地获取或连接到这些资源。这可以显著减少加载时间并改善感知性能。
三个主要资源提示是：
- Preload： 获取初始页面加载所需的关键资源。
- Prefetch： 获取可能需要在未来导航或交互中使用的资源。
- Preconnect： 建立与重要第三方服务器的早期连接。
Preload：优先处理关键资源
什么是 Preload？
Preload 是一种声明式获取，允许您告诉浏览器尽早获取当前导航所需的资源。这对于浏览器后期发现的资源特别有用，例如通过 CSS 或 JavaScript 加载的图像、字体、脚本或样式表。通过预加载这些资源，您可以防止它们成为渲染阻塞并提高网站的感知加载速度。
何时使用 Preload
将 preload 用于：
- 字体： 尽早加载自定义字体可以防止无样式文本 (FOUT) 或不可见文本 (FOIT) 的闪烁。
- 图像： 优先处理首屏图像可确保它们快速加载，从而增强初始用户体验。
- 脚本和样式表： 尽早加载关键 CSS 或 JavaScript 文件可防止渲染阻塞。
- 模块和 Web Worker： 预加载模块或 Web Worker 可以提高应用程序的响应速度。
如何实施 Preload
您可以使用 HTML 文档的 <head> 中的 <link> 标签来实现 preload：
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">
说明：
rel="preload"：指定浏览器应预加载资源。href="/path/to/resource"：要预加载的资源的 URL。as="type"：指定正在预加载的资源类型（例如，font、style、script、image）。`as` 属性是强制性的，对浏览器正确地确定资源优先级和处理资源至关重要。使用正确的 `as` 值可确保浏览器应用正确的 Content Security Policy (CSP) 并发送正确的 `Accept` 标头。type="mime/type"：（可选但推荐）指定资源的 MIME 类型。这有助于浏览器选择正确的资源格式，尤其是字体。crossorigin="anonymous"：（从不同来源加载字体时必需）指定请求的 CORS 模式。如果您从 CDN 加载字体，则可能需要此属性。
示例：预加载字体
假设您的网站上使用名为“OpenSans”的自定义字体。如果没有 preload，浏览器只有在解析 CSS 文件后才会发现此字体。这可能会导致使用正确字体渲染文本时出现延迟。通过预加载字体，您可以消除此延迟。
<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
示例：预加载关键 CSS 文件
如果您的网站有一个关键的 CSS 文件，对于渲染初始视图至关重要，则预加载它可以显著提高感知性能。
<link rel="preload" href="/styles/critical.css" as="style">
Preload 的最佳实践
- 优先处理关键资源： 仅预加载初始页面加载所必需的资源。过度使用 preload 会对性能产生负面影响。
- 使用正确的
as属性： 始终指定正确的as属性以确保浏览器正确处理资源。 - 包含
type属性： 包含type属性以帮助浏览器选择正确的资源格式。 - 对跨域字体使用
crossorigin： 从不同来源加载字体时，请确保包含crossorigin属性。 - 测试性能： 始终测试 preload 的性能影响，以确保它确实提高了加载时间。使用 Google PageSpeed Insights 或 WebPageTest 等工具来衡量影响。
Prefetch：预测未来的需求
什么是 Prefetch？
Prefetch 是一种资源提示，它告诉浏览器获取可能需要在未来导航或交互中使用的资源。与专注于当前页面所需资源的 preload 不同，prefetch 预测用户的下一步操作。这对于提高后续页面或组件的加载速度特别有用。
何时使用 Prefetch
将 prefetch 用于：
- 下一页资源： 如果您知道用户很可能在接下来导航到特定页面，则预获取其资源。
- 用于用户交互的资源： 如果用户交互触发特定资源的加载（例如，模态窗口、表单），则预获取这些资源。
- 其他页面上的图像和资产： 预加载用户可能访问的其他页面上使用的图像或资产。
如何实施 Prefetch
您可以使用 HTML 文档的 <head> 中的 <link> 标签来实现 prefetch：
<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">
说明：
rel="prefetch"：指定浏览器应预获取资源。href="/path/to/resource"：要预获取的资源的 URL。
示例：预获取下一页的资源
如果您的网站有一个清晰的用户流程，例如一个多步骤表单，您可以在用户进行当前步骤时预获取下一步的资源。
<link rel="prefetch" href="/form/step2.html">
示例：预获取模态窗口的资源
如果您的网站使用一个模态窗口，该窗口在打开时会加载其他资源，您可以预获取这些资源以确保流畅的用户体验。
<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">
Prefetch 的最佳实践
- 谨慎使用： 应谨慎使用 Prefetch，因为它会消耗带宽和资源，即使用户不需要预获取的资源。
- 优先考虑可能的导航： 预获取最有可能发生的页面或交互的资源。
- 考虑网络状况： Prefetch 最适合具有稳定和快速互联网连接的用户。避免为使用慢速或计量连接的用户预获取大型资源。您可以使用 Network Information API 来检测用户的连接类型并相应地调整预获取。
- 监控性能： 监控 prefetch 对您网站性能的影响，以确保它提供净收益。
- 利用动态 Prefetching： 根据用户行为和分析数据动态实现预获取。例如，为当前页面上的用户经常访问的页面预获取资源。
Preconnect：建立早期连接
什么是 Preconnect？
Preconnect 是一种资源提示，允许您与重要的第三方服务器建立早期连接。建立连接涉及几个步骤，包括 DNS 查找、TCP 握手和 TLS 协商。这些步骤可能会增加从这些服务器加载资源的延迟。Preconnect 允许您在后台启动这些步骤，以便当浏览器需要从服务器获取资源时，连接已经建立。
何时使用 Preconnect
将 preconnect 用于：
- 第三方服务器： 托管字体、CDN、API 或您的网站依赖的任何其他资源的服务器。
- 常用服务器： 您的网站经常访问的服务器。
如何实施 Preconnect
您可以使用 HTML 文档的 <head> 中的 <link> 标签来实现 preconnect：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
说明：
rel="preconnect"：指定浏览器应与服务器预连接。href="https://example.com"：要预连接到的服务器的 URL。crossorigin：（可选，但对于使用 CORS 加载的资源是必需的）指定连接需要 CORS。
示例：预连接到 Google Fonts
如果您的网站使用 Google Fonts，预连接到 https://fonts.gstatic.com 可以显著减少字体加载的延迟。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
在这里，crossorigin 属性至关重要，因为 Google Fonts 使用 CORS 提供字体。
示例：预连接到 CDN
如果您的网站使用 CDN 提供静态资产，预连接到 CDN 的主机名可以减少加载这些资产的延迟。
<link rel="preconnect" href="https://cdn.example.com">
Preconnect 的最佳实践
- 谨慎使用： 预连接到太多服务器实际上会降低性能，因为浏览器用于建立连接的资源有限。
- 优先考虑重要服务器： 预连接到对您网站的性能至关重要的服务器。
- 考虑 DNS-Prefetch： 对于您不需要完全预连接，但仍希望尽早解析 DNS 的服务器，请考虑使用
<link rel="dns-prefetch" href="https://example.com">。DNS-prefetch 仅执行 DNS 查找，这比完全预连接的资源密集度要低。 - 测试性能： 始终测试 preconnect 的性能影响，以确保它提供净收益。
- 与其他资源提示结合使用： 将 preconnect 与 preload 和 prefetch 结合使用，以实现最佳性能。例如，预连接到托管字体的服务器，然后预加载字体文件。
结合资源提示以获得最佳性能
资源提示的真正力量在于战略性地结合它们。这是一个实际的例子：
想象一个网站，该网站使用托管在 CDN 上的自定义字体并加载一个关键的 JavaScript 文件。
- 预连接到 CDN： 建立与托管字体和 JavaScript 文件的 CDN 的早期连接。
<link rel="preconnect" href="https://cdn.example.com" crossorigin> - 预加载字体： 优先加载字体以防止 FOUT。
<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - 预加载 JavaScript 文件： 优先加载 JavaScript 文件以确保在需要时可用。
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
用于分析资源提示的工具
有几个工具可以帮助您分析资源提示的有效性：
- Google PageSpeed Insights： 提供用于优化网站性能的建议，包括使用资源提示。
- WebPageTest： 允许您从不同的位置和网络状况测试您网站的性能。
- Chrome DevTools： Chrome DevTools 中的 Network 面板显示资源加载的时间，并可以帮助您识别优化机会。
- Lighthouse： 用于提高网页质量的自动化工具。它具有针对性能、可访问性、渐进式 Web 应用程序、SEO 等的审核。
常见陷阱以及如何避免它们
- 过度使用资源提示： 使用太多资源提示会对性能产生负面影响。专注于最重要的资源。
- 不正确的
as属性： 对 preload 使用错误的as属性可能会阻止资源正确加载。 - 忽略 CORS： 从不同来源加载资源时，未能包含
crossorigin属性可能会导致加载错误。 - 未测试性能： 始终测试资源提示的性能影响，以确保它们提供净收益。
- 路径不正确： 仔细检查并确保为资源提示指定的所有文件路径和 URL 都是正确的，否则将会导致错误。
资源提示的未来
资源提示正在不断发展，新的功能和改进正在添加到浏览器规范中。及时了解资源提示的最新发展可以帮助您进一步优化网站的性能。例如，modulepreload 是一个较新的资源提示，专门设计用于预加载 JavaScript 模块。此外，资源提示的 `priority` 属性允许您指定资源相对于其他资源的优先级。这些功能的浏览器支持仍在发展中，因此在实现它们之前，请检查兼容性。
结论
资源提示是优化网站加载时间和改善用户体验的强大工具。通过战略性地使用 preload、prefetch 和 preconnect，您可以主动告知浏览器关键资源、减少延迟并增强网站的感知性能。请记住优先处理关键资源、谨慎使用资源提示，并始终测试更改的性能影响。通过遵循本文中概述的最佳实践，您可以显著提高网站的性能，并为全球用户提供更好的体验。