Preload Prefetch and Preconnect
Hint the browser to fetch critical resources early.
Why Resource Hints?
Modern browsers discover resources only as they parse HTML. Resource hints (link rel attributes in the <head>) let you tell the browser "I will need this soon" — so the network request starts earlier than discovery would normally allow.
preload Loads Now
<link rel="preload" as="..." href="..."> tells the browser to fetch the resource immediately with the priority appropriate for the as type. Use it for assets the page will definitely need: hero images, critical fonts, route-level JavaScript.
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>All lessons in this course
- The async and defer Attributes
- Preload Prefetch and Preconnect
- Lazy Loading Images loading=lazy
- Resource Hints modulepreload