Preload, Prefetch and Preconnect for Site Owners

If you view the source of almost any modern website, you'll find a few lines near the top that start with <link rel= followed by words such as preload, prefetch or preconnect. These are resource hints: notes to the browser about what the page is likely to need. Used well, they help a page appear sooner. Used carelessly, they can make visitors download files they never use. Most site owners didn't add them by hand; a theme, page builder or plugin did. This article explains what each one does and how to check yours.

Three hints, three different jobs

• Preload: “this page needs this file soon.” MDN describes preload as a way to declare resources “your page will need very soon”, so the browser fetches them early and caches them. It doesn't run scripts or apply styles; it just starts the download sooner, with higher priority.
• Preconnect: “get ready to talk to this server.” It downloads no files. MDN says preconnect performs some or all of the connection set-up (DNS lookup, TCP and, for HTTPS, TLS) ahead of time, and that it only helps for other domains, because the connection to your own is already open. Its lighter cousin, dns-prefetch, only does the DNS lookup.
• Prefetch: “the visitor might need this next.” Prefetch fetches files for a likely future page at low priority and keeps them in the browser's cache. A newer mechanism, speculation rules, can prefetch or even fully prerender whole pages in Chrome.

When they genuinely help

Hints are most useful when the browser would otherwise find out about something late. web.dev's guide to preloading critical assets gives the classic example: a web font referenced inside a stylesheet isn't requested until that stylesheet has downloaded and been read. Preloading the font lets both downloads run side by side, so text appears in the right typeface sooner. The file was always going to be downloaded; preload only changes when.

Preconnect works the same way for other companies' servers. If your page relies on fonts or images from another domain, web.dev's article on preconnect and dns-prefetch says connecting early to important third-party origins can save 100–500 ms. A well-chosen prefetch can make the next page open almost instantly, provided the visitor actually goes there.

When a hint downloads data nobody uses

Each hint has its own way of going wrong, and the sources are frank about them:

• Prefetching pages people don't visit. web.dev's prefetching guide warns that prefetch “consumes extra bytes for resources that are not immediately needed” and advises prefetching only when you are confident users will need them, and considering not prefetching on slow connections. Chrome's speculation rules documentation says over-speculation has a clear cost to users in bandwidth, memory and CPU.
• Preloading the wrong thing. MDN gives the example of preloading the same image in both AVIF and WebP: both download, but only one is used. web.dev adds that a font preloaded without the crossorigin attribute is fetched twice, and that Chrome shows a console warning for preloads not used shortly after the page loads.
• Too many hints. “If too many resources are prioritized, effectively none of them are,” says web.dev. Unnecessary preconnects can delay more important resources, and the browser closes a preconnected connection that isn't used within 10 seconds.

Preconnect on its own adds little data. Preload and prefetch are where unused downloads come from. As an illustration using GreenTracer's model: a 150 kB image preloaded twice in two formats adds 0.15 MB to every visit, about 0.022 g CO₂e per page view (0.15 × 0.148 g per MB). Small per visit, but it is pure waste.

Check what your theme and plugins add

1. Open your home page, right-click and choose “View page source”. Search (Ctrl+F or Cmd+F) for preload, prefetch, preconnect and speculationrules.
2. For each hint, ask: is this file or domain actually used on this page? A preconnect to a font or video service you removed last year is a leftover.
3. In Chrome DevTools, open the Network panel, tick “Disable cache” and reload. The Priority and Initiator columns (right-click a column header to add them) show each request's fetch priority and what started it. Keep the Console open too, to catch unused-preload warnings.
4. If you use WordPress, two defaults are worth knowing. The resource hints function adds dns-prefetch for the hosts of enqueued scripts and styles. And since WordPress 6.8, speculative loading is on by default for logged-out visitors, using prefetch with “conservative” eagerness: it starts when someone begins to click a link, which the WordPress team chose to minimise speculative loads that are never used. A plugin or theme may change that to something more eager, so check before assuming.

If a hint points at something your page doesn't use, ask whoever manages the site to remove it or turn off the setting that adds it. If it points at your main font or hero image, it's probably earning its place.

How hints show up in a carbon check

GreenTracer measures one uncached load of the page with Google PageSpeed Insights, on mobile and desktop, and doesn't scroll or click. So a preloaded file is downloaded during that load and counted like any other. A prefetch the browser makes while the page loads is data too, and is counted if it happens within the test. A speculation that only starts when someone presses on a link never happens in the test, because the test never clicks, but real visitors who hover or click can trigger it.

Removing an unused preload therefore shows in your result directly. If you've been working through leaner web fonts, check that your font preloads still match the files you kept. Then check the page again and compare the data measured with your earlier result.

Sources

• MDN: rel=preload
• MDN: rel=prefetch
• MDN: rel=preconnect
• web.dev: preload critical assets
• web.dev: establish network connections early
• web.dev: prefetch resources to speed up future navigations
• Chrome for Developers: prerender pages with speculation rules
• Chrome DevTools: Network features reference
• WordPress developer reference: wp_resource_hints()
• WordPress core: speculative loading in 6.8
• Sustainable Web Design: estimating digital emissions (SWDM v4)