Prefetch and speculation rules
Hints that fetch or fully prepare resources for a likely next navigation at low priority, making the subsequent page load feel instant.
Technicalrel=preload
Preload
A resource hint that tells the browser to fetch a critical resource for the current page at high priority, before the parser would normally discover it.
In full
`<link rel="preload" as="image" href="hero.avif" fetchpriority="high">` is the standard fix for an LCP image discovered late because it is set by CSS or JavaScript. Preload must specify a correct `as` value and, for fonts, `crossorigin`. Over-preloading is counterproductive: every preload competes for bandwidth with everything else, and preloading a resource the page does not use wastes it entirely. HTTP 103 Early Hints can deliver the same hints before the HTML.
Example
Preloading the hero image and the primary web font removes 700 ms from a landing page's LCP.
Related terms
Largest Contentful Paint
A Core Web Vital measuring the render time of the largest image, video poster or text block visible in the viewport; good is 2.5 s or less…
Web font loading
The strategy for downloading and applying custom fonts; poor handling causes invisible text (FOIT), layout shift (FOUT) and slow LCP for…
Render-blocking resources
Stylesheets and synchronous scripts in the head that must be downloaded and processed before the browser can paint anything.
HTTP/2
A binary, multiplexed version of HTTP that carries many concurrent requests over one TCP connection with header compression.
Where to read more
- MDN: The link Element · Documentation · developer.mozilla.org