预加载允许您指定在页面加载期间立即或很快需要的资源（例如字体、图像、JavaScript 和 CSS）。 在您网站的每个页面的<head>…</head>部分顶部添加一个link rel=’preload’标签。 比如： <link rel=’preload’ href=’font.woff2′ as=’font’ type=’font/woff2′ crossorigin> 打开网页时，浏览器会从服务器请求HTML文档，解析其内容，并为引用资源提交单独请求。作为开发人员，您知道页面需要的所有资源以及哪些资源最为重要。您可以使用这些知识提前请求关键资源，加快加载的过程。本文介绍了如何使用 <link> 来达成此目的。 预加载的工作原理 预加载最适合用于浏览器通常较晚发现的资源。 在本例中，Pacifico字体是在样式表通过 @font-face 规则定义的。浏览器只有在完成下载和解析样式表后才会加载字体文件。 通过预加载某个资源，您希望浏览器可以比正常发现它更早地获取该资源，因为您认为它对当前页面很重要。 在本例中，已预加载了Pacifico字体，所以下载会与样式表并行进行。 关键请求链代表着浏览器优先处理和获取的资源顺序。 Lighthouse会将位于该链第三层的资产识别为后期发现的资产。您可以使用预加载关键请求审计来确定要预加载的资源。 您可以通过在HTML文档的头部添加带有 rel=”preload” 的 <link> 标记来预加载资源： <link as=”script” href=”critical.js”> 浏览器会缓存预加载的资源，以便在需要时立即可用。（它不会执行脚本或应用样式表。） 在实施预加载后，包括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: 字体文件。 […]
