Preloading and Resource Hints
Use preload, prefetch, preconnect, and priority hints to fetch critical-path resources earlier and shorten the time to first meaningful paint.
Helping the Browser Prioritize
The browser discovers resources as it parses HTML, but key assets like fonts or hero images may be found late. Resource hints let you tell the browser what to fetch early, shrinking the critical path.
preconnect
preconnect opens the DNS + TCP + TLS connection to an origin ahead of time, so the actual request starts faster. Ideal for font and CDN origins.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>All lessons in this course
- Understanding the Critical Path
- Render-Blocking Resources
- Prioritizing Content for Speed
- Preloading and Resource Hints