Deferred and Asynchronous Script Loading with Javascript

Javascript

It’s a widely known fact that page speed is an important factor in most search engines’ ranking algorithms, Google has categorically stated as much in their developer guidelines.

Google’s goal is to provide users with the most relevant results and a great user experience. Fast sites increase user satisfaction and improve the overall quality of the web

Plus, we are all instinctively aware that visiting a site which loads faster is a much more pleasant experience than one which takes several seconds. A factor that should make page speed a priority regardless of any benefit to search engine ranking.

Scripts block the rendering of a page until each has been parsed in turn by the browser. Therefore, deferring the loading of non-essential scripts until after the page has loaded is a critical step in optimising a users experience of your site.

Importantly, Google determines a page to be fully loaded once the load event has been fired. For a user, they will perceive the page to be fully loaded once the initial view has been rendered. This initial view only includes everything above the fold.

Neither of these definitions has anything to do with the actual time it takes to load all the resources on the page. This difference between the perceived load time and the actual load time is critical in making our pages load faster, or at least appear to.

Asynchronous Loading

The standard <script src="myscript.js"></script> element will block the firing of the load event until each instance has been parsed by the browser, synchronously, this guarantees the browser that no further actions are necessary within the scripts themselves in order for your page to be rendered.

But, while the browser has no idea what actions might need to be carried out within each script in order for a page to be displayed, we do.

Unless you are using document.write()  in a script it’s likely that the browser can happily carry on loading your page while it downloads the script, asynchronously.

The Asynchronous Loading Pattern

Most of you should recognise this pattern as it’s commonly used by the ever-so-slightly popular Google Analytics.

We’re creating a script element and setting it’s source attribute to our script file. We’re then setting the boolean attribute async which is handy for browsers which support it and necessary for earlier versions of Firefox which don’t automatically add it by default.

Injecting the script element into the document then forces it to be loaded asynchronously.

This pattern is kinda handy for improving our page speed time, allowing our document to be parsed faster. However, the load event will still only be fired once these scripts have finished loading themselves, despite the fact that it might not even be necessary for them to be loaded in order to render the initial view.

Deferred Loading

If the script isn’t essential for the initial page view then we can probably wait to load it until after the load event has been triggered by the browser.

So, before we do this we first need to work out what script functions are truly necessary in order for the initial view of the page to be rendered. Once you’ve worked this out you can do a little refactoring to keep your essential functions separate.

Google recommends that unless you have more than 25 uncalled functions then this refactoring is probably not worth it.

The Deferred Loading Pattern

This is Google’s recommended method for deferred loading.

Deferring Multiple Scripts

It’s fairly bulky to go using this for every script we may want to defer, so with a little refactoring we get:

Using the script above you can now specify your scripts to be loaded in the array literal on line 11 above.

The defer attribute

Support for the defer attribute is sketchy at best and won’t necessarily execute scripts in the order you expect.

This is only a brief summary, so here are some excellent articles that cover the subject in much greater depth:

  • Chris Coyier as usual does a great job of explaining this – Think Async
  • Google’s recommendations on page speed and deferring JavaScript
  • There are some great examples of the different deferred loading methods with some detailed explanations of their use cases on friendlybit.com

Leave a Reply

Your email address will not be published. Required fields are marked *