Use rel=preconnect

All
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z

Preconnect is a hint you give the browser to start connecting to important external servers before they are actually needed. It reduces connection setup time and can speed up loading for critical resources. Use it sparingly though — too many preconnects can waste resources.

Use rel=preconnect

Rel=preconnect is a resource hint that tells the browser to establish a connection to an external server before it actually needs to download anything from it. A typical connection involves three separate steps — DNS lookup, TCP handshake, and TLS negotiation — each of which adds latency. Normally, these steps happen right when the browser discovers it needs a resource from that server. Preconnect moves them earlier in the timeline so that when the browser does need the resource, the connection is already open and ready. For critical third-party origins like font providers, CDNs, or API servers, this can save 100 to 300 milliseconds per connection.

Why It Matters

Connection setup takes time. Before the browser can download a font, script, or stylesheet from an external server, it must complete DNS resolution, establish a TCP connection, and negotiate TLS encryption. Each step adds round-trip latency, especially on mobile networks.
Third-party resources are discovered late. The browser often does not know it needs resources from a particular server until after it has parsed HTML, downloaded CSS, and discovered a font-face rule or a script reference. By then, the connection overhead delays the actual download.
It is lightweight and low-risk. Preconnect only sets up the connection — it does not download anything. If the connection is not used, the cost is small. If it is used, the savings can be significant, especially for high-latency connections.
It helps critical rendering resources arrive faster. Fonts and stylesheets loaded from external CDNs directly impact how quickly the page renders. Preconnecting to those servers shaves time off the critical rendering path.

How to Use It

Identify critical third-party origins. Look at your page's network requests and identify external servers that serve resources needed early in the page load — font providers, CDNs, API endpoints, or analytics services.
Add preconnect link tags. Place <link rel="preconnect" href="/https://example.com"> in the document head for each critical external origin. Include only the origin (protocol and domain), not specific file paths.
Include crossorigin when needed. If you will fetch resources that require CORS (like fonts), add the crossorigin attribute. Without it, the browser may establish a second connection when the actual resource request arrives with different credentials.
Use dns-prefetch as a fallback. For broader browser support, pair preconnect with <link rel="dns-prefetch" href="/https://example.com">. DNS prefetch only handles the DNS lookup, but it is supported by older browsers that do not understand preconnect.
Limit to two or three origins. Each preconnect uses CPU and network resources to establish the connection. Keep it to the most critical origins — typically your font provider and primary CDN. Preconnecting to every external domain wastes resources.

Common Mistakes

Preconnecting to too many origins. Each connection consumes resources. Preconnecting to eight or ten servers uses bandwidth and CPU that could be spent actually loading content. Focus on the two or three most critical origins.
Preconnecting to your own domain. The browser already has a connection to your origin server. Preconnecting to it is redundant and wastes a link tag. Only preconnect to third-party origins.
Forgetting the crossorigin attribute. If you preconnect without crossorigin but then request a CORS resource (like a font), the browser opens a second connection because the first one was established without CORS credentials. The preconnect is wasted.
Preconnecting to non-critical origins. Preconnecting to a server that serves analytics or advertising scripts does not help your users see the page faster. Save preconnect for origins that serve resources critical to the initial render.

Bottom Line: Preconnect to two or three critical third-party origins, include the crossorigin attribute when fetching CORS resources, add dns-prefetch as a fallback, and avoid preconnecting to your own domain or non-critical servers. It is a small tag that can save hundreds of milliseconds on critical resource downloads.

Hits - 209

Synonyms: Preconnect, Early Connection, DNS Prefetch

What Does "Liquid Purple" mean?

noun | / LIK-wid PUR-pul /

(biochemistry) Also known as visual purple or rhodopsin — a light-sensitive receptor protein found in the rods of the retina. It enables vision in dim light by transforming invisible darkness into visible form. Derived from the Greek rhódon (rose) and ópsis (sight), its name reflects its delicate pink hue and vital role in perception.
(modern usage) Liquid Purple — a digital marketing agency specializing in uncovering unseen opportunities and illuminating brands hidden in the digital dark. Much like its biological namesake, Liquid Purple transforms faint signals into clear visibility — revealing what others overlook and bringing businesses into the light.

Origin: From the scientific term rhodopsin, discovered by Franz Christian Boll in 1876; adopted metaphorically by a marketing firm dedicated to visual clarity in the age of algorithms.

Client Login

Rooted in Southern California, Serving the World.
For over 20 years, Liquid Purple has been headquartered in the heart of Southern California, serving clients across Irvine, Newport Beach, Anaheim, and the greater Los Angeles area. While we are proud of our local roots, our digital reach extends far beyond our local area. We support businesses in major hubs like Denver, Dallas, New York, and Miami, as well as international clients. Our ability to operate across time zones means you can often wake up to completed tasks and progress updates—keeping your business moving while you sleep.

Glossary of Terms

Use rel=preconnect