wordpress - 通过函数加载脚本 = 谷歌页面速度问题

Question

我有一个奇怪的问题。我试图从我的 WordPress 主题和谷歌速度洞察力中获得尽可能多的信息。然而，我的所有 JS 脚本都被提及为阻止渲染页面的脚本。这是我通过functions.php调用脚本的方式

function custom_styles() {     
    wp_register_style( 'bootstrap',get_stylesheet_directory_uri().'/css/bootstrap.min.css', false, false );
    wp_enqueue_style( 'bootstrap' );

    wp_register_style( 'bootstraptheme',get_stylesheet_directory_uri().'/css/bootstrap-theme.min.css', false, false );
    wp_enqueue_style( 'bootstraptheme' );

    wp_register_style( 'fontawesome',get_stylesheet_directory_uri().'/css/font-awesome.min.css', false, false );
    wp_enqueue_style( 'fontawesome' );

    wp_register_style( 'defaultstyle',get_stylesheet_directory_uri().'/css/default/style.css', false, false );
    wp_enqueue_style( 'defaultstyle' );   

    wp_register_style( 'responsivestyle',get_stylesheet_directory_uri().'/css/responsive/responsive.css', false, false );
    wp_enqueue_style( 'responsivestyle' ); 

    wp_register_style( 'languages',get_stylesheet_directory_uri().'/css/languages.min.css', false, false );
    wp_enqueue_style( 'languages' );

    wp_register_style( 'flags',get_stylesheet_directory_uri().'/css/flags.min.css', false, false );
    wp_enqueue_style( 'flags' );

    wp_register_style( 'owlcarousel',get_stylesheet_directory_uri().'/css/owl.carousel.min.css', false, false );
    wp_enqueue_style( 'owlcarousel' );

    wp_register_style( 'owltheme',get_stylesheet_directory_uri().'/css/owl.theme.min.css', false, false );
    wp_enqueue_style( 'owltheme' );

    wp_register_style( 'flexslider',get_stylesheet_directory_uri().'/vendors/flexslider/flexslider.css', false, false );
    wp_enqueue_style( 'flexslider' );

    wp_register_style( 'datepicker',get_stylesheet_directory_uri().'/vendors/bootstrap-datepicker/css/datepicker3.css', false, false );
    wp_enqueue_style( 'datepicker' );

    wp_register_style( 'settings',get_stylesheet_directory_uri().'/vendors/rs-plugin/css/settings.css', false, false );
    wp_enqueue_style( 'settings' );
}
add_action( 'wp_enqueue_scripts', 'custom_styles' );


function pr_scripts_styles() {

    if( !is_admin()){
     wp_deregister_script('jquery');
     wp_register_script('jquery',get_stylesheet_directory_uri().'/js/jquery.min.js', false);
     wp_enqueue_script('jquery');
    }

    wp_deregister_script('twitter-indent', '//platform.twitter.com/widgets.js');

    /*   REGISTER ALL JS FOR SITE */
    wp_register_script('vps_bootstrap',get_stylesheet_directory_uri().'/js/bootstrap.min.js');
    wp_register_script('vps_cycle',get_stylesheet_directory_uri().'/js/jquery.cycle.all.min.js');    
    wp_register_script('vps_owl',get_stylesheet_directory_uri().'/js/owl.carousel.min.js');
    wp_register_script('vps_counterup',get_stylesheet_directory_uri().'/vendors/counterup/jquery.counterup.min.js');
    wp_register_script('vps_theme',get_stylesheet_directory_uri().'/js/theme.js');      
    wp_register_script('vps_waypoints',get_stylesheet_directory_uri().'/vendors/waypoints/waypoints.min.js');
    wp_register_script('vps_datepicker',get_stylesheet_directory_uri().'/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js');
    wp_register_script('vps_flexslider',get_stylesheet_directory_uri().'/js/jquery.flexslider-min.js');
    wp_register_script('vps_themepunch1',get_stylesheet_directory_uri().'/vendors/rs-plugin/js/jquery.themepunch.tools.min.js');
    wp_register_script('vps_themepunch2',get_stylesheet_directory_uri().'/vendors/rs-plugin/js/jquery.themepunch.revolution.min.js');
    wp_register_script('vps_revs',get_stylesheet_directory_uri().'/js/revs.js');
    wp_register_script('google-map-api',get_stylesheet_directory_uri().'/js/gmaps-api.min.js');    
    wp_register_script('vps_gmap',get_stylesheet_directory_uri().'/js/google-map.js');

    /*   CALL ALL JS AND SCRIPTS FOR SITE */
    wp_enqueue_script('vps_bootstrap');
    wp_enqueue_script('vps_cycle');
    wp_enqueue_script('vps_owl');
    wp_enqueue_script('vps_counterup');
    wp_enqueue_script('vps_waypoints');
    wp_enqueue_script('vps_datepicker');
    wp_enqueue_script('vps_flexslider');
    wp_enqueue_script('vps_themepunch1');
    wp_enqueue_script('vps_themepunch2');
    wp_enqueue_script('vps_revs');
    wp_enqueue_script('google-map-api');
    wp_enqueue_script('vps_gmap');
    wp_enqueue_script('vps_theme');

}
add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );

这种方法有什么问题？我认为它可以并根据最佳实践完成。还 = 该页面被提及为缓慢.. 谢谢！

Answer 1

请注意，您不需要wp_register_script 和wp_enqueue_script，除非您故意只在某些条件下将脚本排入队列，否则您可以替换

wp_register_style( 'bootstrap',get_stylesheet_directory_uri().'/css/bootstrap.min.css', false, false );
wp_enqueue_style( 'bootstrap' );

wp_register_style( 'fontawesome',get_stylesheet_directory_uri().'/css/font-awesome.min.css', false, false );
wp_enqueue_style( 'fontawesome' );

只需：

wp_enqueue_style( 'bootstrap',get_stylesheet_directory_uri().'/css/bootstrap.min.css', false, false );
wp_enqueue_style( 'fontawesome',get_stylesheet_directory_uri().'/css/font-awesome.min.css', false, false );

另外，我个人的一个偏好是，如果我需要多次调用一个函数，我喜欢将它定义为一个变量，这样就不会一直被调用，例如：

$stylesheet_directory_uri = get_stylesheet_directory_uri();

wp_enqueue_style( 'bootstrap', $stylesheet_directory_uri.'/css/bootstrap.min.css', false, false );
wp_enqueue_style( 'fontawesome', $stylesheet_directory_uri.'/css/font-awesome.min.css', false, false );

最后，既然你有这么多，你可以考虑只循环浏览它们以使其更容易一目了然：

function custom_styles(){
    $uri = get_stylesheet_directory_uri();

    $stylesheets = array(
        array( 'bootstrap', '/css/bootstrap.min.css' ),
        array( 'fontawesome', '/css/font-awesome.min.css' ),
        // …
        array( 'settings', '/vendors/rs-plugin/css/settings.css' )
    );

    foreach( $stylesheets as $stylesheet ){
        wp_enqueue_style( $stylesheet[0], $uri.$stylesheet[1] );
    }
}

现在回到问题的根源 - 你有这么多样式表。对于每一个，您的站点都需要向请求的资源发出 HTTP 请求并加载它。由于您已经将 CSS 烘焙到您的主题中（注意这一点，这会使适应未来版本的库变得更加困难），您可以手动或使用预处理器将它们全部合并到一个缩小的 CSS 文件中。

您还可以查看像Autoptimize 这样的插件，它们将为您组合和缓存所有样式表。它将获取它们的所有内容并将它们组合成尽可能少的.css 文件，通常在 1 到 3 个之间，具体取决于您安装的插件。

现在，您还提到了渲染阻塞。加载 CSS 的“超级理想”方式是只加载页面加载时在首屏可见的内容所必需的 CSS，然后再加载其余部分。在实践中，这更加困难，尤其是对于具有如此多插件的 WordPress 网站。

我会先权衡您是否真的需要所有这些 CSS 库，然后将它们组合和缓存。

Answer 2

排队脚本是将它们加载到 WordPress 中的正确方法。但是你错过了警告的重点。渲染阻塞 CSS 和 JS 是需要完全下载的文件，才能正确渲染首屏内容。如果您想减少/消除渲染阻塞问题，那么您可以内联关键 CSS（用于首屏内容），将其他 CSS 组合到尽可能少的文件中，并推迟首屏内容不需要的任何 JS。

几点说明：

• 我个人不建议推迟 jquery，因为还有很多其他的 脚本通常依赖于它。
• 如果您愿意使用插件，则 有一些会为您缩小和合并您的 CSS 和 JS 文件。 我对 Frank Goosens 的 Autooptimize 很满意。
• 如果 Revolution Slider 是您的首屏内容的一部分，它肯定会 成为渲染阻塞问题的一部分。出于这个原因，我不再在主页上使用它。

Answer 3

我还建议审查是否每个页面都需要所有这些外部文件。 例如，您网站中的每个页面都不太可能显示谷歌地图。 Google 地图脚本只能包含在相关的地方，从而加快其他页面的速度。

此外，用另一个库/插件/子主题来修复一个库/插件/主题的缺点是 WordPress 开发中常见的反模式。这种方法会导致页面迟缓、代码臃肿以及永远处于维护地狱中。

检查您真的需要所有这些脚本吗？也许其中一些可以用几行 js/css 代码代替。