如何最大限度地减少 WordPress 上的主线程工作并提高页面速度

12 月 10, 2023

—

优化

主线程的工作是什么

要理解主线程是什么，我们需要退后一步并解释当您想要加载页面内容时会发生什么。

首先，浏览器向服务器发出请求。一旦服务器发回请求的内容，浏览器就可以开始分析（解析）HTML 代码并构建 DOM 树——这就是 HTML 结构。此时，浏览器就可以渲染并显示内容了。

解析和渲染代码的过程是浏览器的主线程。当浏览器遇到导致进程减慢的渲染阻塞资源时，主线程会变得繁忙并被阻塞。因此，该页面无法交互，也无法响应任何用户交互。

主线程繁忙的罪魁祸首是 JavaScript——CSS 文件也发挥了作用。浏览器在解析代码和渲染页面时不应遇到这些文件，因为它们是JS 和 CSS 渲染阻塞的，应将其删除。

通过查看 PageSpeed Insights 报告，您可以清楚地了解主线程工作如何受到影响：

最小化主线程工作 – PSI

如您所见，PageSpeed 建议分为七个不同的部分。您可以查看哪个类别对性能影响最相关。

您最能改进的类别是：

脚本评估
脚本解析&编译
解析 HTML 和 CSS。

这些部分都与解析和执行代码有关 – 这正是主线程在遇到渲染阻塞资源时变得繁忙的时候。

为什么应该最小化主线程工作

正如您所看到的，主线程工作会对性能产生重大影响。

由于主线程工作繁忙的主要原因是 JavaScript，因此受影响最大的指标是首次输入延迟 (FID)，它衡量页面的交互性和响应能力。

首次输入延迟是核心 Web Vitals 指标之一，它是通过真实用户数据和交互在现场进行测量的。它被Lighthouse 性能得分中的总阻塞时间取代。TBT占总成绩的25%。这就是为什么您不能忽视主线程，如果您想提高网站的性能，应该解决 PSI 建议。

如何最小化 WordPress 上的主线程工作

有五种主要方法可以最小化 WordPress 网站上的主线程：

推迟JS
删除未使用的 JS 和延迟 JS
缩小 JS
缩小CSS
推迟非关键 CSS。

您将了解可以手动使用哪些方法以及在某些插件的帮助下使用哪些方法。您还将了解您将要处理的特定 PSI 类别。

1.延迟JS

处理 JS 文件的第一个选择是推迟 JavaScript 脚本的解析，并仅在渲染最相关的内容后加载它们。

延迟 JS 将专门解决脚本解析和编译类别。

如果您想手动延迟 JS，您应该首先通过 PageSpeed Insights 报告识别脚本。然后，您应该在每个 JavaScript 文件中包含 defer 属性，以便在页面渲染完成之前不会解析和加载脚本。

以下是 defer 属性的示例：

<script defer src=”/example-js-script”></script>

2.去掉未使用的JS+延迟JS

管理JS文件的另一个有效方法是删除未使用的JS并延迟JS资源。

通过这两个操作，您将负责 PSI 报告中包含的脚本评估和脚本解析和编译类别。

删除未使用的 JavaScript 时，JS 文件将不会包含在渲染首屏内容中。因此，浏览器（即主线程工作）不会被显示最重要页面内容所需的繁重 JS 文件中断。

通过延迟 JavaScript 资源，浏览器不会加载这些文件，直到第一次用户交互（例如，滚动、单击按钮）。再次，主线程工作不会变得繁忙和阻塞。

作为 WordPress 用户，您有不同的选择。

你可以选择一个延迟JS的插件，比如WP Meteor或者Flying Scripts。您还可以利用资源管理器插件来选择加载特定 JS 文件的位置。一些 WordPress 选项包括 Plugin Organizer、Gonzales、Perfmatters 和 Asset CleanUp。

3. 缩小JS

管理 JS 文件的第三种也是最后一种方法是通过缩小。它允许您处理脚本评估和脚本解析和编译类别。

缩小 JS 的目标是使代码更轻、更快。通过删除换行符、注释和空格，您将减少 JS 文件的大小。

您可以使用JS 缩小工具或利用 WP Rocket。除了强大的 Web 性能功能之外，WP Rocket 还可以让您轻松轻松地缩小 JS。只需转到“文件优化”选项卡并标记“缩小 JavaScript 文件”：

4. 缩小 CSS

除了 JS 之外，您还应该缩小 CSS 文件，以解决与脚本评估和解析 HTML 和 CSS 相关的 PSI 类别。

原因总是一样的。通过缩小 CSS，您将减少代码的大小并使其加载速度更快。

再次，您可以使用CSS 缩小工具或在“文件优化”选项卡中选择 WP Rocket 提供的选项：

5. 推迟非关键 CSS

如果您想最小化主线程工作并解决解析 HTML 和 CSS

在 PSI 审核的类别中，您还应该推迟非关键 CSS — 不在首屏且渲染页面不需要的 CSS 文件。

目标是仅在浏览器渲染并显示最相关的内容后才加载非关键 CSS。

您可以通过不同的方式延迟 CSS 文件。

首先要知道的是，延迟非关键 CSS 与内联关键 CSS密切相关——需要尽快加载的文件。

这就是为什么您应该在 HTML 代码中识别并内联关键 CSS。您可以使用关键路径 CSS 生成器来完成此操作。之后，您可以通过应用以下模式异步加载非关键 CSS 文件。

6. 其他性能优化

正如您在“最小化主线程工作”建议中注意到的那样，您还应该优化其他类别：

风格和布局
渲染
垃圾收集。

样式布局和渲染与分析HTML代码时构建的布局结构和DOM树有关。Google 建议减少样式计算的范围和复杂性，并避免大型、复杂的布局和布局抖动。

至于 Garbade Collection，您应该监控网页的总内存使用情况。