目录
减少 JavaScript 执行时间是 PageSpeed Insights 最重要的建议之一。由于 JavaScript 会极大地影响 WordPress 网站的性能，因此必须管理任何会减慢加载时间的 JS 问题。
在本文中，您将首先了解 JavaScript 执行对性能的影响。然后，您将学习如何测量和识别 JS 问题以及如何减少 WordPress 网站上的 JS 执行时间（手动或使用一些插件）。
JS执行时间对性能有什么影响？
您可以通过查看“首次输入延迟”指标和Lighthouse 性能得分来了解 JS 执行时间如何影响性能。
JavaScript 执行时间与 FID 分数密切相关，FID 分数衡量页面的交互性和响应性。如果您尝试与页面交互，但没有得到任何响应，则意味着浏览器正忙于处理某些 JS 文件。这就是为什么您应该尝试尽可能减少这些 JS 脚本的大小。
FID 指标与总阻塞时间 (TBT)密切相关，后者是 Lighthouse 性能指标之一（基于实验室数据）。由于 TBT 分数占Lighthouse 整体性能分数的 25% ，因此您可以了解 JavaScript 问题将如何影响您的 PageSpeed Insights 分数。
让我们更详细地看看它的含义。
如何测量 JavaScript 执行时间并识别主要 JS 问题
减少JS执行时间意味着减少浏览器下载后解析、编译和执行JS所花费的时间。
解析、编译和执行是减少 JS 执行时间的三个步骤。
每当 JS 执行时间超过 2 秒时，Lighthouse 就会将其报告为需要解决的问题。
您可以通过 PageSpeed Insights 和 GTmetrix 识别和测量 JS 执行时间。
通过 Pagespeed Insights 测量 JS 执行时间
如果您的 URL 存在任何 JS 执行时间问题，Google PageSpeed Insights 将在诊断部分显示警告：
可以看到，PSI显示了每一步的JS执行时间：
- 脚本评估（这是编译阶段）
- 脚本解析（这是解析阶段）
- 总 CPU 时间（这是内存成本，可能会完全冻结您的页面）。
如上所述，审计会考虑每个执行时间超过 2 秒的 JS 脚本。
通过 GTmetrix 测量 JS 执行时间
在测试 URL 的性能时，GTmetrix 会向您显示非常相似的审核。
转到“结构”选项卡，然后查找 JS 执行时间的状态。然后您将获得有关每个 JS 阶段的信息。
在下面的例子中，JS执行时间在2秒以上。
如何减少 JavaScript 执行时间
减少JS执行时间主要有以下三种方法：
- 延迟加载 JS 并删除未使用的 JS
- 延迟解析JS
- 缩小 JS。
让我们看看如何实施这些操作并解决 PageSpeed Insights 建议。
1. 延迟加载JS并删除未使用的JS
您应该延迟 JS 文件，以便在用户交互之前不会加载它们。这意味着只要没有用户点击按钮或滚动页面内容，浏览器就不会执行任何JS脚本。
您还应该删除未使用的 JS 文件。换句话说，所有无用或不包含在页面上方内容中的 JS 脚本都应该在页面渲染后加载。这是一种让浏览器只渲染必要内容而不会陷入不需要的 JS 文件的方法。
有几个插件可以帮助你延迟 JS 并删除未使用的 JS：
2.延迟解析JS
处理JS执行时间的另一个有效方法是推迟JS文件。
通过推迟 WordPress 网站上的 JavaScript，浏览器将仅在页面渲染完成时加载它们。
您可以通过不同的方式来延迟 JS 文件，包括手动方式和使用插件方式。
如果您想自己实现 defer 属性，则应先识别要 defer 的 JS 脚本，然后添加 defer 属性。
以下是 defer 属性的示例：
<script defer src=”/example-js-script”></script>如果您更喜欢使用插件，可以使用 Asset CleanUp。
3. 缩小 JS
解决 JS 问题的第三个选择是通过缩小。缩小会删除代码中包含的换行符、空格和注释。结果，代码更轻，文件大小更快。
由于缩小是一项耗时的活动，并且总是存在错过某些内容的风险，因此我们建议使用插件。
几个适用于 WordPress 的 JavaScript 缩小工具将帮助您完成工作。
其他减少 WordPress 网站 JS 执行时间的建议
作为 WordPress 用户，还有其他有用的建议需要牢记。
总的来说，当更简单的解决方案可以取代它时，您应该避免使用需要大量 JavaScript 的功能（例如插件和小部件）。例如：
- 使用静态图像而不是滑块（特别是当幻灯片位于页面顶部时）
- 避免过度使用社交网络等小部件（例如侧边栏中的社交小部件）
- 避免过度使用第三方资源（例如广告、跟踪器、个性化层、A/B 测试）。
发表回复