Improve Website Performance – Resources Hints

2 min readSep 18, 2022

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.