Why does the browser find some files so late?
The preload scanner reads the HTML as it arrives and starts downloads for everything it can see in tags: stylesheets, scripts, eager images. It can't see inside CSS. A photo set with background-image in hire.css, or a font named in an @font-face rule there, stays invisible until that stylesheet has downloaded and the browser has worked out which rules apply.
Open the Waterfall on the bike hire page. The HTML arrives at about 0.8 seconds. hire.css downloads next and lands at about 1.1 seconds. Only then do hire-bikes.webp and lora.woff2 appear, and the photo, which is the largest thing on the first screen, finishes at about 2.0 seconds.
Two kinds of hint fix late discovery. preconnect gets a connection ready to another site before you need it. preload tells the browser about a specific file before it would find it on its own.
What does preconnect save?
Before the first byte can come from a new origin, the phone has to look up the name, open a connection and agree on encryption. In the simulator that is three round trips, about 450 ms on this 4G profile. On a real phone it is similar: DNS, TCP and TLS each cost at least one trip, often more on mobile.
The font lives on https://fonts.example.net, a different origin from the page. Without a hint, that 450 ms starts only when the font is discovered, at about 1.1 seconds. With <link rel="preconnect"> in the head, it starts as soon as the HTML is read, overlapping with the stylesheet download. The font then finishes at about 1.6 seconds instead of 1.9.
dns-prefetch is the cheaper cousin: it only does the name lookup, about one round trip. Use it for origins you might use later on the page; use preconnect for the one or two you will definitely need in the first few seconds.
<link rel="preconnect" href="https://fonts.example.net" crossorigin>
<link rel="dns-prefetch" href="https://maps.example.org">Why does a font preconnect need crossorigin?
Browsers fetch fonts in CORS mode, even when the font is on your own server. A CORS request and a normal request can't share a connection, so a preconnect without crossorigin opens a connection that the font then refuses to use, and the font opens a second one.
Add crossorigin to a preconnect for a font server. For an origin that serves both fonts and stylesheets you may need two hints, one with and one without. The simulator doesn't model this difference and reuses the connection either way, so the waterfall here can't show the mistake; Chrome DevTools can, as two connections to the same host.
When is preload the right tool?
Preload a file when three things are true: the page certainly needs it, the first screen needs it, and the browser would otherwise find it late. The hire bikes photo passes all three. It is the largest paint, and it hides inside CSS.
The as attribute tells the browser what kind of file it is, so it gets the right priority and is matched to the later request. Images preloaded as="image" start at low priority, like any image, unless the preload link also has fetchpriority="high". Without as, or with the wrong value, the browser can't match it and downloads the file twice.
After the change, the photo starts at about 0.8 seconds, alongside the stylesheet, and paints at about 1.6 seconds instead of 2.0. When the CSS finally asks for the background, the browser finds the preloaded copy ready.
A plain <img> with fetchpriority="high" is often better than a background plus a preload, because the scanner sees it directly. The lesson on the biggest image covers that; here the design uses a background, and the preload is the smallest change.
<link rel="preload" href="/img/hire-bikes.webp" as="image">
What does a wrong preload cost?
The starting page preloads summer-banner.webp, a 150 KB banner from last year's campaign that no longer appears anywhere. The browser obeys: it downloads the banner straight away, before the stylesheet has even arrived, and the page never uses it. The Vitals view lists it under Worth fixing as an unused preload.
That download isn't free. All files share one connection's bandwidth, and the banner takes a large share of it during the first two seconds, exactly when the stylesheet and the real photo need it. Removing it drops the first visit from about 281 KB to about 131 KB.
Chrome prints a console warning when a preloaded file isn't used within a few seconds of the load event. Read the console after any change to the head. Preloads tend to outlive the design they were written for.
How many hints should a page have?
Few. Each preconnect opens a connection that uses some of the phone's processing and network, and browsers close unused connections after about ten seconds. Two or three preconnects for origins you use in the first moments is plenty.
Each preload jumps a file up the queue, which pushes everything else down. If you preload five things, none of them is early any more; you have rebuilt the normal order, with extra risk. Preload the one or two files that the page's first screen waits for and that the scanner can't see.
Check after every hint. Look at the Waterfall: did the file start earlier, and did the largest paint actually move? If not, remove the hint.
How do you check hints in Chrome DevTools?
In the Network panel, the Initiator column shows why each request started. A preloaded file shows the <link> line in the HTML. A file found in CSS shows the stylesheet. If a file you preloaded appears twice, the as value or the URL doesn't match.
The Connection ID column shows which connection each request used. After adding preconnect, the first request to that origin should show no connection setup time in its timing breakdown. Lighthouse and PageSpeed Insights also suggest preconnect for important origins and warn when a preconnect goes unused.
What do AI answers get wrong about hints?
AI-generated heads often contain a long block of preconnect lines for every service the AI knows about, analytics and maps and video sites included, whether the page uses them or not. Each unused one costs a little and helps nothing.
Preloads are the other common problem: preloading every font weight, every image on the page, or the main stylesheet that is already in a <link rel="stylesheet"> right below. Also look for a preload without as, a font preload without crossorigin, and hints pointing at a URL that differs slightly from the real one, like a different file name or a .com instead of .net.
Read every hint against the Waterfall. A good hint makes a specific row start earlier and moves the largest paint. Any hint you can't justify that way should go.
Field notes
- The browser cannot see files named only inside CSS until the CSS arrives.
preconnectopens a connection to another server before it is needed.- Preload only files the first screen needs that the browser would find late.
- A wrong preload downloads an unused file at high priority and slows the rest.
Easy to get wrong
An unused preload is still downloaded, early, and takes bandwidth from the files the page actually needs.
Fonts are fetched in CORS mode. A preconnect without crossorigin opens a connection the font can't use.
Without as, the browser can't give the file the right priority or match it to the later request, so it may download it twice.
Each connection costs a little work, and unused ones are closed after a few seconds anyway.
Questions people ask
Should I preconnect to my own domain?
No. The browser already has a connection to the page's own origin by the time it reads the head. Preconnect is for other origins.
Is preload the same as prefetch?
No. preload is for the current page and is fetched straight away. prefetch is a low-priority hint for a file a later page might need, fetched when the network is idle.
Can I preload a responsive image?
Yes. Add imagesrcset and imagesizes to the preload link, with the same values as the image's srcset and sizes, so the browser picks the same file it will later use.
Does preloading a font remove the need for preconnect?
For that font, mostly. A preload starts the connection and the download at once. Preconnect is still useful when you don't know the exact file name in advance, as with some font services.