Setting up preloading and prefetching in a website

Preloading and prefetching are techniques you use to make a Web site faster and more fluid. By pre-loading certain resources (even before the user needs them), you reduce the loading time of crucial components. In this article, I explain what the difference is, when to use them and how to set them up technically.

What is the difference?

Preload

You tell the browser: “Load this file as soon as possible, it’s important.”

Commonly used for: fonts, important images, CSS or JS that are needed immediately.

Prefetch

You say to the browser: “This resource might come in handy later, load it in the background already.”

Commonly used for: next pages, external scripts, API calls.

1. Setting Preloading

Preload you add in the of your HTML. You specify what you are loading and what kind of file it is.

Example: preloading fonts

Example: critical CSS

Make sure you set as correctly, otherwise the browser will ignore the preload.

2. Setting Prefetch

Prefetch works especially well for resources that are likely to be needed, but not immediately. Think of a link to a next page or a script that won’t load until later.

Example: a page prefetch

Or with frameworks like Next.js:

Many frameworks support automatic prefetching of internal routes (client-side routing). But manual prefetching can also be useful for external APIs or third-party scripts.

3. Also useful: dns-prefetch and preconnect

For external sources (such as CDNs or external scripts), it is smart to set up DNS resolution and connections in advance.

Example: Google Fonts

Explanation:

• dns-prefetch: resolves the domain before it is used
• preconnect: already connects (TCP handshake, TLS), faster than dns-prefetch

Use this only for domains you actually use – otherwise you lose performance.

4. Testing and validation

Make sure you set preloading and prefetching properly. Incorrect implementation can actually cause delays.

Tools:

• WebPageTest: check if preload is working as intended
• Lighthouse: gives preload recommendations
• Browser devtools (Network tab): see if a file has been loaded before?

Best practices

• Use preload only for critical resources – otherwise you slow down other resources
• Combine preload with a fallback (e.g.
• Put preconnect on only what you really need
• Test load time before and after implementation

In conclusion

Preloading and prefetching are relatively simple techniques for making a site faster and smoother. Especially for websites with lots of media, fonts or JS components, you can make noticeable gains with these – if applied properly.