Resource Hints Explained

What Resource Hints Tell the Browser

Preload vs prefetch is a comparison of two resource hints, which are instructions in a page's HTML that tell the browser about files it will need. A resource hint does not change what the page contains. It changes when the browser starts fetching or connecting, so that work can finish earlier.

Normally the browser discovers resources only as it reads the HTML, CSS and JavaScript. A font referenced deep inside a stylesheet, for example, is found late, after the browser has already decided what to do next. A hint lets the site owner point to that file sooner.

Preload, Prefetch, Preconnect and DNS-Prefetch Compared

Each hint has a different purpose and priority:

• Preload asks the browser to fetch a resource needed on the current page soon, with high priority. Typical candidates are a key font or the main image above the fold.
• Prefetch asks for a resource the visitor will probably need on the next page. It is fetched at low priority, usually when the browser is idle.
• Preconnect sets up the connection to another server early, including the name lookup, the network connection and the encryption handshake, without downloading a file.
• DNS-prefetch resolves only the domain name in advance, a lighter option when a full connection is not needed.

The difference between preload and prefetch comes down to timing. Preload is for the current page, while prefetch is a prediction about the next one. Both use bandwidth, so a wrong guess wastes data and can compete with resources that matter now.

Why Hints Can Waste Bandwidth or Be Ignored

Hints are suggestions, and a browser may ignore them. A preloaded file is only useful if the page later requests the same address with matching details. If a font is preloaded with the wrong attributes or a different address, the browser may download it twice. Preloading too many files also crowds out the ones that matter most.

Preconnect works best for a small number of essential outside servers, such as a font service or a required API. Opening many connections at once costs time and resources on the visitor's device, so hints for every outside domain can make a page slower rather than faster. Web fonts are a typical case, as explained in how web fonts affect page speed, and many outside connections come from the third-party scripts a page loads.