Prefetch, Preconnect, Preload, Prerender: Boosting Web Performance

Obsessed with SEO and web performance, I’ve spent years in the industry honing my expertise. This experience has taught me that web performance stands as one of the three pillars of SEO, equally crucial as backlinks and content. Time and again, I’ve seen how website speed optimization can make or break search engine success.

There are many techniques for optimizing a website, such as concatenation, minification, caching, and gzipping, which I’ll cover in a separate post. Today, I want to focus on four tools that are natively supported by browsers and therefore very easy to use: **prefetch, preconnect, preload, and prerendering*j. These techniques can significantly improve our website’s performance by eliminating render-blocking and speeding up content loading.

Before we dive into the details, it’s worth mentioning that I plan to dedicate a separate post to a more advanced preloading technique called 103 Early Hints. But first, let’s take a closer look at our four heroes of the day.

Prefetch, Preconnect, Preload, and Prerendering - Differences and Applications

1. Prefetch

Prefetch is a technique that allows the browser to download resources before they’re actually needed. It’s particularly useful when we know the user is likely to visit a specific page in the near future. Usage example:

<link rel="prefetch" href="/page-user-will-probably-visit-next.html">

2. Preconnect

Preconnect establishes an early connection to a domain from which we’ll be fetching resources. This includes DNS resolution, TLS negotiations, and TCP handshake. It’s especially useful when we know we’ll be downloading resources from a specific domain, but we’re not sure exactly which ones. Usage example:

<link rel="preconnect" href="https://example.com">

3. Preload

Preload informs the browser about resources that will be needed in the current navigation and should be downloaded as soon as possible. It’s the most aggressive form of preloading. Usage example:

<link rel="preload" href="critical.js" as="script">

4. Prerendering

Prerendering is the most advanced technique, which actually loads an entire page in the background. It’s like opening a new tab and loading a page, but hidden from the user. Usage example:

<link rel="prerender" href="https://example.com/page-to-prerender">

Which Has the Biggest Impact on Improving Page Performance?

Among these four techniques, preload usually has the most direct impact on improving page performance and eliminating render-blocking. This is because preload allows us to precisely specify which resources are critical for the first page render and should be fetched as early as possible.

Preconnect can also have a significant impact, especially when our site fetches resources from multiple different domains. Establishing early connections can save valuable milliseconds on each request.

Prefetch and prerendering, while potentially very useful, have a more indirect impact on performance. They mainly improve the user experience when navigating between pages but don’t directly speed up the loading of the current page.

In conclusion, all these techniques have their place in the website performance optimization arsenal. The key is understanding their specifics and applying them appropriately to our site’s needs. Combined with other optimization techniques, they can significantly speed up our page loading, which translates to better search result rankings and increased user satisfaction.