6种简便的方法来减少WordPress中的JavaScript执行时间

没有什么比缓慢加载页面更沮丧的网站访问者了。这样做的原因很多，其中一个是JavaScript执行时间过多。

当JavaScript花费太长时间来处理时，它会延迟所有内容 - 导致页面负载缓慢，用户体验差，甚至伤害您的SEO排名。

但是不用担心。优化JavaScript并不一定要复杂。

在本指南中，我们将为您提供简单，有效的方法，以减少WordPress中的JavaScript执行时间。

无论您是初学者还是高级WordPress用户，这些简单的方法都将有助于加快您的网站，改善核心网络生命力并提高您的SEO性能。

让我们潜入！

什么是JavaScript执行时间？

JavaScript执行时间是指Web浏览器在网页上处理和执行JavaScript代码所需的时间。

每次用户加载站点时，浏览器都必须解析，编译和执行JavaScript脚本。如果这些脚本过于复杂，不优化或渲染障碍，它们可能会减慢页面性能，从而导致更高的负载时间和差的用户体验。

JavaScript执行时间对性能有什么影响？

这是JavaScript执行时间如何影响性能的细分：

1。阻止主线程

想想一条狭窄的隧道，一次只能一辆汽车可以通过。只要车辆内部徘徊太长，交通就会顺利移动。

浏览器以相同的方式工作 - 它们依靠一个主线程来管理加载内容，渲染页面和处理用户交互之类的任务。

当JavaScript运行时，它在此线程上需要优先。如果执行时间太长，那就像是一辆卡车在隧道中停滞不前，举起所有其他汽车。此延迟阻止浏览器处理其他任务，从而导致页面负载缓慢和无反应性交互。

2。延迟渲染

当您访问网站时，您希望内容会迅速出现在屏幕上。此过程被称为“绘画”内容，可确保使用平稳的用户体验。

但是，当JavaScript执行时间太长时，它会延迟此初始渲染，使用户盯着空白屏幕，这会导致用户体验差。

3。第一个输入延迟（FID）

它跟踪网站响应用户的第一个交互所需的时间，例如单击按钮。延迟的FID会给用户带来缓慢的体验，这令人沮丧。

增加的JavaScript执行时间对第一个输入延迟（FID）有直接影响。当JavaScript被超载时，网站无法立即响应用户输入，使其显得无反应并提供差的用户体验。

4。记忆消耗

与任何其他程序一样，JavaScript代码需要内存运行。复杂或优化的代码可以吃大量记忆。

结果，这可能会减慢浏览器并可能导致崩溃，尤其是在存储器很少的移动设备上。

5。对SEO产生负面影响

排名搜索结果时，诸如Google之类的搜索引擎使用页面速度。

缓慢的JavaScript执行可以降低页面性能，并影响搜索结果中网站的排名。

简而言之，延迟的JavaScript执行减慢了渲染，增加了FID，甚至可能超载浏览器。这一切都加入了可怕的用户体验，这可能会导致访问者放弃您的网站。

如何测量JavaScript执行时间？

要优化JavaScript执行时间，您首先需要准确地测量它。幸运的是，有几种可以监视JavaScript性能的工具和技术，并确定影响WordPress网站速度的问题。

用PagesSpeed Insights测量JS执行时间

Google PagesPeed Insights是Google的免费工具，可衡量网页速度并提供优化的想法。

这是使用它来测量JavaScript执行时间的方法：

访问PagesPeed Insights网站或使用PagesPeed Insights Chrome扩展。

在这里，输入您要分析的网站URL，然后单击“分析”按钮。

PagesPeed Insights将提供包含许多性能指标的报告，包括JavaScript执行时间。

如果您对减少JavaScript执行时间的警告，请遵循建议。

用GTMetrix测量JS执行时间

GTMetrix是测量网页性能的另一种常见工具，其中包括JavaScript执行时间。

访问GTMetrix网站，输入网页的URL，然后单击“立即测试”选项。

加载一段时间后，GTMETRIX将生成具有性能指标的完整报告，包括JavaScript执行时间。

您可以使用GTMetrix中的这些见解来优化JavaScript代码并提高整体网页性能。

如何减少JavaScript执行时间

这是减少JavaScript执行时间，使您的网站更快并改善用户体验的一些简单方法。

1。避免肿的主题/插件

在WordPress中慢速JavaScript执行的最常见原因之一是主题和插件过多。

尽管功能丰富的主题和插件似乎很吸引人，但它们通常以性能为代价。

每个其他脚本，动画或功能都会增加您的网站的加载时间，从而导致执行速度较慢，CPU使用率较高以及用户体验差。

为什么肿的主题和插件是一个问题？

• 过多的代码执行：重型主题和编码不佳的插件需要更多资源，从而增加JavaScript执行时间。
• 额外的HTTP请求：某些主题和插件加载其他CSS，JavaScript和字体，即使您不使用它们。
• 增加的服务器负载：太多的活动插件会减慢您的服务器响应时间，从而影响SEO和用户体验。

如何选择轻巧的替代品？

• 使用性能优化的主题：坚持快速，最小的主题，例如GeneratePress，Astra或Kadence，将速度优先考虑。
• 审核您的插件：定期查看插件，并停用不再需要的任何内容。如果插件具有很多JavaScript，请尝试使用轻量级替代方案。
• 仅使用您需要的内容：避免为类似功能安装多个插件。而是选择最小化脚本过载的多合一解决方案。
• 限制外部脚本：避免使用包含不需要的第三方脚本，字体或跟踪代码的主题和插件。

通过保持WordPress设置优化，您将减少JavaScript执行时间，加快WordPress网站并增强SEO排名和用户体验。

2。延迟JS并删除未使用的JS

您应该延迟JS文件，以便在用户交互之前将它们加载。这意味着除非用户单击按钮或浏览页面内容，否则浏览器将不会运行任何JS脚本。

大多数优化插件，例如FlyingPress，WP Rocket，Perfmatters，Flying脚本等，都可以执行此操作。但是，每个人都这样做不同，因此请阅读有关如何添加文件（按文件名，关键字或自动添加的插件文档，就像WP Rocket一样）。

例如，如果您使用的是WP Rocket插件，则可以利用其延迟JavaScript执行功能。

只需导航到文件优化选项卡，然后检查延迟JavaScript执行选项。该插件将自动延迟加载JS文件直至用户交互。

或者，如果您使用的是Perfmatters，只需转到Perfmatters插件设置即可。单击JavaScript菜单，然后在延迟部分下的延迟JavaScript上切换。

此外，您应该删除所有未使用的JS文件。换句话说，只有在显示页面显示后，应加载所有不必要或不出现在上页内容中的JS脚本。

它允许浏览器仅渲染必要的材料，而不是被不必要的JS文件陷入困境。

3。DEFERJS

减少JS执行时间的另一种有效方法是延迟JS文件。

通过在您的WordPress网站上推迟JavaScript，浏览器仅在渲染页面时加载它。

您可以手动和借助插件的帮助。

如果您想手动使用延期属性，则应首先在添加延期属性之前识别JS脚本。

这是延期属性的示例：

如果您喜欢使用插件，则可以从WP Rocket中进行自动化，飞行压力，资产清理等。

例如，像延迟JS一样，WP Rocket还提供负载JavaScript延期功能。

在“文件优化”选项卡中，您可以加载JavaScript延期延期并限制任何特定的JS文件被延期。只需单击几下，您就可以实现重要的Web性能优化技术！

4。缩小JS

减少JavaScript执行时间的最简单但最有效的方法之一是缩小。

缩小JavaScript意味着删除不必影响其功能的不必要的字符（例如空格，线路断裂和评论）。结果？较小的文件大小，更快的下载速度和提高的页面速度。

有几种可用的JavaScript Minification工具可以帮助您完成工作。

对于无麻烦的方法，请使用诸如AutoPtimize，WP火箭，快速速度缩小，飞行压力等的插件。

只需安装您喜欢的插件，启用JavaScript缩小，然后让工具完成工作。

5。在特定页面上卸载JavaScript

并非每个脚本都需要在WordPress网站的每个页面上运行。如果是这样，它可以增加执行时间，减慢性能并对用户体验产生负面影响。

例如：

• 在每个页面上接触表单脚本加载 - 即使没有表格。
• WooCommerce脚本在不需要的博客文章上运行。
• 滑块脚本出现在没有滑块的文本页面上。

每个不需要的脚本都会增加JavaScript执行工作负载，从而减慢页面渲染。

解决此问题的最简单解决方案之一是在不需要的页面上禁用不需要的脚本。

诸如资产清理或完善之类的插件允许您每页，发布类型或类别禁用JavaScript，而无需修改代码。

或者，如果您对代码感到满意，请在functions.php文件中使用wp_deque_script（）来防止不必要的脚本加载。

function remove_unnecessary_js() { if (!is_page('contact')) { wp_dequeue_script('contact-form-script'); } } add_action('wp_enqueue_scripts', 'remove_unnecessary_js');

6。主持人本地第三方JavaScript

字体，分析脚本和跟踪代码是通常从外部来源加载的第三方JavaScript文件。尽管这些脚本提供了有用的功能，但由于延迟的外部请求，网络延迟和服务器响应时间，它们可以大大增加JavaScript执行时间。

通过本地托管第三方JavaScript文件，您可以提高负载时间，减少对外部服务器的依赖并提高整体站点性能。

要在本地托管第三方JavaScript，请访问第三方提供商的网站，然后下载所需的JavaScript文件（例如Google字体，Recaptcha或Analytics Scripts）。

现在，使用FTP将文件存储在您的/wp-content/uploads/ or /wp-includes/js/ Directory中。

接下来，修改主题的function.php或在wp_enqueue_script（）中加入脚本以指向本地版本，而不是外部URL。

function load_local_script() { wp_enqueue_script('local-js', get_template_directory_uri() . '/js/script-name.js', array(), null, true); } add_action('wp_enqueue_scripts', 'load_local_script');

使用诸如WP Rocket之类的插件或自动达到限制来缩小并缓存本地托管的JavaScript文件，以更快地执行。

立即开始减少JS执行时间

缓慢的WordPress网站会挫败访客并损害您的SEO排名。罪魁祸首之一？ JavaScript执行时间过多。当JavaScript花费太长时间进行处理时，它会阻止主线程，延迟渲染，增加第一个输入延迟（FID）并对性能产生负面影响。

本指南将向您展示减少JavaScript执行时间在WordPress中的简便方法，从而可以提高站点速度和用户体验。关键策略包括：

• 避免使用肿的主题和插件，以防止不必要的代码执行。
• 延迟并删除不需要的JavaScript，以防止非必需的脚本减慢您的页面。
• 延迟JavaScript执行，以允许浏览器首先优先考虑关键内容。
• 缩小JavaScript文件以减少文件大小并加快执行速度。
• 从特定页面卸载未使用的JavaScript，以消除不必要的脚本。
• 主机在本地第三方JavaScript，以消除由外部服务器请求引起的延迟。

通过实施这些JavaScript优化技术，您将为访问者提供改进的核心Web Vitals，高页面速度和无缝的用户体验。

有关更多信息，请查看这些其他有用的资源：

• 10个最佳WordPress缓存插件（免费和优质选项）
• 如何轻松修复WordPress中的利用浏览器缓存
• WP Rocket评论：真的值得付款吗？
• Perfmatters值得吗？深入评论
• 氮气评论：最佳速度工具还是黑色帽子SEO？

最后，在Facebook和X（以前是Twitter）上关注我们，以了解最新的WordPress和与博客有关的文章。