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

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

Post Views: 402