PERFORMANCE · SEO GLOSSARY
Resource Hint (preconnect, preload, prefetch)
HTML link elements in the `<head>` that tell the browser to proactively establish connections, download critical resources, or prefetch resources for future navigations — reducing latency for key page elements including the LCP image.
Definition
Resource hints are `<link>` elements placed in the HTML `<head>` that instruct the browser to proactively fetch or prepare resources before they are needed, reducing latency at the point of use. The four main resource hints for web performance optimisation: (1) **`<link rel="preconnect">`** — establishes a TCP connection, DNS lookup, and TLS negotiation to an origin server in advance of any resource requests from that server. Use for third-party origins that will be needed early in the page load: font servers (`preconnect` to fonts.googleapis.com or fonts.gstatic.com), image CDNs, analytics servers. Saves 100–300ms per connection when the browser would otherwise wait to initiate the connection until the resource is actually requested. Usage: `<link rel="preconnect" href="https://fonts.googleapis.com">`. (2) **`<link rel="preload" as="[type]">`** — tells the browser to download a specific resource with high priority immediately, before it would naturally be discovered in the page rendering process. Most commonly used for: LCP images set as CSS backgrounds (which the browser can\'t discover until CSS is parsed — a preload link starts the download earlier); web fonts (to avoid FOIT/FOUT during font loading); and critical JavaScript files. Usage: `<link rel="preload" as="image" href="/hero.webp" type="image/webp">`. (3) **`<link rel="prefetch">`** — low-priority download of resources that will be needed for the next navigation (not the current page). The browser downloads prefetched resources during idle time and caches them. Common use: prefetching the next article in a series, prefetching common navigation targets. (4) **`<link rel="dns-prefetch">`** — resolves the DNS of a third-party origin in advance without establishing a full connection (cheaper than `preconnect`). Use for third-party origins where the latency saving is useful but doesn\'t justify the full connection overhead. `preconnect` is preferred over `dns-prefetch` for origins needed early in the page load. **Overuse caution**: resource hints instruct the browser to consume network bandwidth and CPU proactively — too many preloads or preconnects can compete with critical resources and harm rather than help performance. Target preconnect at 1–3 critical third-party origins; target preload at 1–2 truly critical above-the-fold resources.
Why it matters for SEO
Resource hints are one of the most impactful and lowest-effort Core Web Vitals optimisations available. A single `<link rel="preload" as="image">` hint for the LCP hero image can reduce LCP by 200–600ms by starting the image download before the browser\'s natural discovery timeline (which may wait for CSS parsing or JavaScript execution to identify the LCP image). For pages using Google Fonts or other external font services, a `<link rel="preconnect">` hint reduces the font FOIT (Flash of Invisible Text) delay by establishing the connection before the font `@font-face` declaration is encountered in the CSS. These improvements are visible in CrUX field data within 28 days of deployment — they translate directly to improved LCP scores in Google\'s Core Web Vitals assessment.
How DeepSEOAnalysis checks this
The audit checks the `<head>` of each crawled page for resource hints and evaluates their correctness. Specific checks: `<link rel="preload" as="image">` for the LCP image (present vs missing — if the LCP element is an image set as a CSS background, a preload hint is critical and its absence is flagged); `<link rel="preconnect">` for third-party origins used early in the page (font CDNs, image CDNs, analytics origins — missing preconnects for these origins are flagged); incorrect `as` attribute on preload hints (wrong type causes the resource to be loaded twice — once by the preload hint and once by the natural discovery); and overuse (more than 5 preload hints is typically a signal that non-critical resources are being unnecessarily preloaded, competing with critical resources). LCP field data from CrUX is reported alongside these findings.
Useful tools and resources
GLOSSARY
Related terms
performance
Core Web Vitals
Three Google metrics — LCP, INP, and CLS — that measure real-user loading, interactivity, and visual stability.
Read definition →performance
Lazy Loading
A browser performance technique where images and iframes are deferred from downloading until they are near the viewport — reducing initial page weight and improving load time for above-the-fold content, but harmful for LCP images when applied incorrectly.
Read definition →performance
Next-Gen Image Formats (WebP, AVIF)
Modern image compression formats — WebP and AVIF — that deliver significantly smaller file sizes than JPEG and PNG at equivalent visual quality, directly reducing image payload and improving Core Web Vitals LCP.
Read definition →performance
Page Speed
The time it takes for a page to load and become usable — measured by multiple metrics including TTFB, FCP, and Core Web Vitals.
Read definition →See how your site scores on Resource Hint (preconnect, preload, prefetch).
The free DeepSEOAnalysis audit checks resource hint (preconnect, preload, prefetch) and 100+ other signals. Full report, no signup.
Run a free audit →