Twitter Bootstrap Question posted in

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

I’ve got a weird issue. I’m trying to get as much as possible from my WordPress theme & google speed insight. Yet all of my JS scripts are being mentioned as the one which block rendering the page. This is the way i call scripts via 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' );

What’s wrong with this approach? I thought its ok and done according to best practices. ANd yet = the page is mentioned as slow.. thanks!

Tags:

3

Answers


  1. 0

    Just a note, you don’t need to wp_register_script and wp_enqueue_script unless you’re purposely only enqueueing scripts under certain conditions, otherwise you can replace

    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' );

    with just:

    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 );

    Also, a personal preference of mine is that if I need to call a function multiple times, I like to define it as a variable, so it’s not constantly being invoked, such as:

    $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 );

    Lastly, since you have sooo many, you may consider just looping through them to make it a bit easier at a glance:

    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] );
    }
}

    Now to the source of your issue – you have so many stylesheets. For each one, your site needs to make an HTTP request to the requested resource and load it. Since you’re already baking the CSS into your theme (be careful with this, it makes adjusting to future versions of libraries more difficult), you could just combine them all into a single minified CSS file manually or with a preprocessor.

    You could also look at plugins like Autoptimize that will combine and cache all your stylesheets for you. What it will do is fetch all the content of them and combine them into as few .css files as it can, typically between 1 and 3, depending on the plugins you have installed.

    Now, you also mention render-blocking. The “super ideal” way to load CSS is to only load the CSS that’s necessary for content that’s visible above the fold when the page loads, and load the rest later. In practice this is more difficult, especially for WordPress sites with so many plugins.

    I’d start with weighing whether you really need all those CSS libraries, and then combining and caching them.

    Login or Signup to reply.
  2. 0

    Enqueue-ing scripts is the right way to load them into WordPress. But you’re missing the point of the warning. Render blocking CSS and JS are files that need to be completely downloaded before above the fold content can render properly. If you want to reduce / eliminate render blocking issues then you can inline critical CSS (for above the fold content), combine other CSS into as few files as possible, and defer any JS that isn’t needed for above the fold content.

    A few notes:

    • I personally don’t recommend deferring jquery because so many other
      scripts often depend on it.
    • If you’re open to using plugins, there
      are some that will minify and combine your CSS and JS files for you.
      I’ve had good luck with Autoptimize by Frank Goosens.
    • If Revolution Slider is part of your above the fold content, it’s definitely going
      to be part of the render blocking issue. I’ve moved away from using it on homepages for that reason.
    Login or Signup to reply.
  3. 0

    I would also suggest vetting if all those external files are needed on every page.
    For example, it is unlikely, that every page in your site displays a google map. Google maps script can be included only where relevant, thus speeding up other pages.

    Besides, it is a common anti-pattern in WordPress development to fix the shortcomings of one library/plugin/theme with another library/plugin/child theme. Such an approach leads to sluggish pages, bloated code and an eternity in maintenance hell.

    Check do you really need all those scripts? Perhaps some of them can be replaced with a few lines of js/css code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search