Imagine: a user opens an online store, but the LCP image of the main banner loads in 2.5 seconds — conversion drops by 53%. The root cause is late resource discovery by the browser. The deeper a font or image lies in the DOM, the later the browser finds it and starts loading. This is especially critical for SPAs and React apps with lazy-loaded components. The solution is Resource Hints: preload, preconnect, and prefetch. They give the browser instructions on what to load first. Over 5 years of work, we have implemented these techniques in dozens of projects — each time Core Web Vitals improved by 200–800 ms without changing the architecture. For example, configuring preconnect to Google Fonts and a CDN cut TTFB by 300–400 ms, and preloading the LCP image reduced LCP by a factor of 1.7. In one project, this saved 1.2 million rubles per year in server costs.
What Problems Resource Hints Solve
- Connection overhead — every new domain requires DNS, TCP, and TLS. Preconnect eliminates this delay by establishing the connection before the resource is discovered.
- Late discovery — if a critical resource is included at the end of the HTML, the browser starts loading it late. Preload forces early loading.
- N+1 loading — during navigation, prefetch preloads scripts and styles for the next page, reducing wait time.
Three Directives and Their Purpose
| Directive | When to Use | What It Does |
|---|---|---|
preconnect |
As early as possible | DNS + TCP + TLS to the domain |
preload |
Current page | Load resource with high priority |
prefetch |
Next page | Load in the background with low priority |
Why Preload Is Critical for LCP?
The LCP image is the prime candidate for preload. Without it, the browser downloads HTML, parses it, finds the image, and only then starts loading. With preload, loading begins in parallel with parsing. In our projects, implementing preload for the LCP element saves 500–800 ms on mobile devices. A test on WebPageTest showed: preloading the LCP image improves LCP by 1.7× compared to no hints. This directly impacts behavioral metrics and revenue.
How We Configure Resource Hints
The process starts with an audit: we identify critical resources via Chrome DevTools (Network → Priority). Then:
- Analyze third-party domains — identify HTTP requests (fonts, analytics, CDN). For each, decide: preconnect or dns-prefetch.
- Identify LCP and critical blocks — find the element with the largest visible area, set preload with
as="image". For responsive images, addimagesrcsetandimagesizes. - Configure prefetch for key scenarios — checkout, login, catalog pages. Use dynamic prefetch on hover.
- Implement the Speculation Rules API — for Chrome users, add prerender for pages with high transition probability.
- Verify via Lighthouse — ensure the 200+ ms gap in LCP is closed.
Preconnect — Eliminate Connection Overhead
<head>
<!-- Critical third-party domains — establish connection early -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.ru" crossorigin>
<!-- API server if on a different domain -->
<link rel="preconnect" href="https://api.example.ru">
<!-- dns-prefetch: DNS only, no TCP (for less critical) -->
<link rel="dns-prefetch" href="https://analytics.google.com">
<link rel="dns-prefetch" href="https://mc.yandex.ru">
</head>
crossorigin is needed for resources with CORS (fonts, JSON API).
Preload — Priority Loading of Current Page Resources
<head>
<!-- LCP image — most important preload -->
<link rel="preload" as="image"
href="/images/hero.webp"
imagesrcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w"
imagesizes="100vw">
<!-- Custom font -->
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-regular.woff2" crossorigin>
<!-- Critical JS module (not defer/async) -->
<link rel="preload" as="script" href="/js/checkout.js">
<!-- CSS (if not in <head> directly) -->
<link rel="preload" as="style" href="/css/above-fold.css"
onload="this.onload=null;this.rel='stylesheet'">
</head>
Resource types: image, script, style, font, fetch, document, track, audio, video.
Prefetch — Preload the Next Page
<!-- On the cart page — prefetch the checkout page -->
<link rel="prefetch" href="/checkout">
<link rel="prefetch" as="script" href="/js/checkout.chunk.js">
<link rel="prefetch" as="style" href="/css/checkout.css">
The browser loads prefetched resources in the background with low priority — only after the main resources are loaded.
How Speculation Rules API Improves Prefetch?
Prefetch loads resources in the background — if the user doesn't navigate, bandwidth is wasted. The Speculation Rules API allows prerendering a page fully or configuring eagerness. This provides instant navigation without losing bandwidth.
<script type="speculationrules">
{
"prerender": [
{
"where": {
"and": [
{ "href_matches": "/products/*" },
{ "not": { "href_matches": "/api/*" } }
]
},
"eagerness": "moderate"
}
],
"prefetch": [
{
"urls": ["/checkout", "/cart"],
"eagerness": "eager"
}
]
}
</script>
Eagerness values: immediate, eager, moderate, conservative.
Early Hints (103)
The server sends preload headers before the main response is generated — while the backend generates HTML, the browser already starts loading resources. This saves 100–200 ms in TTFB.
# Nginx with http_v2_module
location / {
http2_push /css/app.css;
http2_push /js/app.js;
http2_push /fonts/inter.woff2;
}
Common Mistakes and How to Avoid Them
| Mistake | Solution |
|---|---|
| Preload an unused resource | Check that the resource is truly critical via Coverage in DevTools |
| Preload a font without crossorigin | Always add crossorigin to fonts |
| Too many preload directives | Limit to 2–3 directives per page |
| Preload + lazy loading | Use preload only for LCP; the rest — lazy |
What Is Included in Resource Hints Setup?
- Audit of the current loading profile (Lighthouse, WebPageTest).
- Placement of preconnect to critical third-party domains.
- Preload of LCP image and critical fonts.
- Prefetch of pages with high transition rates.
- Integration of Speculation Rules API (Chrome).
- Documentation of implemented hints and maintenance recommendations.
- Guarantee that Core Web Vitals will not degrade after release.
Timeline and Cost
Timeline: from 4 to 16 hours depending on project size and number of pages. The exact cost is calculated individually — contact us for an assessment. Order a loading audit: our engineers with 5+ years of experience will help speed up your site. We guarantee an improvement in LCP and FCP of 200–800 ms.