Preconnect to required origins  |  Lighthouse  |  Chrome for Developers
Skip to main content
Docs
Build with Chrome
Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
Web Platform
Capabilities
ChromeDriver
Extensions
Chrome Web Store
Chromium
Web on Android
Origin trials
Release notes
Productivity
Create the best experience for your users with the web's best tools.
DevTools
Lighthouse
Chrome UX Report
Accessibility
Modern Web Guidance
Get things done quicker and neater, with our ready-made libraries.
Workbox
Puppeteer
Experience
Design a beautiful and performant web with Chrome.
AI
Performance
CSS and UI
Identity
Payments
Privacy and security
Resources
More from Chrome and Google.
All documentation
Baseline
web.dev
PageSpeed Insights audit
Isolated Web Apps (IWA)
Case studies
Blog
New in Chrome
/
English
Deutsch
Español – América Latina
Français
Indonesia
Italiano
Nederlands
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어
Sign in
Docs
Lighthouse
Docs
More
Case studies
Blog
New in Chrome
Build with Chrome
Web Platform
Capabilities
ChromeDriver
Extensions
Chrome Web Store
Chromium
Web on Android
Origin trials
Release notes
Productivity
DevTools
Lighthouse
Chrome UX Report
Accessibility
Modern Web Guidance
Workbox
Puppeteer
Experience
AI
Performance
CSS and UI
Identity
Payments
Privacy and security
Resources
All documentation
Baseline
web.dev
PageSpeed Insights audit
Isolated Web Apps (IWA)
Home
Docs
Lighthouse
Preconnect to required origins
Stay organized with collections
Save and categorize content based on your preferences.
Warning: This audit has moved into the Network dependency tree insight as of Lighthouse 13. For more information see What's new in Lighthouse 13.
The Opportunities section of your Lighthouse report lists all key requests
that aren't yet prioritizing fetch requests with <link rel=preconnect>:
Browser compatibility
<link rel=preconnect> is supported on most browsers. See
Browser compatibility.
Improve page load speed with preconnect
Consider adding preconnect or dns-prefetch resource hints
to establish early connections to important third-party origins.
<link rel="preconnect"> informs the browser that your page intends
to establish a connection to another origin,
and that you'd like the process to start as soon as possible.
Establishing connections often involves significant time in slow networks,
particularly when it comes to secure connections, as it may involve DNS lookups,
redirects, and several round trips to the final server that handles the user's request.
Taking care of all this ahead of time can make your application feel much snappier
to the user without negatively affecting the use of bandwidth.
Most of the time in establishing a connection is spent waiting, rather than exchanging data.
Informing the browser of your intention is as simple as adding a link tag to your page:
<link rel="preconnect" href="https://example.com">
This lets the browser know that the page intends
to connect to example.com and retrieve content from there.
Bear in mind that while <link rel="preconnect"> is pretty cheap,
it can still take up valuable CPU time, particularly on secure connections.
This is especially bad if the connection isn't used within 10 seconds,
as the browser closes it, wasting all of that early connection work.
In general,
try to use <link rel="preload">,
as it's a more comprehensive performance tweak,
but do keep <link rel="preconnect"> in your tool belt for the edge cases like:
Use-case: Knowing Where From, but not What You're Fetching
Use-case: Streaming Media
<link rel="dns-prefetch"> is another <link> type related to connections.
This handles the DNS lookup only,
but it's got wider browser support, so it may serve as a nice fallback.
You use it the exact same way:
<link rel="dns-prefetch" href="https://example.com" />.
Stack-specific guidance
Drupal
Preconnect or dns-prefetch resource hints can be added by installing and configuring a module that provides facilities for user agent resource hints.
Magento
Modify your themes's layout
and add preconnect or DNS prefetch resource hints.
Resources
Source code for Preconnect to required origins audit
Resource Prioritization–Getting the Browser to Help You
Establish network connections early to improve perceived page speed
Link types: preconnect
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2019-05-02 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2019-05-02 UTC."],[],[]]
Contribute
File a bug
See open issues
Related content
Chromium updates
Case studies
Archive
Podcasts & shows
Follow
@ChromiumDev on X
YouTube
Chrome for Developers on LinkedIn
RSS
Terms
Privacy
Manage cookies
English
Deutsch
Español – América Latina
Français
Indonesia
Italiano
Nederlands
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어