BY CHRIS NEALE
One key goal when we’re developing a web application is to make sure it loads quickly. Users get bored quickly, so waiting for an application to download and start is a frustrating experience. Fortunately modern browsers give developers lots of useful tools to try to get an application to load as quickly as possible.
One of the newer techniques we can use to push the start time down is to give the browser hints that tell it what sort of things are likely to happen as the application starts.
In order to understand what hints are and why they improve the start time for an application we need to understand what happens when an application requests a piece of code or an asset from a server.
When a browser encounters a link to a script or an asset in the HTML code for an application it makes a new request to the server the asset is stored on. That could be the same server that the HTML page has been loaded from, or an external server such as a Content Delivery Network (CDN) or a third party service. The request itself is made up of a series of steps – first to a DNS server to find the address of the server, then to the server to initialise the connection, and finally a series of requests to fetch each part of a download. If the server is using the HTTPS protocol to ensure it’s secure then there are another series of steps to make a secure connection. In all, the process can take hundreds of milliseconds – all time that the user has to wait for before the application has finished loading.
Using loading hints in the page metadata enables a page to load faster because the browser can initialise the requests before it’s found them in the page HTML.
Preconnecting to servers
On a slow computer or a low-end device, or on a slow internet connection, making a new connection to a remote service can take a long time. In order to speed up loading assets later we can add a preconnect header to a page to tell the browser that somewhere in the code that will be parsed later there’s a reference to a remote server that it’ll need to connect to, so it should start that process immediately.
By adding the link tag to the page header the browser will use an available connection to start the process of connecting to the domain the link references, and then anything that needs to be downloaded from that domain won’t have to wait for the HTTP or HTTPS connection to be established first. This is particularly useful for web site and applications that download assets that users have uploaded or that are generated programmatically as it speeds up everything that’s downloaded without needing a list of files ahead of time.
Assets can be preloaded by including a preload header that tells the browser that a file is going to be used later. This hint means the browser won’t wait until it sees a reference to the asset being used in the application code – the browser will download it to the user’s browser cache immediately.
The preload hint can inform the browser about more than just the file itself. The ‘as’ attribute tells the browser what sort of asset is being loaded so it can make some additional optimisations such as adding the file to the browser’s font table in the case of a font.
In the example the ‘crossorigin’ attribute has been added to make a CORS compatible request. This is needed for any asset that’s preloaded from a different domain that doesn’t add cross-origin headers that will allow the browser to download the item.
Where an asset is already known and can be referenced in the HTML code when the page is loaded we can use a preload header. If the asset is known about but isn’t going to be used for a while yet it’s better to use a prefetch header instead.
Prefetching doesn’t guarantee that an asset is going to be available when it’s needed. In some browsers, such as Chrome, the prefetch will only execute when the browser is in an idle state – when the user isn’t interacting with it and when it hasn’t performed any work for a short time.
Where this is most useful is for assets that will take a long time to download and will be used on subsequent pages or in components that are being lazy loaded. Having them downloaded in the background while other things are happening means the user won’t need to wait for them when they’re actually used.
Prefetching and preloading assets should really be reserved for things that are definitely going to be used in the application as they’ll use the user’s data unnecessarily if everything is prefetched.
Bonus – Prerendering whole pages
There’s one last browser resource hint that can be added to a page to speed up subsequent page loads – ‘prerender’.
A prerender hint downloads an entire page including all its assets, and in some browsers also executes the code that it includes as if it was in a hidden window. This means that when the user navigates to that page all of its assets are already available. For some web sites and applications can be tremendously useful, but it’s very resource intensive so we should only use it when it’s completely appropriate.
We help teams across the UK deliver successful digital projects. If you’d like to have a conversation with us, we’ll put the kettle on.