Websites use JavaScript (JS) to add more functionality. For example, with JS you can add and remove elements, handle user interaction such as clicks, and change the properties of elements. WordPress also uses JS (most notably jQuery.js) as part of its core software. Most themes and plugins also add JS files to a website. When loading a web page, WordPress must read each JS file before displaying the page. The reading of JS blocks other resources from loading. With most pages not requiring JS until after the page fully loads, it makes sense to defer the loading of JS. Read on to learn how to defer JavaScript for faster WordPress websites.

Test website speed

When designing websites, it is important to produce the fastest loading experience for your visitors. For most websites, this means getting the first screenful of content (also known as above the fold) to visitors as quickly as possible. A goal for most web developers is to get the first screen loaded within two seconds. We use tools like GTmetrix and PageSpeed Insights to measure how fast a web page loads.

Async vs Defer

There are two methods used to download JS files. The first (and default) method is to use the async attribute. This tells browsers to load files as it finds them in the web page coding. Most times, JS loads in the head or the foot of the web page. Either way, the JS file must completely load before displaying the web page.

The second method is to defer JavaScript using the defer attribute. Using defer, tells the browser to load and display the web page first before loading the JS files. Deferring the loading of JS speeds up the loading of the web page.

There are two things to be aware of when deferring the loading of JS files. First, you must manually tell the browser to defer the JS files. Second, WordPress relies on some JS files (especially jQuery.js) for the operation of its software. Carefully selecting and testing which JS files to defer is crucial if you want the ensure that critical components of your website are available for visitors.

How to defer JavaScript

Manually deferring the loading of JS files is tedious and requires careful editing of core files. Making an error may make your website inoperable. Thankfully, there is a free WordPress plugin available that makes deferring JS files easy. Use the Async JavaScript plugin by Frank Goossens on your websites (Frank is also the author of the exceedingly popular Autoptimize plugin). With the Async JavaScript plugin installed and activated, it is a simple matter of telling the plugin which files to defer and which to async.

Async JavaScript settings page.

Remember to test your website after you defer each JS file. This way, if your website stops functioning properly, you will know which deferred file caused the breakage. With Async JavaScript, you can improve the web page loading speed of your website and produce the best experience to your visitors. A fast loading web page is crucial if you want to keep visitors on your website.

Need help to defer JavaScript?

Let’s chat.

Share This