What does dns-prefetch, preconnect, prefetch, preload, prerender do and when to use them
dns-prefetch & preconnect
A 3rd party domain, like https://fonts.gstatic.com/
dns-prefetch
Resolve a 3rd party domain to an IP address. Once a domain name has been resolved , if the user does navigate to that domain, there will be no effective delay due to DNS resolution time.
When a page contains many links to various domains. We extract the domain name from each one and resolve each domain to an IP address. All this work is done in parallel with the user’s reading of the page, using minimal CPU and network resources.
preconnect
Establish a connection to a 3rd-party domain which includes the DNS lookup, TCP handshake, and optional TLS negotiation.
dns-prefetch or preconnect
dns-prefetch is more lightweight whereas preconnect is costly because opening and keeping a connection is an expensive operation.
preconnect the most critical connections and dns-prefetch the rest to save time on the first step, the DNS lookup, which usually takes around 20–120 ms.
prefetch & preload
A resource like a stylesheet or script, https://fonts.googleapis.com/css?family=Tangerine
prefetch
Download and cache a resource in the background. The download happens with a low priority, so it doesn’t interfere with more important resources. It’s helpful when you know you’ll need that resource on a subsequent page, and you want to cache it ahead of time.
preload
Download and cache a resource as soon as possible. It’s helpful when you need that resource a few seconds after loading the page, and you want to speed it up.
The browser doesn’t do anything with the resource after downloading it. Scripts aren’t executed , stylesheets aren’t applied. It’s just cached — so that when something else needs it, it’s available immediately.
prefetch or preload
preload if you need a resource immediately after the page loads. prefetch if you only need it later.
prerender
fetch and execute an entire page. prerender if you are confident that visitors go from page A to page B.
Refs:
