Defer Loading of JavaScript (Deprecated)

We touched on deferring of JavaScript in the avoid document.write section, but to reiterate, JavaScript script files are typically larger files and take longer to process and load. When the browser comes across these scripts as the DOM is loading, everything stops until the JavaScript script is processed. A similar process happens when making them external scripts. While making CSS or JavaScript scripts externally takes advantage of caching, the same rules apply when it comes to processing the page. When the browser finally detects these, even if they are external scripts, the browser must wait until they are downloaded before continuing with the rest of the page. At some point, additional considerations for JavaScript files need to be made to help reduce page load time.

Luckily, there is an additional option, which is sometimes referred to as asynchronous loading, but also called deferred loading or lazy loading. However, from a scripting perspective, defer and asynchronous are two separate attributes. Setting the defer attribute tells the browser to process the HTML and not wait for the script. The script will load in the background and will run once the DOM is finished. This ensures that page loading is never delayed. It is also important to note that the defer attribute should be used only with external scripts. On the other hand, the async attribute, while like the defer attribute, scripts will load in the background and run when they are finished downloading, but the DOM and other third-party scripts, for example, do not wait for each other.

Deferring JavaScript can be extremely useful, especially if your page is JavaScript-heavy or if there is JavaScript at the top of the page. From a user’s perspective, if there is a bulky JavaScript file that must load before anything else, it is going to look like the page is unresponsive. So, with that in mind, PageSpeed recommends reviewing and moving uncalled JavaScript functions to an external file that is not used before the onload event. In addition to this, an event listener is implemented to load this external script after the essential content has been loaded.