Remove Render-Blocking JavaScript and CSS Above the Fold: The Quick Fix

You’ve likely seen the sentence “Remove render-blocking JavaScript and CSS above the fold” in a service as Google PageSpeed Insights when checking the performance of your pages – and you want to follow this recommendation to make your pages load faster. You’ve probably Googled what to do and ended up in a messy discussion as this one on WordPress.org’s support forum recommending the use of W3 Total Cache and Google’s own PageSpeed Service, which is now deprecated.

You’ve also most likely tried different plugins – with varying success. The problem is that all these plugins tend to solve one problem and create three more. It’s time for you to try a manual solution – one that always works.

Effectively Remove Render-Blocking JavaScript Above the Fold

Instead of making your site even heavier by adding more plugins, you can solve the problem with render-blocking JavaScript by adding (copy-paste) a few lines of code into your WordPress theme’s functions.php file.

You should do as follows:

1. Locate your theme’s functions.php file
   

   Functions.php is available via Home->public_html->wp-content->current theme in your File Manager on the server. Not all themes have a functions.php file! If yours doesn’t, you should create it yourself in a plain text editor and name it functions.php.

    

2. Download the file or choose to edit it directly on the server by clicking on the relevant button in the control panel at the top of the screen
   

   No matter whether you download or edit the file on the server, you should save a backup copy of the original first!

3. Open the file with a plain text editor
4. Copy this piece of code:

   // Defer Javascripts
   // Defer jQuery Parsing using the HTML5 defer property
   if (!(is_admin() )) {
   function defer_parsing_of_js ( $url ) {
   if ( FALSE === strpos( $url, '.js' ) ) return $url;
   if ( strpos( $url, 'jquery.js' ) ) return $url;
   // return "$url' defer ";
   return "$url' defer onload='";
   }
   add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
   }

5. Paste it after the last line in your functions.php file
6. Upload the file back to where you downloaded it from
7. Check whether your site functions properly
8. Check whether the problem with render-blocking JavaScript has been solved by using the same or similar performance check you used to begin with
9. Important!! Every time your theme updates or you switch themes, you should apply the code-fix again. To avoid that, you should create a Child Theme. If having to add the piece of code again and again doesn’t bother you, though, or you don’t feel comfortable with the child-theme-solution, you should go ahead and do it. It won’t give you any other troubles. If this option is not good enough for you either, try the solution suggested in this post on page speed optimization.

Optimize Delivery of CSS

Now that you have removed render-blocking JavaScript above the fold, you suddenly noticed that a whole lot of CSS needs to be optimized in order to benefit from it.

Optimizing CSS consists of two actions: combining (consolidating) all CSS into one file and inlining small CSS directly into HTML.

There are again two ways to do that: by using a plugin and by going in and optimizing the code yourself. While the first time I recommended to avoid the use of plugins, here it’s a good place for that kind of a solution.

The reason is simply that you need to mess much more with your code than in the case of render-blocking JavaScript making it a bad solution for everyone, who doesn’t have proper coding abilities.

Luckily, there are enough plugins out there that will help you with CSS optimization. Better WordPress Minify and Autoptimize are some of the most popular solutions, just to mention a few.

These plugins combine, minify, and inline CSS, JavaScript, and HTML. You can choose to turn off any of these settings if they don’t work for you.

Of course, just as I warned in the JavaScript-part of this post, plugins tend to create problems. When I tested BWP Minify, it didn’t do the job entirely well, leaving a few CSS resources not optimized.

Then I gave Autoptimize a try and it worked beautifully. I did however still have one not optimized CSS resource: in the cache of Autoptimize.

Is This Good Enough?

Whether the removal of all – or many – of the render-blocking JavaScript resources and the optimization of (almost) all CSS is good enough, depends on many factors and your goals. If you want a completely Google PageSpeed-compliant site, you should aim at 0 render-blocking resources.

You can either try to tweak the code yourself, ask a professional for help or continue testing plugins until you find one that works for you. You can also choose to track down the problem (most of the time it’s caused by a plugin or style element, such as icons, Google fonts or similar “extras”) and remove the programs/add-ons causing it.

Remember though that you should optimize your pages with site users in mind, not machines, and optimization should also focus on other elements, such as cache, compression, images, and server performance. What counts is the complete picture and not achieving 100 % at a single element.

Usually, if you get a combined score above 90 in a reputable service as GTMetrix, it means that you did a good job optimizing your site. In this sense removing as much as possible render-blocking JavaScript and CSS is as good as removing it all.

Please note! While the contents of this post are still current and regularly updated, a new, more comprehensive post on optimization of render-blocking JavaScript and CSS is now available. It helps you optimize both above-the-fold and all other scripts for best results.