Note: JavaScript set-up for web and mobile are not quite the same – if you want to learn more about mobile-specific JavaScript setups, we have a separate article on that! Otherwise, continue reading to find out more about render-blocking JavaScript. Also you may with to visit our guide on how to fix render blocking CSS.

Render-blocking JavaScript is JavaScript that stops a page from loading quickly. This often happens because many JavaScript (and CSS) resources prevent webpages from being displayed until the browser that is loading it has downloaded and processed them fully. In cases where these resources aren’t actually needed to display the page’s above-the-fold content (i.e. the initial content you see on a page without having to scroll), they add unnecessary render time, hence making them render-blocking JavaScript (or for CSS resources, render-blocking CSS).

To find out what your page is loading above-the-fold, it’s worth putting your page through a tool like Google’s Pagespeed Insights. Once this is done, you can assess how you can improve your page’s speed metrics, including render-blocking JavaScript.

Render-blocking JavaScript and jQuery

One of the most common file types that unnecessarily lengthens page render times are jQuery files. Whilst they can add fancy effects like animation, the cost in loading time can sometimes out-weigh this, or not actually come into effect in the above-the-fold content. If this is the case, it is best to defer loading the jQuery file until after the page loads. This is changed in the page’s HTML, and there are lots of plugin options that can help you with this (we will cover a few below).

Alternatively, instead of deferring the loading, you can consider loading your files asynchronously. There are some differences between the way the two processes work, and it is worth reading through this article from Kinsta which explains the differences if you are interested in this other option.

If you have many jQuery files that are being used above-the-fold, it may be worth seeing if there are any alternatives that can get the job done more efficiently, perhaps by inlining JavaScript where possible. Google provides a useful example of where this may be appropriate and how to go about doing so.

One thing to note is that while jQuery files are often flagged up for render-blocking, there are also other javascripts that can be seen to do the same thing. Ultimately, the best way to eliminate your render-blocking JavaScript is to identify what is most crucial to your above-the-fold content, and work to optimise or defer (or async) what isn’t.

WordPress plugins for render-blocking JavaScript

There are lots of plugin options that can help optimise your content and eliminate render-blocking files. One of the most popular ones is W3 Total Cache, which has over 1 million active installs, and is free to download. Other good options include Async JavaScript (which, as the name suggests, specialises in JavaScript) and Autoptimize, which also works very well when combined with Async JavaScript. Alternatively, if you are considering paid options, Hummingbird from WPMUDEV is also well-rated.

 
Take our SEO Audit Challenge! We'll find at least one issue causing your website to lose traffic (and our time won't cost you a penny).

Your website

Your Email