Browser hints are methods used to optimize website performance by instructing the browser about anticipated actions. They can be added to the
section of a website or sent in the Link header with either an Early Hints 103 response, or the 200 response with a page.The following are key browser hints:
Preconnect
Preconnect is used to establish network connections that a webpage expects to use soon. The aim is to set up the
necessary connections in advance, saving time when a resource is actually requested. This is especially beneficial for
third-party resources.
Here's how you can use preconnect in your HTML:
<link rel="preconnect" href="https://example.com">
Prefetch
Prefetch is used to instruct the browser to fetch resources in the background that might be needed for future navigations. The fetched resources are stored in the browser's cache for quick retrieval when they're needed, improving the performance for subsequent navigations.
Note: Prefetch doesn't improve the initial page load, but it can greatly enhance the speed of future navigations.
Here's an example of prefetch usage:
<link rel="prefetch" href="example.js" as="script">
Preload
Unlike preconnect and prefetch, preload is used for fetching resources needed for the current navigation, focusing on improving the current page load performance.
Preload is best used for immediate resources that the browser might not otherwise prioritize.
Here's an example of preload for a font file:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
DNS-prefetch:
This hint is used to resolve DNS lookups in advance, in anticipation of a future request to a given URL. This can save valuable time when a resource is actually requested. It can be particularly beneficial when dealing with third-party resources, where DNS lookups can often take a significant amount of time. Here's an example of how to use it:
<link rel="dns-prefetch" href="//example.com">.
Prerender
This hint is used to tell the browser to fetch and render a page in the background, in anticipation of the user navigating to it. This can make navigations feel instant. But beware, it can be very resource-intensive and can waste a lot of bandwidth if the prerendered page is not actually visited. This hint was deprecated and is not recommended for use as of 2021 due to its high potential for misuse and waste of resources.
Preload as="document"
This is a newer hint similar to prerender but with less associated resource waste. It tells the browser to fetch and render a page in the background, similar to prerender, but in a way that is better controlled and less likely to waste resources.
By using these hints, developers can instruct the browser to prioritize important resources, establish necessary connections early, and make the web page load faster. However, misuse of these hints can lead to wasted bandwidth and potential harm to performance.