There are various ways through which we can improve the performance of our webpage.
Let’s see about preload, prefetch, and preconnect with which we can improve the performance of our webpage.
Since the name says it all “pre” and “load”. This means loading the required resources for the page before the page is loaded. Preload is an updated version of “subresource”. The preload directive can be defined inside a
Other types that can be used
- style for stylesheets
- script for scripts
- font for fonts
- fetch for resources downloaded with fetch() or XMLHttpRequest
Advantages of preload
- Preload allows setting priority for the resources that are used on the webpage which is useful for developers to optimize the webpage.
- It gives the ability to the browser to determine the type of resource which helps the browser to tell whether the resources can be reused in the future or not.
- The browser can determine whether the request is a complaint.
When to use preload
Use preload only when you’ll need a resource soon. Preload will help when you know you’ll need a resource soon after loading the page, and you want to start loading it earlier.
For everyone’s clarity prefetch is not similar to preload. Both are different directives used for different purposes. Prefetch is a low priority directive that allows the webpage to fetch resources needed for the webpage in the background.
Prefetch downloads require resources and store them in browsers cache for later use.
There are two types of prefetching:
- Link Prefetching
- DNS Prefetching
1. Link Prefetching
This will download the resources needed and store them in the browser’s cache for later use.
This technique can speed up many interactive sites but does not work everywhere.
2. DNS Prefetching
DNS prefetching allows the browser to perform DNS lookups in the background while the browser is being used. This will reduce the latency since the DNS lookup has been made earlier.
Again, the name implies what function preconnect does. Preconnect allows the browser to setup early connection to the server before the actual HTTP request is made to the server.
This includes various things such as DNS Lookups, TLS Negotiation, etc.,
For a clear explanation let us consider that the web page we are going to make contains fonts from google and it also uses some API. Instead of making a request when the page loads the connection can be made before and the data can be retrieved.
Preconnect can be added directly to the link tag used on a webpage.
These directives can be used appropriately as required in the webpage. These directives can help developers to improvise the performance of the web page when they are used correctly. These directives can also lower down your page when they are used in unnecessary places.
Author: B. Vetrichelvan
Follow My Journey On Instagram