wordpress

Question

我有一个奇怪的问题。我正在尝试从我的 WordPress 主题中获得尽可能多的信息和 google 速度洞察力。然而，我所有的 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 个之间，具体取决于您安装的插件。

现在，您还提到了渲染阻塞。 "super ideal" 加载 CSS 的方法是仅加载页面加载时折叠上方可见的内容所必需的 CSS，然后再加载其余部分。实际上这更难，特别是对于有这么多插件的 WordPress 网站。

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

Answer 2

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

一些注意事项：

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

Answer 3

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

此外，用另一个library/plugin/child主题修复一个library/plugin/theme的缺点是Wordpress开发中常见的反模式。这种方法会导致页面缓慢、代码臃肿和维护地狱般的永恒。

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

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

wordpress - loading scripts via functions = issues with google page speed

javascript

css

pagespeed