Using Browser π©βπ» Hints: prefetch, preload and prerender to Improve Your Page Load Times π
Last Updated -
Just like Olympians you are looking for every slight edge you can find to edge out the competition. Everyone knows Google uses page load times to differentiate search results.
While there are hundreds of tips and tricks you can implement to improve your page load times, browser hints are often overlooked, but can make an immediate impact.
Browser hints are meta tags or headers that tell the browser ahead of time what resources are needed to render the page. This causes the browser to act before it would normally initiate network requests or tell the browser what resource the user is most likely to request next.
In effect you are giving the browser a simple map of your page without all the details. This map or series of hints is just enough for it to initiate what would normally be expensive network related activities in the background. This means it can leverage idle CPU cycles to optimize the load experience.
Browser hints, prefetch, preload, preconnect and prerender improve performance by getting things in advance and loading background resources effectively.
preconnect
If your document relies on resources coming from external origins or domains the preconnect hint initiates the TCP connection.
The advantage here is you can initiate the connection steps before the first reference in the document. The steps imitated are:
- DNS lookup
- TCP handshake
- TLS negotiation
Just like you add a link reference to the document's header you add a link header to the response's headers. This is a slightly different link than the way it is defined as a header link reference:
The header name is Link and you include the server address you need to initiate a connection inside a pair of angle brackets. Just like the link meta tag you include a rel=preconnect to tell the browser to initiate a connection. Finally, since this is an external domain add the crossorigin value.
The Link header mechanism allows each response to indicate to the browser which other origins it should connect to ahead of time. For example, included widgets and dependencies can help optimize performance by indicating which other origins they will need, and so on.
You can see how the preconnect hint improves performance in Ilya Grigorik's comparisons.
Microsoft Edge supports the preconnect hint, but only via an HTTP header. This puts the responsibility of declaring a preconnect hint in the hands of devops ops rather than the developers. This also makes the markup a little more maintainable, plus parsing headers is always a little faster than parsing markup to identify actions.
prefetch
When you can confidently identify a resource the user is likely to navigate to you can use the prefetch browser hint to load the page ahead of time. This technique relies on fetching the resource in the background and either the browser cache or even service worker cache to persist the request so the network request is bypassed when the navigation occurs.
There are two types of prefetching, DNS and resource. DNS prefetching is interesting because the actual requests aere low bandwidth, but the steps required to complete a DNS lookup are quite high. By prefetching or resolving a domain's address you are eliminating this expensive step.
Link prefetching is a little different. This is where you tell the browser a URL you anticipate the user will want so it can use a low priority cycle, when the browser is idle, to retrieve the resource ahead of time.
You can define a link prefetch either as a LINK element or using an HTTP header:
HTML:
HTTP Header:
Link: rel=prefetch
Prefetching enjoys fairly broad browser support. Right now Safari is the only browser not supporting the feature.
prerender
Prerender allows you to specify a webpage to be loaded while the user reads the current page. Even though the page is not rendered, the response is guaranteed to be ready when the user navigates from the current page.
Because the response is already retrieved any local caching should be triggered, which we call being primed. Only GET requests are included in the prerender cycle and no JavaScript is executed until the page is loaded.
You should use with caution because it can be heavy and waste bandwidth. Be certain the resource you designate is highly likely to be navigated to.
Browser support for prerender is pretty poor. Currently only Chrome and Samsung Internet offer support. Internet Explorer does, but not Edge.
preLoad
The preload hint is a declarative fetch, telling the browser to request a resource ahead of time. The advantage is the response is retrieved behind the scenes without blocking the documentβs onload event. Now instead of waiting for a resource to be fetched once it is referenced via an element like an IMG tag or an XMLhttpRequest the browser can request the resource and defer processing until it is actually referenced.
Using this technique Housing.com saw a 10% improvement to their average page load time.
You can designate a preload hint as either a HEAD LINK or using an HTTP header. However, Edge currently supports just the LINK element. Browser support is pretty ubiquitous today. However legacy browsers will requests these resources just as if they were normally referenced, so you don't get the non-blocking benefits.
Link:
Header:
Link: ; rel=preload as=imagePreload differs from prefetch because it is a high priority fetch signal for a critical component of the current document, where preload is more to anticipate a navigation a user may make. The main benefit preload gives you is making resources available before they are needed, so you can optimize how the UI thread renders the content. Preloaded resources can minimize the time the UI thread is blocked waiting on these resources to load since you are preemptively fetching them.
The 'as' attribute is required to help the browser understand how it should process a resource. If you neglect this attribute you will double fetch the resource as the browser wont know how to process the resource. The following table demonstrates how you should declare the as value for different resource types:
Using this technique you can make the resource available as soon as it is loaded. A simple example might be preloading an image, but having a placeholder rendered until the file has been retrieved.
Don't go nuts trying to preload everything on your page. This will cause necessary network congestion. Limit preloading to late assets that can truly benefit from an earlier network request.
Summary
Browser hints are a great way to optimize your page's load cycles. It does take a little care to understand your page and site's personality to get these setting correct. But even resolving DNS early can provide big wins. Many sites are seeing immediate performance gains by implementing browser hints in their web pages. I know I started DNS prefetching years ago and saw the impact.