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

问题描述 投票：1回答：3

我有一个奇怪的问题。我正试图尽可能多地从我的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' );

这种方法有什么问题？我认为没问题，按照最佳做法完成。尚未=该页面被提及为慢..谢谢！

javascript css wordpress pagespeed
3个回答
3
投票

只需注意，你不需要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库，然后组合和缓存它们。

1
投票

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

几点说明：

  • 我个人不建议推迟jquery，因为许多其他脚本经常依赖它。
  • 如果您愿意使用插件，那么有一些可以为您缩小和组合CSS和JS文件。我和Frank Goosens一起享受Autoptimize的好运。
  • 如果Revolution Slider是你的折叠内容的一部分，它肯定会成为渲染阻止问题的一部分。出于这个原因，我已经不再在主页上使用它了。
1
投票

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

此外，它是Wordpress开发中常见的反模式，用一个库/插件/子主题修复一个库/插件/主题的缺点。这种方法导致页面缓慢，代码膨胀，维护地狱永恒。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.