在构建新站点或解决性能问题时，您需要注意显示首屏内容所需的关键文件的加载顺序，因为它会影响首次内容绘制 FCP、最大内容绘制 LCP 和速度指数指标。
首屏展示所需的关键资产通常包括：
- 您网站的主要样式表 CSS 位于首屏 CSS 之上，除非它是内联的（稍后会详细介绍）
- 除非您使用“网络安全”字体，否则首屏字体显示所需的字体 .woff2 文件
- 如果首屏上方最大的元素是图片而非文本，则为 LCP 图片。
注意：视频不计入 LCP 元素，因此会被忽略
前六个请求非常重要，因为 http/2 允
许从托管服务器同时请求 6 到 8 个文件，并且应该适用于所有现代托管环境。您可以在下面由Webpack.org生成的瀑布图中看到2 的实际 按行业划分的特定数据库 运行情况，其中 LCP 图像、主样式表 css 文件和关键的 .woff2 字体文件在最初的 8 个请求中几乎同时被请求。
接下来是对不太重要的资产进行交错请求，这些资产可以承受短暂的延迟，例如主站点的 app.js 文件、GTM 脚本等
有很多原因可能导致您的关键资源在最初几个请求中无法加载。例如，插件可能会添加额外的渲染阻塞脚本或样式，您的大型菜单图片可能会在 LCP 主图之前加载，或者您的网站可能依赖 JavaScript 来渲染字体。
无论使用什么技术来呈现内容，重要的是继续关注关键资产，可以通过以下方式进行优化：
1. 预加载字体
您应该使用站点 <head> 元素中的以下 <link> 标签预加载任何首屏 .woff2 字体文件，以便可以在请求字体的任何样式表或 CSS 之前下载字体：
当字体直接托管在服务器上而不是 地图添加 — 地图以帮助客 任何第三方字体制造商（例如 TypeKit）上时，字体的提供速度通常也更快，因为它避免了与其他域建立额外的 DNS 和 SSL 连接。
还要记住使用 font-display: swap; 规则，以便在字体文件检索延迟时，使用字体回退权限快速显示 Web 字体。
2. 为 LCP 镜像添加高获取优先级
确保最大的首屏图像（尤其是当该图像是 LCP 元素时）是浏览器请求的第一个图像，甚至在网站主徽标之前，这一点很重要。
应将最近的fetchpriority属性与“eager”加载 属性一起添加到图像标签中，以优先考虑折叠 LCP 图像上方的请求顺序：
<img fetchpriority=”high”loading=”eager”…>
所有其他折叠下方或屏幕外的图像都应使用loading =“lazy”进行延迟加载，而不使用fetchpriority属性。
3. 使用关键的链接信息来识别机会
运行 Lighthouse 或 PageSpeed Insights 报告时，请留意“避免链接关键请求”诊断部分。如果字体未预加载，您可能会看到一个关键请求链，其中显示了网站的根目录以及请求字体的 CSS。
如果您没有延迟 JS 或 CSS，也没有内联关键 CSS（稍后会详细介绍），您将在此关键链中看到这些 CSS 和 JS 文件。尽量减少关键链中的文件数量，黄金标准目标是零个链接请求。
简化 JavaScript 交付
JavaScript 几整个网站，并且是实现互动性和参与度以及跟踪和分析等商业智能工具的关键。
在 Lighthouse 评分机制中，JavaScript 通常会直接影响占总分 30% 的总阻塞时间 TBT，但也会间接影响其他指标；如果 CPU 在用户访问页面时立即执行脚本，这可能会延迟渲染，进而延迟 LCP 和速度指数。
任何执行时间超过 50 毫秒的 JavaScript 都会被视为“长”任务，因为它会阻塞主线程执行其他任何任务。要所有第三方工具，是否需要 JS 来显示 俄罗斯号码列表 首屏内容以及 JS 框架在您的技术栈中的作用。