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?

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?

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.

# WordPress

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter