Preload and prefetch are resource hints added with link elements or HTTP headers. Preload tells the browser to fetch a resource the current page needs soon at high priority, such as the hero image or a key font. Prefetch tells it to fetch, at low priority, something a future navigation will probably need. Related hints include preconnect, which opens a connection to another origin early, and the Speculation Rules API for prefetching or prerendering whole pages in Chromium browsers.
The main hints
Each hint solves a different timing problem. Use them sparingly: every high-priority request competes with others.
<!-- Current page: fetch the hero image and main font early -->
<link rel="preload" href="/img/hero.avif" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>
<!-- Open a connection to a third-party origin -->
<link rel="preconnect" href="https://cdn.example-assets.com">
<!-- Likely next page -->
<link rel="prefetch" href="/pricing">When preload helps
Preload is useful for resources the browser discovers late: a background image set in CSS that is the LCP element, a font referenced inside a stylesheet, or a script loaded by another script. For an img element already in the HTML, fetchpriority="high" is often enough.
Prefetch and prerender
Prefetching likely next pages, such as pricing from a feature page, can make navigation feel instant. The Speculation Rules API lets Chromium browsers prefetch or fully prerender pages based on rules such as links the user hovers over. These help users after the first page; they do not change how crawlers fetch your site.
Example
A late-discovered hero image
Kettlewisp's homepage sets its hero image as a CSS background, so the browser only finds it after downloading and parsing the stylesheet. Lighthouse flags the LCP element as discovered late. Adding a preload link for the image in the head, or switching it to an img element, lets the browser request it right away.
Common mistakes
Preloading too much
Preloading many files means none is really prioritized, and bandwidth goes to resources that are not urgent.
Preloading fonts without crossorigin
Fonts are fetched in CORS mode. Without crossorigin, the browser may download the font twice.
Questions
Indirectly. They can improve loading metrics for real users. Search engines do not reward the hints themselves.
