是否将WordPress本机脚本移至页面底部?

时间:2015-07-22 作者:Johan Dahl

在google page speed insights中查看我的页面时,它抱怨有一些javascript阻止了页面其余部分的加载。所讨论的javascript是原生Wordpress脚本

…-包括/js/jquery/jquery。js?版本=1.11.2

…s/jquery/jquery迁移。min.js?版本=1.2.1

如何将这些文件放在页面底部并加快加载速度?

我是否需要取消注册并重新注册,或者以其他方式?更好的是,有没有办法将本机脚本打包、缩小并移动到底部?

1 个回复
SO网友:Charles

首先,这是我使用的,对我来说,它是有效的。我并不是说我的代码是百分之百正确的,但Pingdom和GTmetrix都显示出了积极的效果,WP也很满意,所以它不会像我那样错

当需要缓存这些文件时,可以删除显示(?ver=x.x.x)的版本,因此剥离(过滤)这已经是第一步了。

我用于此的代码段如下所示:

function remove_version_parameter( $src ){
    // Check if version parameter exist
    $parts = explode( \'?ver\', $src );
    // return without version parameter
    return $parts[0];
}
// filter .js files
add_filter( \'script_loader_src\', \'remove_version_parameter\', 15, 1 );
// filter .css files
add_filter( \'style_loader_src\', \'remove_version_parameter\', 15, 1 );
添加延迟(谷歌也喜欢看到这一点)*。js文件(为了获得正的页面速度),我使用以下代码段:

Edit - 更改了以下代码以防止后端出现错误/奇怪行为。找到的源here!

if ( ! function_exists( \'add_defer_to_js\' ) && ! is_admin() ) {

    function add_defer_to_js( $url ) {

        if ( FALSE === strpos( $url, \'.js\' ) ) { 
            // not our file
            return $url;
        }

        // Must be a \', not "!
        return "$url\' defer=\'defer";
    }
    add_filter( \'clean_url\', \'add_defer_to_js\', 11, 1 );
}
添加。js文件现在进入页脚(帮助加载页面),我们可以使用以下代码段将其排队:

Edit - 额外信息:从下面的函数中删除以下内容http://yourdomain.com 正常使用。

function enqueue_scripts_in_footer() {

    wp_deregister_script( \'jquery\' );
    wp_deregister_script( \'jquery-migrate.min\' );
    wp_register_script( \'jquery\', \'http://yourdomain.com/wp-includes/js/jquery/jquery.js\', array(), false, true );
    wp_register_script( \'jquery-migrate.min\', \'http://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js\', array(), false, true );
    wp_enqueue_script( \'jquery\', \'http://yourdomain/wp-includes/js/jquery/jquery.js\', array( \'jquery\' ), false, true );
    wp_enqueue_script( \'jquery-migrate.min\', \'http://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js\', array(), false, true );
}
add_action( \'wp_enqueue_scripts\', \'enqueue_scripts_in_footer\' );;
这三个功能(在functions.php) 应该有助于更快地加载页面,正确缓存页面。

希望这有点帮助。复制您的functions.php 在添加这些函数之前,这并不是一个坏主意(将函数添加到functions.php 是imho最好的方式)。

Note: 我没有使用儿童主题,到目前为止,它与使用的插件没有冲突。我没有什么警告/提示,如果我错了就纠正我,但要排队。子主题的js文件,这应该略有不同。

结束

相关推荐

如果不显式加载jQuery,则无法加载jQuery UI

我知道关于这个问题有很多问题,但我在这里想不出我的问题。我正在尝试加载整个jQuery UI(实际上我只需要滑块),我成功了。这是我的任务:wp_enqueue_script(\'jquery-google-lib\', \'https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\', array(\'jquery\'), \'2.1.4\'); wp_enqueue_script(\'jquery-ui\', \'http