对不太重要的资产进行交错请求，这些资产可以承
Posted: Tue Mar 18, 2025 10:07 am
前六个请求非常重要，因为 http/2 允许同时从托管服务器请求 6-8 个文件，并且应该适用于所有现代托管环境。您可以在以下由Webpacktest.org生成的瀑布图中看到 http/2 的实际运行情况，其中 LCP 图像、主样式表 css 文件和关键 .woff2 字体文件在最初的 8 个请求中几乎同时被请求。
接下来是受短暂的延迟，例如 法国号码 主站点的 app.js 文件、GTM 脚本等
瀑布图
瀑布图展示了 Hallam 网站上情况
有很多原因可能导致您的关键资产在前几个请求中无法加载。例如，插件可能会添加额外的渲染阻止脚本或样式，您可能在 LCP 英雄图像之前加载大型菜单图像，或者您的网站可能依赖 JavaScript 来渲染字体。
无论使用什么技术来呈现内容，重要的是继续关注关键资产，可以通过以下方式进行优化：
1. 预加载字体
您应该使用站点 <head> 元素中的以下 <link> 标签预加载任何首屏 .woff2 字体文件，以便可以在请求样式表或 CSS 之前下载字体：
<link rel=”preloa
当字体直接托管在服务器上而不是任何第三方字体制造商（例如 TypeKit）时，字体的提供速度通常也更快，因为它避免了与其他域建立额外的 DNS 和 SSL 连接。
还要记住使用 规则，以便在字体文件检索延迟时，使用字体后备权限快速显示 Web 字体。
2. 为 LCP 镜像添加高获取优先级
确保最大的首屏图像（尤其是当该图像是 LCP 元素时）是浏览器请求的第一个图像，甚至早于网站主徽标，这一点很重要。
最近的fetchpriority属性具有良好的浏览器支持，应该与“e
接下来是受短暂的延迟，例如 法国号码 主站点的 app.js 文件、GTM 脚本等
瀑布图
瀑布图展示了 Hallam 网站上情况
有很多原因可能导致您的关键资产在前几个请求中无法加载。例如，插件可能会添加额外的渲染阻止脚本或样式，您可能在 LCP 英雄图像之前加载大型菜单图像，或者您的网站可能依赖 JavaScript 来渲染字体。
无论使用什么技术来呈现内容，重要的是继续关注关键资产，可以通过以下方式进行优化：
1. 预加载字体
您应该使用站点 <head> 元素中的以下 <link> 标签预加载任何首屏 .woff2 字体文件，以便可以在请求样式表或 CSS 之前下载字体：
<link rel=”preloa
当字体直接托管在服务器上而不是任何第三方字体制造商（例如 TypeKit）时，字体的提供速度通常也更快，因为它避免了与其他域建立额外的 DNS 和 SSL 连接。
还要记住使用 规则，以便在字体文件检索延迟时，使用字体后备权限快速显示 Web 字体。
2. 为 LCP 镜像添加高获取优先级
确保最大的首屏图像（尤其是当该图像是 LCP 元素时）是浏览器请求的第一个图像，甚至早于网站主徽标，这一点很重要。
最近的fetchpriority属性具有良好的浏览器支持，应该与“e