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之间，具体取决于安装的插件。

现在，您还提到了渲染块。加载CSS的“超级理想”方法是仅加载页面加载时在折叠上方可见的内容所必需的CSS，然后再加载其余部分。实际上，这更加困难，尤其是对于具有这么多插件的WordPress网站而言。

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

Answer 2

排队脚本是将其加载到WordPress的正确方法。但是您错过了警告的重点。渲染阻止CSS和JS是需要完全下载的文件，然后折叠内容才能正确渲染。如果要减少/消除渲染阻塞问题，则可以内联关键CSS（用于折叠内容之上），将其他CSS合并到尽可能少的文件中，并推迟折叠内容之上不需要的任何JS。 / p>

一些注意事项：

我个人不建议推迟jquery，因为还有很多其他问题脚本通常依赖于此。
如果您愿意使用插件，可以在那里是一些可以最小化并组合您的CSS和JS文件的工具。我对Frank Goosens的Autoptimize感到很幸运。
如果Revolution Slider是您首屈一指的内容的一部分，那肯定会成为渲染阻止问题的一部分。因此，我已不再在首页上使用它。

Answer 3

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

此外，它是Wordpress开发中常见的反模式，用于修复一个库/插件/主题与另一个库/插件/子主题的缺点。这样的方法会导致页面呆滞，代码肿，并且永远无法维护。

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

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

3 个答案:

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

3 个答案:

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