Eliminate Render-Blocking JavaScript And CSS In Above-The-Fold Content

  • Posted on: 31 October 2014
  • By: davis

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

If you're a frequent user of Google's PageSpeed Insights or GTMetrix, you've probably come across this recommendation many times. 

So why does it happen? If you're using Wordpress and experiencing frequent slowdowns on your website, try running your page through Google's PageSpeed website. If you're like most Wordpress developers, you've already installed WP Smush.it (right?). Your most probable cause of slowdown is render-blocking JavaScript and CSS in above-the-fold content. Most scripts in Wordpress run in the header by default. I've gathered a couple solutions for this problem.

Before we do anything, you'll want to create a baseline of your site's speed. Head to PageSpeed and GTMetrix. Run your site through each test and note the scores. For PageSpeed, make sure you write down the Mobile and Desktop score! You can compare your results after this article!

If you've got a Wordpress installation, you probably have a caching engine installed. I use and endorse W3TC (Total Cache). Under "Minify" settings, go to your JS settings. 

Check "Enable"

Change the Embed type: to Non-blocking using "async" (note: this will break some plugins. Don't make this change without being ready for possible script troubleshooting)

Check the two boxes.

This will minify the JS, and defer the loading process ansychronously (which will help our load times). However, you will notice that PageSpeed still suggest removing scripts from your header. To accomplish that, we're going to get a little more advanced. Please do not attempt the following changes unless you're willing to spend time working on it. That being said, let's get started.

Wordpress looks to register Javascript dependencies via wp_default_scripts() in /wp-includes/script-loader.php.

/**
 * Plugin Name: Enqueue jQuery in Footer
 * Version:     0.0.1
 * Plugin URI:  http://wpgrafie.de/836/
 * Description: Prints jQuery in footer on front-end.
 * Author:      Dominik Schilling
 * Author URI:  http://wpgrafie.de/
 */
function ds_enqueue_jquery_in_footer( &$scripts ) {
	 
	if ( ! is_admin() )
		$scripts->add_data( 'jquery', 'group', 1 );
}
add_action( 'wp_default_scripts', 'ds_enqueue_jquery_in_footer' );

Copy and paste the above code. 

You need script-loader.php, located in wp-includes. Download a copy of scripts-loader.php and make a copy. Name this copy script-loader-bak.php and leavec it untouched. There is a very good chance this tweak will break older plugins. You MUST have a backup to restore this mistake. 

Openscript-loader.php and scroll to the bottom. Select the following line: 

add_action( 'wp_default_scripts', 'wp_default_scripts' );

Replace with the copy pasted code. Save the file.

Upload the new script-loader.php to your server. Ensure you keep a copy of script-loader-bak.php in case plugins begin acting oddly. 

After taking both steps in this article (and my WP Smush.it article), try running your site through PageSpeed and GTMetrix. Compare your scores, and take special note of scripts still being loaded in a blocking manner. I will write a future tutorial on dealing with stubborn plugins.