当前位置：首页 > 文章列表 > 文章 > 前端 > WPRocketJS延迟加载优化技巧

WPRocketJS延迟加载优化技巧

2025-07-15 17:00:32 0浏览收藏

在使用WP Rocket优化网站时，"延迟JavaScript执行"功能有时会导致特定页面出现错乱。本文针对这一问题，提供了详细的解决方案，指导用户如何通过修改WP Rocket的helper插件，针对特定URL排除某些JS脚本的延迟加载，确保页面正常渲染。文章详细讲解了`wp-rocket-exclude-delay-js-per-url.php`文件的配置方法，包括如何添加需要排除的页面slug和JS脚本文件名，以及如何调整插件加载优先级。同时，也提供了排查问题的思路，例如检查条件判断是否正确，以及联系官方支持等建议。通过本文的指导，你将能够有效解决WP Rocket JS延迟加载带来的页面显示问题，提升网站用户体验。

解决WP Rocket延迟加载JS导致页面错乱的问题：特定URL排除JS脚本

本文将指导你如何在使用WP Rocket的“延迟JavaScript执行”功能时，针对特定页面排除某些JS脚本，以避免页面错乱。这通常发生在某些JS脚本必须立即加载才能保证页面正常渲染的情况下，例如轮播图或依赖特定JS库的功能。我们将以修改WP Rocket提供的helper插件为例，详细讲解如何配置，并提供一些排查问题的思路。

修改Helper插件以排除特定URL的JS脚本延迟加载

WP Rocket提供了一个名为“WP Rocket | Exclude JS scripts from Delay JS only at some URLs”的helper插件，允许用户在特定URL下排除指定的JS脚本。然而，有时按照插件说明配置后，仍然无法生效。以下是详细的配置步骤和可能的解决方案：

理解插件原理：
该插件通过rocket_delay_js_exclusions过滤器，修改WP Rocket的JS延迟加载排除列表。它首先判断当前页面是否在指定的URL列表中，如果是，则将指定的JS脚本添加到排除列表中，使其不被延迟加载。
配置wp-rocket-exclude-delay-js-per-url.php文件：
打开wp-rocket-exclude-delay-js-per-url.php文件，找到以下代码段：
```
$excluded_slugs = array(
    'tablets',
    //'another-slug',
    //'another-one',
);
```
将需要排除延迟加载的页面slug添加到$excluded_slugs数组中。Slug通常是URL中页面名称的部分。例如，如果你的平板电脑页面URL是example.com/tablets/，那么slug就是tablets。
接下来，找到以下代码段：
```
if (

    ( function_exists( 'is_page' ) && is_page( $excluded_slugs ) )
    || ( function_exists( 'is_single' ) && is_single( $excluded_slugs ) )
    || (is_front_page())
    // || (is_page_template('home-v4.php'))
    // || (is_page_template('tablet.php'))

   /*
   IF YOU NEEED TO EXCLUDE BASED ON DIFFERENT RULES
    you can replace lines 41 and 42 with different conditionals, or add more conditions, for example:
    || ( is_front_page() )
    || ( is_category() )
    ... etc
    */

) {
```
这段代码定义了在哪些页面上应用排除规则。is_page()函数用于判断当前页面是否为指定的页面。is_front_page()函数用于判断当前页面是否为首页。你可以根据需要添加更多的条件，例如is_category()用于判断当前页面是否为分类页面。
最后，找到以下代码段：
```
$exclusions[] = 'jquery.min.js';
$exclusions[] = 'slick.min.js';
//$exclusions[] = 'script2.js';
//$exclusions[] = 'anotherInline';
```
将需要排除延迟加载的JS脚本文件名添加到$exclusions数组中。确保文件名与实际的文件名完全一致。
检查条件判断：
确保is_page()函数能够正确识别你的页面。如果你的页面使用了自定义页面模板，可以尝试使用is_page_template()函数，例如：
```
|| (is_page_template('home-v4.php'))
|| (is_page_template('tablet.php'))
```
注意替换home-v4.php和tablet.php为你的实际模板文件名。
插件加载优先级：
如果你的代码是通过代码片段插件添加的，需要设置较高的优先级，确保在WP Rocket加载之前执行。将以下代码添加到你的代码片段中：
```
add_filter( 'rocket_delay_js_exclusions',  __NAMESPACE__ . '\exclude_from_delay', 999 );
```
999是一个较高的优先级，可以确保该过滤器在其他过滤器之前执行。
联系官方支持：
如果以上步骤都无法解决问题，建议联系WP Rocket官方支持，寻求专业帮助。他们可能能够诊断出更深层次的问题。