PERFORMANCE · SEO GLOSSARY
Preconnect
Preconnect is an HTML resource hint (<link rel="preconnect" href="...">) that instructs the browser to establish a connection (DNS lookup, TCP handshake, TLS negotiation) to a third-party domain before it is actually needed — reducing latency when a resource from that domain is requested during page load.
Definition
Establishing a connection to a third-party domain involves three steps: DNS lookup (resolving the domain to an IP address), TCP handshake (establishing the connection), and TLS negotiation (for HTTPS — establishing the encrypted channel). This sequence can take 100–300ms on a typical connection, and up to 500ms+ on mobile. If the browser doesn\'t discover that a third-party resource is needed until it parses the HTML and encounters the resource reference, those 100–300ms are added to the resource\'s load time. Preconnect tells the browser to start this connection process immediately when the HTML page begins loading — before the resource reference is encountered: <link rel="preconnect" href="https://fonts.googleapis.com">. **Most impactful preconnect targets**: (1) Google Fonts — if using Google Fonts, preconnect to both fonts.googleapis.com and fonts.gstatic.com; (2) Third-party analytics (Google Analytics, Segment) — preconnect to the analytics endpoint; (3) CDN origins — if the CDN hostname is not the same as the page hostname, preconnect to the CDN origin; (4) API endpoints called early in page load. **Preconnect vs dns-prefetch**: dns-prefetch performs only the DNS lookup (not TCP and TLS). It is lower-cost than preconnect but provides less benefit. Use preconnect for origins where you\'ll request resources early in the load; use dns-prefetch for origins where you\'ll request resources later. **Limit preconnect to 4–6 connections**: establishing unused preconnect connections wastes bandwidth and CPU. Only preconnect to origins from which you will request a critical resource within the first 3 seconds of page load. **crossorigin attribute**: for requests made with CORS (typically fonts and XHR), add crossorigin to the preconnect tag: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>.
Why it matters for SEO
Preconnect is one of the cheapest performance wins available — a few HTML tags that reduce latency for third-party resources without changing the resources themselves. For pages loading Google Fonts (extremely common), the preconnect tags prevent the font loading from being delayed by 100–300ms of connection setup time, which directly reduces FOUT (Flash of Unstyled Text) and CLS risk. For LCP images served from a CDN with a different origin, preconnect reduces the time before the image can begin downloading.
How DeepSEOAnalysis checks this
The audit checks whether preconnect (or dns-prefetch) hints are present in the page <head> for common third-party origins detected on the page — Google Fonts, analytics providers, and CDN origins. Missing preconnect for Google Fonts on pages using Google Fonts is flagged as a performance optimisation opportunity.
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
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 →performance
font-display
The CSS font-display descriptor controls how a web font loads and displays during the period before the font file has downloaded — choosing between invisible text (block period), fallback system font (swap period), or abandoning the web font load. font-display: swap is the standard recommendation for balancing visual stability and text visibility during font load.
Read definition →core web vitals
Largest Contentful Paint (LCP)
The Core Web Vital measuring how long it takes for the largest visible content element in the viewport to render — good LCP is under 2.5 seconds at the p75 threshold using real Chrome user data (CrUX).
Read definition →performance
Render-Blocking Resources
Render-blocking resources are CSS stylesheets and synchronous JavaScript files in the <head> that prevent the browser from rendering page content until they have fully downloaded and parsed — directly delaying First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
Read definition →See how your site scores on Preconnect.
The free DeepSEOAnalysis audit checks preconnect and 100+ other signals. Full report, no signup.
Run a free audit →