Why Resource Hints?
Every year, load speed requirements grow: Core Web Vitals have become a ranking factor. Resource Hints are one of the most effective tools to reduce LCP and TTFB without changing architecture. However, incorrect use of preload or preconnect can degrade performance — resources load with wrong priority or get duplicated. Let's examine how to properly use dns-prefetch, preconnect, preload, and prefetch, and show a real case.
On one project with a catalog of 10,000 products, we reduced LCP from 3.2 s to 2.1 s by combining preconnect to CDN and preload for the LCP image — saving 1.1 s on mobile. Implementation took 6 hours: the audit revealed missing preconnect to fonts and incorrect crossorigin on preload. Load time savings reached up to 40%.
How Resource Hints Directives Work
-
dns-prefetch— resolves DNS for a domain. Minimal cost, saves 20–120 ms. -
preconnect— DNS + TCP + TLS. Saves 100–500 ms, but more expensive. Only for precisely needed third-party domains. -
preload— loads with high priority. Critical for LCP image, main font, critical CSS. -
prefetch— loads with low priority for the next page. Used during browser idle time.
| Directive | When to use | Resource |
|---|---|---|
dns-prefetch |
Third-party domains (analytics, CDN) | — |
preconnect |
Exact third-party domains (fonts, API) | — |
preload |
Critical resources of the current page | LCP image, fonts, critical CSS |
prefetch |
Resources of the next page | JS chunks, HTML, data |
When to Use preload vs prefetch
Preload loads with high priority, making the resource available 2–3 times faster than standard discovery. Prefetch loads with low priority only during browser idle time, not affecting current loading. Preload is used for resources of the current page: LCP image, main font, critical CSS. Prefetch is for resources of the next page: JS bundle for the catalog page when navigating from the cart.
Why preconnect is Critical for Fonts
Fonts are usually loaded from an external domain (e.g., Google Fonts). Without preconnect, the browser first performs a DNS lookup, then TCP and TLS — this can take up to 300 ms. Preconnect establishes the connection in advance, saving precious milliseconds from FOUT. It is important to specify the crossorigin attribute for fonts; otherwise, the browser will make two requests: one via preload, another when discovered in CSS. According to the W3C specification, preconnect should only be used for critical domains, no more than 6.
What to Preload First?
Typical set for a page:
- Preconnect to Google Fonts, CDN, API server.
- Preload LCP image (fetchpriority="high").
- Preload main font (with crossorigin).
- Prefetch for likely next page (e.g., cart after catalog).
Without preload, the font will load only after CSS is parsed — causing FOUT (flash of unstyled text). With preload and preconnect, it is available immediately.
How We Implement Resource Hints
We deploy Resource Hints in two ways: server-side HTTP Link header (received before HTML parsing) and <link> tags in <head>. The choice depends on the stack and requirements.
Example for Laravel:
// app/Http/Middleware/ResourceHints.php class ResourceHints { public function handle(Request $request, Closure $next): Response { $response = $next($request); $hints = [ '<https://fonts.googleapis.com>; rel=preconnect', '<https://fonts.gstatic.com>; rel=preconnect; crossorigin', '</fonts/Inter-Regular.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin', ]; if ($request->routeIs('catalog.*')) { $hints[] = '</assets/product-page-chunk.js>; rel=prefetch; as=script'; } $response->headers->set('Link', implode(', ', $hints)); return $response; } } For React/Next.js, we use dynamic <Head>:
import Head from 'next/head'; export default function ProductPage({ product }) { return ( <> <Head> <link rel="preconnect" href="https://cdn.example.com" /> {product.heroImage && ( <link rel="preload" href={product.heroImage} as="image" fetchpriority="high" /> )} </Head> {/* ... */} </> ); } Implementation Stages
- Audit current hints via Lighthouse and Network tab. Identify missing or incorrect directives.
- Configure preconnect for all third-party domains (CDN, fonts, API, analytics).
- Set preload for LCP image, critical CSS, and fonts with correct
crossoriginattribute. - Implement server-side
Linkheader and dynamic prefetch based on navigation (hover prefetch). - Test and document results.
Process and Timeline
| Stage | Duration | Result |
|---|---|---|
| Audit of current hints | 2–3 h | Report with recommendations |
| Setup preconnect + preload | 2–3 h | Ready tags and headers |
| Implement prefetch | 1–2 d | Dynamic prefetch per page |
| Optimization and testing | 4–8 h | Completed project with metrics |
Basic set (preconnect + preload for LCP) — from 4 to 8 hours. Full implementation with dynamic prefetch — from 1 to 3 working days.
Typical Configuration Mistakes
- Preloading a resource that is not used on the page (console error).
- Using preconnect for the same domain together with dns-prefetch (redundant).
- Preloading fonts without crossorigin (double loading).
- More than 6 preconnect directives (interferes with critical requests).
Trust and Guarantees
Our engineers are certified in Laravel and Next.js. Over 5 years on the market, 40+ performance optimization projects. We guarantee a 15–30% reduction in LCP after implementation. Contact us for a free audit of your project. Order Resource Hints implementation and get a consultation.