在提高网站性能方面，每一毫秒都很重要。减少关键资源加载时间的最有效方法之一是使用 html 链接 rel="preload" 属性。在这篇文章中，我们将深入探讨预加载的工作原理、何时使用它以及它如何显着改善网站上的用户体验。
什么是rel="预加载"？
rel="preload" 属性允许您告诉浏览器在页面渲染期间需要某些资源之前开始下载它们。通过这样做，您可以确保更快地获取字体、样式表或脚本等关键资源，从而减少页面完全渲染所需的时间。
简单地说，您向浏览器提醒哪些文件对于流畅的体验很重要。
为什么要使用预载？
大多数 web 性能优化都侧重于减少加载资源所需的时间。当字体、css 或 javascript 文件等关键资源直接影响页面显示和运行速度时，预加载特别有用。
预加载的作用如下：
- 减少渲染阻塞：通过预加载关键 css 或字体，可以避免页面在显示内容之前等待加载这些资源的渲染阻塞问题。
- 改进首次内容绘制 (fcp)： 预加载可确保更快地下载重要资源，从而提高向用户显示第一个视觉内容的速度。
- 更好的用户体验： 加载速度更快的页面感觉响应更快，并增强了整体用户体验，特别是对于字体或英雄图像等资源密集型资产。
语法和用法
让我们从如何使用 rel="preload" 的基本示例开始。下面是一个简单的 html 片段，演示了预加载自定义字体：
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
在此示例中：
- href指定资源的 url。
- as 表示资源类型（例如字体、图像、脚本）。
- 类型帮助浏览器理解文件的确切格式（对字体有用）。
- 从不同域加载资源时需要 crossorigin。 浏览器看到此标签并知道尽早下载字体，即使使用该字体的 css 尚未应用。
预加载不同类型的资源
您可以预加载对于呈现页面至关重要的各种类型的资源。让我们看一些常见的例子：
1。预加载字体
字体通常是初始页面加载缓慢的主要原因。预加载它们可确保在内容呈现后立即正确设置文本样式，从而防止出现无样式文本 (fout) 或出现不可见文本 (foit)。
<link rel="preload" href="/fonts/opensans.woff2" as="font" type="font/woff2" crossorigin="anonymous">
2。预加载样式表
应预加载控制页面布局的关键样式表，以确保浏览器尽快呈现页面。
<link rel="preload" href="/css/main.css" as="style">
3。预加载脚本
如果您有用户交互所需的 javascript，预加载它可以帮助减少脚本执行的延迟。
<link rel="preload" href="/scripts/main.js" as="script">
4。预加载图像
应预加载大图像，尤其是首屏使用的图像，以确保用户在获取图像时不会看到空格或图像占位符。
<link rel="preload" href="/images/hero.jpg" as="image">
使用 rel="preload" 的最佳实践
虽然预加载是一个强大的工具，但您应该谨慎使用它。以下是一些最佳实践：
仅预加载关键资源：预加载所有内容实际上会减慢您的网站速度。坚持初始页面渲染所必需的资源。
对外部资源使用跨域：从不同域预加载资源时，请务必包含 crossorigin 属性。这可确保您的资源可以正确获取，而不会出现 cors 问题。
确保正确的缓存处理：预加载的资源应该是可缓存的，以防止冗余的网络请求。这可以减少服务器和用户浏览器的负载。
不要预加载所有内容：过度预加载可能会对浏览器造成不必要的压力，从而导致性能下降。仅预加载关键渲染路径所必需的资源。
在您的网站上使用 rel="preload" 的示例
以下是如何将 rel="preload" 集成到典型网页中的完整示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preload Example</title>
<!-- Preload important resources -->
<link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/css/main.css" as="style">
<link rel="preload" href="/scripts/main.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">
<!-- Link stylesheet -->
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<header>
<h1>Preload Example</h1>
@@##@@
</header>
<script src="/scripts/main.js"></script>
</body>
</html>
在此示例中，我们预加载了将立即影响页面渲染速度的基本资源，例如字体、样式表和图像。
何时不使用 rel="preload"
虽然预加载很强大，但它并不是适用于所有资源的神奇解决方案。以下是您可能希望避免使用它的几种情况：
非关键资源：不要预加载对于页面初始渲染不重要的资源。
不可预测的资源：如果某些资源是有条件的或依赖于用户交互（例如首屏图像或延迟的 javascript），最好让浏览器在需要时获取它们。
结论
使用 rel="preload" 是一种简单而有效的方法，可以通过告诉浏览器尽快获取关键资源来加速您的网站。通过专注于预加载字体、样式表和图像等重要资源，您可以减少加载时间并增强用户体验。
关键要点：仅预加载关键内容，您网站的性能将显着提高。在您的下一个项目中尝试一下，看看它会带来什么不同！
