PageSpeed Insights: Get rid of render-blocking JavaScript and CSS

I think all of you know about Google PageSpeed Insights tool. Please copy your website URL in it and click «Ananalize» just right now. So, what about this post is? I really think that in your website check results there are a task: «Eliminate render-blocking JavaScript and CSS in above-the-fold content» Is it there? I […]

June 8, 2015

I think all of you know about Google PageSpeed Insights tool. Please copy your website URL in it and click «Ananalize» just right now.

So, what about this post is?

I really think that in your website check results there are a task: «Eliminate render-blocking JavaScript and CSS in above-the-fold content» Is it there?

Eliminate render-blocking JavaScript and CSS in above-the-fold content

I have noticed that this is one of the hardest tasks to fix.

So, how can we fix it in theory?

  • Combine all the JavaScript into a single file and place it just before closing </body> tag.
  • Combine all CSS and place it before JavaScript6 then choose the most inportant styles which needed for the first screen of the website and place them into website <head>.

Okay, but let’s come back to reality and to WordPress (this blog is about WordPress).

1. jQuery dependencies

In a correct WordPress theme all CSS and JavaScript files should be included via wp_head() and wp_footer() functions.

And as you know, jQuery files has dependencies, for example, if you have the fancybox.js plugin, so, it should be included after jquery.js file and can not be included before it. It means that if jQuery is in wp_footer(), then Fancybox will be in footer as well.

Moving jQuery from wp_head() to wp_footer().

It is very simple to implement that — just use WordPress default functions: wp_deregister_script(), wp_register_script(), wp_enqueue_script() and wp_enqueue_scripts action hook.

add_action('wp_enqueue_scripts', 'rudr_move_jquery_to_footer');  
 
function rudr_move_jquery_to_footer() {  
 	// unregister the jQuery at first
        wp_deregister_script('jquery');  
 
        // register to footer (the last function argument should be true)
        wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);  
 
        wp_enqueue_script('jquery');  
}

I want to pay attention to the fact, that some of js files can be moved to the footer. So, be careful with that.

2. Combining CSS in WordPress

This is really not required to combine all JavaScript files (Google PageSpeed just asks to move them to the footer), but I highly recommend you to do it with CSS stylesheets.

Do you remember the screenshot at the beginning of this post («10 CSS blocking resouces»). Why are so many?

Because of WordPress plugins of course.

For example Contact Form 7 plugin requres its own CSS stylesheet. It is not big, but one more HTTP request on the page.

What can we do with it?

  1. Copy the plugin CSS and insert it to your main CSS file.
  2. Check if there are link to images in it url('pictures/loading.gif'). Replace the URLs to the absulte ones, or move images to your theme folder.
  3. Go to the plugin settings and find out if you can turn off plugin CSS without code.
  4. If not, open your theme functions.php and:
    add_action( 'wp_print_styles', 'rudr_remove_contact_form_css', 100 );
     
    function rudr_remove_contact_form_css() {
    	wp_deregister_style( 'contact-form-7' ); // the only parameter - ID of the CSS stylesheet
    }

How can we get the CSS ids for another plugins? Simple — just open the source HTML of the page and you will see something like that:

ID of the CSS file

You can also automate these tasks with plugin JS & CSS Script Optimizer, but I do not recommend to use plugins for that purposes.

Let me know if you have any questions.

Only the best of WordPress

once a week, no spam

Comments 4

  • Hello

    I am curious how can one add more js in the footer, can you provide an example for more js, this one works just fine with one, I have around 20 :)

    • MishaAuthorJuly 28, 2016 at 06:07

      Hello,

      add_action('wp_enqueue_scripts', 'rudr_move_scripts_to_footer')
       
      function rudr_move_scripts_to_footer() {  
       	// unregister all of them first
              wp_deregister_script('script1'); 
              wp_deregister_script('script2'); 
       
       
              // register to footer (the last function argument should be true)
              wp_register_script('script1', 'script1_url', false, null, true); 
              wp_register_script('script2', 'script2_url', false, null, true);  
       
              wp_enqueue_script('script1');  
              wp_enqueue_script('script2');  
      }

      Do not forget about dependencies (the 3rd function argument).

      • What would be the 3rd function argument? I am newbie this, yet eager to understand it the best I can.

        • MishaAuthorJuly 29, 2016 at 05:07

          You should find the file in your theme that contains this information – there would be the argument.

          If you can not find it, use array('jquery').

Leave your question or feedback

phpjsHTMLCSSSQLCode
Please, enter a comment
Please, enter a name
Incorrect email