Eliminate render blocking JavaScript and CSS in above the fold content

While experimenting with web page speed it happens to be that most people have problems with eliminating render blocking JavaScript and CSS in above the fold content. However there are a lot of WordPress plugins promising that they can be useful to help improving web speed and render blocking CSS above the fold and prioritize visible content. One of the plugins we reviewed where “Async JavaScript” Async JavaScript adds a ‘async’ or ‘defer’ attribute to scripts loaded via wp_enqueue_script. This plugin does a good job, however we have been working on a WordPress theme optimized for web speed and it came to our attention that there is no need for a plugin like this one and the solution is quite simple.

When testing with Google’s PageSpeed Insights to test and help improving web page speed one of the first things besides gzip compression and leverage browser caching is async javascript. However the name may be misleading, it is not only async but also defer javascript. The best option is to defer javascript and not using async, it depends on the theme and your needs, in most cases you want to defer javascript and async jQuery.

What you can do to defer (or async) javascript is adding a piece of code to your functions.php which will defer all javascript, try to add this to your functions.php file:

As you can see in the comment you have some control over defer and async, we choose to defer. The output will be something like this:  <script type=’text/javascript’ defer=”defer” src=’https://www.cloudzola.com/wp-includes/js/jquery/jquery.js?ver=1.12.4′></script>

Second Option

Be free to replace defer with async to fit this snippet to your needs, and try testing with PageSpeed Insights again and see the difference. Look at the source of your web page to see if the attributes are added.

Load jQuery in the footer

Yes it is possible to load jQuery in the footer but not recommendable if your theme has great dependency’s or if other script require jQuery to  be loaded in the header, for our Speed Optimized WordPress Theme it is no problem to load jQuery in the footer feel free to try our code snippet and add it to functions.php, you can search the internet for days and compare different solutions like unregistering and registering the jQuery enqueue methods. Don’t worry we have done our homework and try to add this code snippet to your functions.php:

It is recommended for large and busy websites to load jQuery in the footer and in combination with the first code snippet to defer or async javascript it will be deferred and will not show up in speed tests.

For CSS the best practice is to inline the most important parts so your web page can render and use async or defer for the rest of the your CSS. We will spend an article about this in the future. We managed to use a minimal amount of CSS in style.css and inlined it compressed in the header. You should not inline big stylesheets!

The best practice is combining style sheets and only load critical CSS first above the fold to correctly start rendering your page.

More speed tests are available and can help you pointing out bottlenecks like: GTmetrix wich also show results of  YSlow from Yahoo.

This is a screenshot of an 404 error page we are working on:

Use our code snippets at your own risk, hopefully it is useful to you.

More useful article to improve web page speed