预加载允许您指定在页面加载期间立即或很快需要的资源（例如字体、图像、JavaScript 和 CSS）。 在您网站的每个页面的…部分顶部添加一个link rel='preload'标签。

比如：

打开网页时，浏览器会从服务器请求HTML文档，解析其内容，并为引用资源提交单独请求。作为开发人员，您知道页面需要的所有资源以及哪些资源最为重要。您可以使用这些知识提前请求关键资源，加快加载的过程。本文介绍了如何使用  来达成此目的。

预加载的工作原理

预加载最适合用于浏览器通常较晚发现的资源。

在本例中，Pacifico字体是在样式表通过 @font-face 规则定义的。浏览器只有在完成下载和解析样式表后才会加载字体文件。

通过预加载某个资源，您希望浏览器可以比正常发现它更早地获取该资源，因为您认为它对当前页面很重要。

在本例中，已预加载了Pacifico字体，所以下载会与样式表并行进行。

关键请求链代表着浏览器优先处理和获取的资源顺序。 Lighthouse会将位于该链第三层的资产识别为后期发现的资产。您可以使用预加载关键请求审计来确定要预加载的资源。

您可以通过在HTML文档的头部添加带有 rel="preload" 的  标记来预加载资源：

浏览器会缓存预加载的资源，以便在需要时立即可用。（它不会执行脚本或应用样式表。）

在实施预加载后，包括Shopify、Financial Times和Treebo在内的许多网站在以用户为中心的指标（例如Time to Interactive 和First Contentful Paint）等方面，都实现了1秒的改进。

浏览器会根据情况执行诸如 preconnect 和 prefetch 等资源提示。而另一方面，preload 对浏览器来说是强制性的。现代浏览器已经非常擅长对资源进行优先级排序，这就是为什么谨慎使用 preload 并且只预加载最关键的资源那么重要。

load 事件后大约3秒会触发Chrome中的控制台警告。

所有现代浏览器均支持 preload。

有助于修复以下两种类型的警告：

1.预加载密钥请求

预加载关键请求是Web字体的常见警告。Font Awesome是您可能会看到的一种非常常见的字体。

预加载关键请求

2.渲染阻塞资源

通过预加载，您还可以修复渲染阻塞资源警告，因为资产以非阻塞方式加载。

消除渲染阻塞资源

如果您正在预加载图像，它还可以帮助降低最大内容绘制 (LCP) 时间。

可预加载资源

有许多不同的资源可以预加载。

公共资源

• font: 字体文件。
• script: JavaScript文件。
• style: CSS样式表。
• image: 图像文件 ( .jpg, .png, .webp)。

其他资源

• audio: 音频文件
• document: 旨在由  或