前言
探讨了资源预取（prefetching）可能导致网站加载速度变慢的问题，并提供了解决方案。今日前端早读课文章由 @Matt Zeunert 分享，@飘飘翻译。
译文从这开始～～
预加载（Prefetching）本应提升性能，但有时却可能延迟网站的加载速度。
本文将介绍资源预加载的优势、它可能带来的性能问题，以及如何应对这些问题。
资源预加载的作用
预加载是一种网页性能优化技术，它会提前加载可能需要的资源，以加快后续访问速度。
例如，当用户访问你的首页时，你可以预加载登录页面或定价页面所需的代码。这样，当用户真正进入这些页面时，资源已经准备就绪，加载速度会更快。
要预加载资源，可以在 HTML 代码中添加一个预加载链接标签，例如：
<link rel="prefetch" as="style" href="page-2.css" />
预加载请求的优先级
预加载的资源并不是立刻需要的，因此它们应该在后台悄悄加载。Google 在 web.dev 上对此进行了说明：
浏览器会将所有预加载提示排队，并在空闲时请求这些资源。
预加载的请求被标记为
“最低”
优先级，因此它们不会与当前页面所需的资源争夺带宽。
预加载请求过早导致的带宽竞争
然而，在分析网站资源加载的请求瀑布图时，我们发现预加载请求往往发生得太早，导致它们与主要内容的图片争夺带宽。
尽管 Chrome 将预加载请求标记为最低优先级，但我们网站上优先级最高的 Largest Contentful Paint（LCP）图片仍然没有被快速下载。
💡 小贴士
理论上，服务器也应该识别资源的优先级，并优先发送重要资源。但在实际情况中，许多云服务提供商并未正确支持这一功能。
这对真实用户有影响吗？
实验室环境下的性能测试是在模拟条件下进行的，往往与真实用户的体验不完全一致。例如，大多数访客的网络连接速度快于 Google Lighthouse 测试时所使用的带宽。
【第3358期】通过异步 chunk 预加载优化 SPA 加载时间
因此，我们搭建了真实用户监测（Real User Monitoring，RUM），跟踪主要图片的加载时间和第一个预加载的 JavaScript 文件的完成时间。结果发现，在大多数情况下，预加载的 JavaScript 竟然比关键图片先加载完成！
ℹ️ 需要注意的点
无论优先级如何，预加载的 JavaScript 仍然有一定优势，因为它来自与 HTML 文档相同的域，而图片则需要建立新的服务器连接。
关闭预加载后，性能是否有所提升？
那么，预加载文件过早加载是否影响了用户看到页面内容的时间？为了测试这一点，我们让预加载链接标签仅在一半的情况下生效，并对比其影响。
最终，我们并未观察到明显的差异，不过 75% 分位数的 LCP（Largest Contentful Paint）得分在禁用预加载时快了 100 毫秒。
真实用户的 TTFB（首字节时间）对比
在 90% 分位数时，测试结果基本相同；但在 95% 分位数时，开启 JavaScript 预加载的页面反而更快🤷♂️。
预加载资源过早加载是常见现象吗？
在寻找使用预加载的网站时，我们发现很难找到真正等到网络空闲才进行预加载的网站。
【第3439期】携程商旅在 Remix 模块预加载中的探索与优化实践
理想情况下，浏览器应该在主页面内容渲染完成后才开始预加载资源。然而，实际情况往往并非如此。下面的示例显示，即使是最低优先级的 JavaScript 也会被提前加载。
📊 请求瀑布图显示了预加载资源过早加载的情况
