PRPL 是一个首字母缩写词，描述了一种用于使网页更快加载并变得具有互动性的一种模式：
- 预加载延迟发现的资源。
- 尽快渲染初始路线。
- 预缓存剩余资产。
- 延迟加载其他路由和非关键资源。
在本指南中，您将了解这两种方法如何协同工作，同时仍可独立使用来实现性能结果。
使用 Lighthouse 审核您的页面
运行 Lighthouse 以发现符合 PRPL 技术的改进机会：
- 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
- 点击 Lighthouse 标签页。
- 选中性能和渐进式 Web 应用复选框。
- 点击运行审核以生成报告。
如需了解详情，请参阅利用 Lighthouse 发现效果提升机会。
预加载关键资源
如果某个资源被解析和提取延迟，则 Lighthouse 会显示以下失败的审核：
预加载是一种声明性提取请求，用于告知浏览器请求浏览器的预加载扫描程序找不到的资源，例如 background-image 属性引用的图片。通过在 HTML 文档的标头中添加带有 rel="preload" 的 <link> 标记，预加载延迟发现的资源：
<link rel="preload" as="image" href="hero-image.jpg">
添加 <link rel="preload"> 指令会发起对该资源的请求，并将其存储在缓存中。这样，浏览器就可以在需要时检索它了。
如需详细了解如何预加载关键资源，请参阅预加载关键资源指南。
尽快渲染初始路线
如果有资源会延迟 First Paint（您的网站将像素渲染到屏幕上时），Lighthouse 会发出警告：
为了改进首次绘制，Lighthouse 建议您使用 async 来内嵌关键 JavaScript 并推迟其余 JavaScript，同时内嵌首屏使用的关键 CSS。这样就不必为了提取阻塞渲染的资源而需要往返于服务器，从而提高了性能。不过，从开发的角度来看，内嵌代码更难维护，并且不能由浏览器单独缓存。
改进 First Paint 的另一种方法是在服务器端渲染网页的初始 HTML。这样一来，在系统仍在提取、解析和执行脚本的过程中，就会立即向用户显示内容。但是，这可能会显著增加 HTML 文件的载荷，从而影响可交互时间或应用进入可交互状态并响应用户输入所需的时间。
没有单一的正确解决方案可以减少应用中的首次绘制。因此，只有当应用的收益大于利弊时，您才应考虑使用内嵌样式和服务器端渲染。您可以通过以下资源详细了解这两个概念。
预缓存资产
通过充当代理，Service Worker 可以在重复访问时直接从缓存中提取资源，而无需从服务器提取。这不仅可以让用户在离线时使用您的应用，还可以缩短重复访问时的网页加载速度。
除非您的缓存要求比库能够提供的要求更复杂，否则请使用第三方库来简化 Service Worker 的生成过程。例如，Workbox 提供了一系列工具，您可以使用这些工具创建和维护 Service Worker 以缓存资源。如需详细了解 Service Worker 和离线可靠性，请参阅可靠性学习路线中的 Service Worker 指南。
延迟加载
如果您通过网络发送的数据过多，Lighthouse 会显示失败的审核。
这包括所有资源类型，但由于浏览器要花很长时间来解析和编译它们，大型 JavaScript 载荷的开销特别大。Lighthouse 还会在适当的情况下针对此问题发出警告。
如需发送较小的 JavaScript 载荷（其中仅包含用户最初加载应用时所需的代码），请按需拆分整个 bundle 和“延迟加载”区块。
成功拆分软件包后，请预加载更重要的分块（请参阅预加载关键资产指南）。 预加载可确保浏览器更快地提取和下载更重要的资源。
除了按需拆分和加载不同的 JavaScript 区块之外，Lighthouse 还针对延迟加载非关键图片提供审核服务。
如果您在网页上加载了很多图片，请在加载网页时推迟所有非首屏或设备视口以外的图片（请参阅使用延迟大小来延迟加载图片）。
后续步骤
现在，您已经了解 PRPL 模式背后的一些基本概念，请继续阅读本部分中的下一个指南以了解详情。请务必注意，并非所有技术都需要同时使用。您在以下任意方面所做的任何努力都将显著提升性能。
- 预加载关键资源。
- 尽快渲染初始路线。
- 预缓存剩余资产。
- 延迟加载其他路由和非关键资源。
如需详细了解 PRPL 模式，