Recently I had a chance to present a talk at NDC Sydney about web performance and it received a great feedback.

That inspired me to write up a series of posts on each topic I covered in that talk, and who knows, maybe each of these posts would be a talk some day by their own 😃.

All other parts:

Part 1 on HTML and CSS

Part 2 use Preload/Prefetch to boost load time

Part 4 Image optimisation

Part 5 Web font optimisation

Time to see what we can do for our old friend JavaScript. So let’s begin.

Switch to HTTP/2

With more and more hosting providers supporting HTTP/2, it’s becoming a good time to switch to this protocol instead and benefit from its multiplexed nature. What it means in terms of performance is that we don’t need to bundle all of our JavaScript into large bundles to reduce the number of calls to server.

With HTTP/2 designed to handle large number of requests, you can now increase the number of files required to render the page. Not too much tho:

Too much of a good thing is a bad thing.

Async & Defer

As I mentioned before, JavaScript, like CSS is a render blocking element. This simply means the browser needs to wait for it to load and execute before it can parse the rest of the HTML document.

This hugely increases our First Meaningful Pain. In order to fix this issue we can use two of the features which are not used by many people but are very effective.

Normal execution

When you use a <script> to load a JavaScript file, it interrupts the parsing of the document. Browser fetches the resource, executes this and then continues on paring:

The Async attribute

The Async attribute is used to indicate that this resource can be executed asynchronously. The parsing doesn’t need to be halted, it can be done right after the resource is fetched from network and is ready.