Performance
Preload
Preload is a hint that tells the browser a resource is needed on the current page and should be fetched now at high priority. It is for files the parser would otherwise discover too late.
How it is measured
Add `<link rel=preload as=image href=/hero.avif>` to the head or send it in a `Link` header. In the Network panel the file's initiator reads 'preload' and its request starts earlier in the waterfall. The `as` value sets the priority and makes the cache entry matchable.
Chrome logs a console warning when a preloaded file is not used within a few seconds of load. Lighthouse's 'Preload Largest Contentful Paint image' and 'Preload key requests' audits estimate the saving in milliseconds.
Worked example
A fashion landing page sets its hero as a CSS background image, so the browser finds the 210 KB file only after the stylesheet has downloaded and parsed, at 1.7 s on a throttled run. LCP is 3.6 s. A preload in the head starts the fetch at 0.2 s and LCP drops to 2.5 s.
The same afternoon the team also preloads four web fonts and two carousel images. The hero now competes with six other high-priority downloads and LCP creeps back to 2.9 s. Removing everything except the hero and one font recovers 2.6 s.
How it differs
Preload is for this page, right now. Prefetch is for the next page, later. They differ in priority and timing, and a preload competes with everything else the page requests, so each extra one takes bandwidth from the others.
Common errors
Missing or wrong `as`, so the file is fetched twice. Leaving off `crossorigin` on font preloads. Preloading something the page never uses. Preloading so many files that nothing is early. Preloading a responsive image with one URL and ignoring `imagesrcset`.
In practice
Find the LCP element. If it is an image or font that the HTML does not reference directly, preload that one file, with `imagesrcset` and `imagesizes` for responsive images. Re-run a lab test and check the waterfall for a duplicate request.