Definition
Resource hints are HTML directives that inform the browser of resources that will be needed, allowing it to load them in advance. Preload (<link rel='preload'>) forces the immediate loading of a critical resource for the current page (font, hero image, critical CSS). Prefetch (<link rel='prefetch'>) downloads resources in the background for probable future pages. Preconnect (<link rel='preconnect'>) establishes an early connection (DNS + TCP + TLS) to a third-party domain. Dns-prefetch is a lighter version of preconnect (DNS only). For SEO, these hints improve Core Web Vitals: preload reduces LCP by loading critical resources first, preconnect reduces TTFB of third-party resources, and prefetch accelerates navigation between pages.
Key Points
- Preload for critical resources on the current page (fonts, hero image, CSS)
- Preconnect for third-party domains used by the page
- Prefetch to pre-load resources for probable next pages
Practical Examples
Preloading the main font
A site adds <link rel='preload' href='font.woff2' as='font' type='font/woff2' crossorigin> in the head. The font is available 500ms earlier, eliminating the flash of invisible text (FOIT).
Preconnect to third-party domains
A site adds preconnects to its critical third-party domains (image CDN, analytics, Google Fonts). Third-party resource loading time decreases by 300ms on average.
Frequently Asked Questions
Preload has high priority and loads the resource immediately for the current page. Prefetch has low priority and loads resources for future navigations. Use preload for critical content on the current page, prefetch to anticipate next pages.
Yes. Too many preloads dilute priority and can slow down the loading of truly critical resources. Limit yourself to 3-5 preloads maximum. For preconnects, 2-4 critical third-party domains maximum. A Chrome DevTools audit helps identify useful hints.
Go Further with LemmiLink
Discover how LemmiLink can help you put these SEO concepts into practice.
Last updated: 2026-02-07