Hey Browser — What’s your priority?
Browser resource prioritization — How can it increase web performance?
The website performance — Hasn’t this been a big deal for every project that you have worked upon. The reason is simple — The user wants everything in a blink of an eye. A website performance affects the conversion rate(A website’s conversion rate is the percentage of users who take the desired action, and the conversion rate is tied directly to how much revenue a website generates). Below are a few examples of how an increase in performance is tied with conversion rates. Source
- Mobify found that decreasing their homepage’s load time by 100 milliseconds resulted in a 1.11% uptick in session-based conversion
- Retailer AutoAnything experienced a 12–13% increase in sales after cutting page load time in half
- Walmart discovered that improving page load time by one second increased conversions by 2%
As a result, loads of money is spent on increasing the performance of a website to get higher conversion rates.
However, what if there were some small techniques through which you could increase your website performance without having to spend anything? There are a few amenities that the browser has given the developer to gain more control over how and when resource loading is done.
Browser resource prioritization — the deal!
When the webserver returns the asked HTML back to the browser, the browser has its own heuristics that are responsible for the best-guess on which of the resources are important so as to load them first. E.g., CSS will always be loaded before scripts or images. However, you have ways through which you can influence this decision making of the browser.
These are known as resource hints. The following are the resource hints we will be exploring in this article.
- Preload
- Prefetch
- Preconnect
All these resource hints use the rel attribute of the link element in an HTML. So let’s explore them in detail.
PRELOAD
Preload is a declarative fetch directive. This priority hint allows you to compel the browser to make a request for a certain resource without blocking the onload event of the window. It is a way of letting the browser know that a certain resource is going to be needed soon for sure.
Preload ensures the resources specified with this priority hint are available earlier and are less likely to block the page’s render, ultimately improving performance.
How does this work?
<link rel="preload" href="myStyles.css" as="style">Let’s see the attributes used above,
- rel attribute gives the power to preload to the link directive.
- We specify the resource destination in the href attribute.
- as is used to specify the resource type.
The as an attribute has multiple available values like — audio, font, image, script, video, worker, track, script, embed.
When should you use PRELOAD?
Preload tells the browser to download and cache a resource (like a script or a stylesheet) as soon as possible. It’s helpful when you need that resource a few seconds after loading the page, and wish to speed it up. The browser does not work on the downloaded resource. Below are the scenarios where it can be helpful.
- Early loading of fonts
- Dynamic loading without execution
- Responsive loading
What are a few things we need to take care of when using PRELOAD?
- <link> elements can accept a type attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the type attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.
- Make sure you are ultimately using the resource that is loaded using PRELOAD. Else, your browser will start throwing an error as below,
The resource https://***.com/…(.css, .js) was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate ‘as’ value and it is preloaded intentionally.PREFETCH
<link rel="prefetch" href="MyImage.jpeg" as="image">When you can confidently identify a resource the user is likely to navigate to later in time, 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 having either the browser cache or even service worker cache to persist the request. This way, the network request for that resource is bypassed when the navigation occurs.
PREFETCH tells the browser that it can go ahead and fetch a page in the background so that it’s ready to go when requested. There’s a bit of a catch here because you have to anticipate where you think the user will navigate next. If your anticipation is correct, the next page might appear to load really fast. It goes wrong, and you’ve wasted time and resources in downloading something that isn’t going to be required at all. If the user is on a metered connection like a limited mobile phone plan, it might actually cost them money.
When a prefetch takes place, the browser does the DNS lookup and makes the server connection. It then goes a step further and requests and downloads the files. Now, it stops at this point. The files are not parsed or executed. They’re just requested and kept ready-to-go.
You might think of PREFETCH as being a bit like adding a file to the browser’s cache. Instead of needing to go out to the server and download it when the user clicks the link, the file can be pulled out of memory and used much faster.
But, when should you use it?
You should use it when you have a reasonable amount of certainty of where the user navigates on your site. Also, if you believe that speeding up the navigation will positively impact your user’s experience. This should be weighed against the risk of wasting resources by possibly fetching a resource that isn’t then used.
PRECONNECT
<link rel="preconnect" href="https://my.sample.com">Why PRECONNECT?
One step on from DNS prefetching is preconnecting to a server. Establishing a connection to a server and hosting a resource takes several steps:
- DNS lookup
- TCP handshake
- TLS negotiation on HTTPS sites
This typically happens once per server and takes up a valuable amount of time — especially if the server is very far from the browser and network latency is very high. Pre-connecting to a server can make sure that when the browser gets to the part of the page where a resource is needed, the slow work of establishing the connection to that server has already taken place and the line is open and ready to go.
OK! So, when should you use PRECONNECT?
Browser support is pretty good and there’s no harm if a browser doesn’t support PRECONNECT — there will be no change in the experience. Consider using PRECONNECT when you are sure that you will be using a resource and you want to be prepared by being ready in advance.
As was the case in PREFETCH, be careful not to PRECONNECT and then not use the connection. This will slow your page as well as tie up a tiny amount of resources on the server you connect to.
Closing Thoughts
It’s important to remember that these hints are just that; hints of ways the browser could optimize performance. They’re not commands. The browser takes these suggestions and uses its best judgment in deciding how to respond.
This might mean that on a busy or overloaded device, the browser doesn’t attempt to respond to the hints at all.
However, there is also a risk associated with resource hints. As the code is undercover and goes undetected, it could be very easy for the page to change in the future without updating the resource hints which might have become irrelevant.
So, use them wisely!
