Web page loading requires a whole set of resources to be fetched in order for pages to be displayed and interacted with. Influence the order in which these resources are fetched & executed to increase a website speed. That’s where preload and resource hints help.
A web page is designed with HTML and additional resources to set a format, add media & more. As per the research, more than half the pages contain more than 68 resources added to the main document. Hence, downloading a resource is a repetitive task for the browser under normal circumstances. The process of downloading resources can break down into several steps:
- Resolve the DNS of the resource’s origin (if necessary, i.e. if the browser has not already done so);
- Connect to the origin server (if necessary, i.e. if the browser is not already connected);
- Fetch the resource(if necessary, i.e. if the resource is not already in the user agent cache and still valid);
- And – according to the type of resource and the reason it was fetched – its evaluation and use.
You can indicate how to optimize these different steps for the browser to download resources more efficiently.
Indicate how to optimize these different steps for the browser to download resources more efficiently. Moreover, you can even tell (ask?) the browser to download some resources in advance in order to improve the future browsing experience on your site.
How to Use Resource Hints: Prefetch, Preconnect, Preload
Using preload, DNS-prefetch, pre-connect and prefetch can help leverage resource loading. The directives are said to be “resource hints” here however, preload has its own specification, while the other resource hints are defined in a separate specification. Preload is not just a hint to the browser but a command.
You can use either the <link> HTML tag or the Link HTTP response header for writing these directives. For specifying the character set, it is recommended to use the HTTP header because the browser will take it into account before starting the interpretation of the HTML code for the page.
In the HTML page body:
<link
href=”resource-url”
rel=”directive”
as=”ressource-type”
crossorigin=”value”
/>
Through an HTTP header:
Link:
<ressource-url>; rel=”prefetch”; as=”ressource-type”;
crossorigin=”value”
No matter which syntax you choose, the parameters will always be the same:
- The resource URL
- The directive to use
- The type to consider for the resource, which allows you to adapt the content security policy to the nature of the resource.
- The cross-origin attribute
The following settings can be used to define 4 directives supported by most modern browsers:
- DNS-prefetch: A DNS prefetch is a resource hint to make a DNS search for a domain that’s yet not been determined by the browser. With DNS-prefetch, the browser performs domain resolution of the given domain name (converting the domain name into IP addresses) before that domain is used to download resources.
- Preconnect: It is a type of resource hint that helps in making a proactive HTTP connection to a domain that has not yet been determined by the browser. This indicates to the browser that it should connect to a given origin before a domain downloads the resources. Preconnecting involves DNS-prefetch, the DNS resolution, TCP handshake, and TLS negotiation.
- Prefetch: It makes the browser download a given resource, even if it is not detected in the page. The resource is downloaded with a low priority.
- Preload: preloading tells the browser to download a given resource as soon as possible with high priority.
The use of DNS-prefetch can be interesting for critical third parties in order to resolve the domain upstream and save a few milliseconds. Using pre-connect instead of DNS prefetch can be more effective to anticipate the whole connection.
If your site is compatible with internet explorer, which does not support pre-connect, you can use the rel=“pre-connect DNS-prefetch” syntax.
Use preload for the resources that are crucial to be loaded in the early of page loading but that would not naturally be prioritized by the browser. However, it makes preload useless for synchronous scripts present in your <head>, which the analyzer considers a high priority.
It can be used to increase the priority of execution of an asynchronous script declared in your <head>. Preload can also be used to load resources referenced by other resources (such as web fonts, images, or other stylesheets) for retrieving while the parent resource gets fetched and parsed.
Prefetch directive sets a very low priority, and can’t be used for essential resources. Prefetch can be relevant for improving page navigation. It can be greatly used during the authentication of a user, to take advantage of the time it takes them to input their login and password to preload the static resources needed to render the page they will see once authenticated.
The Crossorigin Attribute
The cross-origin attribute can be used to fetch resources from origins that are different from the main origin. For many resources such as CSS, or images, there is no need to specify it unless you want to request these resources by passing authentication headers, cookies, etc.
For other types of resources, defined in more recent specifications, cross-origin must be explicitly stated. This is the case for fonts even when they come from the main origin.
When using pre-connect on a third-party domain from which you are retrieving images and fonts, ensure to make two declarations for creating two connections: one without cross-origin, for the images and the other with cross-origin, for the fonts.
Good post.