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 […]

  /   12

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
        // register to footer (the last function argument should be true)
        wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);  

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.

Misha Rudrastyh
About the author Misha Rudrastyh

Passionate about WordPress and snowboarding, creating websites for over 10 years! Let's work together — just contact me.

If you are a developer too, subscribe to my facebook page.

Comments 12

  • 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 :)

    • Hello,

      add_action('wp_enqueue_scripts', 'rudr_move_scripts_to_footer')
      function rudr_move_scripts_to_footer() {  
       	// unregister all of them first
              // 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);  

      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.

        • 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').

  • Found this Article via google and very useful – thank you for that. But don’t know how to put css files into the footer. For my example:,700

    Is there a chance? cause pagespeed insights tells me that both are render-blocking css-ressources.

    • Hello,

      I do not recommend to put CSS into footer, there are no advantages, but users will see your loading website without CSS at all for a couple seconds.

      • Yes, i know. But my customer has to see it, so he can learn. ;) I am not focused on doing a 100-point-perfect score on Googles-Pagespeed Tool, cause i know about what’s good for the user-exp and whats really needed. ;) But of you know any kind of good way about this, let me know… ;)

      • When I made my 100, I just included the CSS into HTML with <style> tag :)

  • Hi,

    I am sorry I am not a wordpress expert, so what file I should edit and add this function , it should be functions.php , footer.php, header.php (I understand that it will theme file .php).

    And the second should I remove something after implementation, I mean those Jquery files are already in head as you described (I have three Jquery files), so aren’t they registered to head already ? do I need to remove some lines from any file to get rid those from a head ?

    I would be glad if you could answer me ;)


    • Hi,

      You can add it to your theme functions.php file. You shouldn’t remove anything if your theme made correctly, wp_deregister_script() function will remove your jQuery files from head :)

    • Thanks, I finally figured it out :) , now I don’t have rendering problems with those anymore ;). Frankly last two Jquery files have reverse order in the footer, but I haven’t noticed any site problems (probably not related).

      But what I really wanted to check is some blocking and waiting times that really delay loading website (at least according test gtmetrix and others test sites). Unfortunately this step doesn’t removed those blocking times (both are only during first time, and after some time till next test about an hour).

      Since I have CDN I have the some issue called “Use cookie-free domains” (GTmetrix), and those files especially images has a long time of loading (blocking and waiting in gtmetrix) and those Jquery files also included ;).

      So I would like to transfer Those Jquery files to the subdomain and check if I can remove those times.

      And here is my question do you know other wordpress function which can be used instead of ” wp_register_script ” where I can put absolute path to subdomain or how write absolute path in this function ?


    • You can use absolute paths in wp_register_script() too :)

      wp_register_script('script1', '', ...

Comments are closed.
If you need my personal help, please contact me. Contact me