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 wish to visit our guide on how to remove render-blocking CSS.
Contents
What is Render-blocking Javascript?
If your website is painfully slow to load, it could be suffering from a nasty bout of render-blocking javascript. In simple terms, this refers to Javascript that is, for some, reason preventing the page from loading quickly or in full. Whilst JavaScript works wonders for adding visually appealing elements on your website, it can also be its downfall. Many JavaScript (and CSS) resources prevent webpages from being displayed until the browser that is loading it has downloaded and processed them fully. This can take a long time, detracting from user experience and having a detrimental effect on your page rankings.
To solve the problem, your webmaster will need to identify the offending JavaScript. 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 for WordPress 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.
Where next, Google Page Speed crusader?
If you’re looking at improving your website’s load speed, don’t ignore our guide on how to fix render-blocking CSS.
Make sure you also check out this article that covers all the factors that affect website load speed and how you can optimise them.
Happy optimising!