Preconnect Resource Hint for Significant Resources
Thursday, December 10, 2020
Preconnect Resource Hint for Significant Resources
The preconnect resource can improve the performance of your website or web application that requires cross-origin resources that are both frequently used and significant.
Here is an example:
<link rel="preconnect" href="https://fonts.gstatic.com">
In the example above we are using the preconnect resource hint for establishing a connection to the Google Fonts resource. This is because our website uses Google Fonts. And, the font is both frequently used and significant to the rendering of our website.
Now, let's break down what the preconnect resource hint does:
- Resolves the IP address for the domain provided.
- Opens a TCP connection to the domain.
- Perform the TLS handshake if the resource domain uses the HTTPS protocal.
The result is reduced latency when requesting significant and frequently used resources.
Instructions
Avoid overusing the preconnect resource hint. It should only be used for domains that contain resources that are frequently used and significant to the website.
Consider combining the preconnect resource hint with the dns-prefetch resource hint.
Consider using the preconnect and dns-prefetch resource hint for font resources.
Improve the performance of your website by reducing the latency to fetch significant resources.
Code Examples
Use the preconnect and dns-prefetch resource hints for significant resource domains
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://storage.googleapis.com">
<link rel="dns-prefetch" href="https://firestore.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://storage.googleapis.com">
<link rel="preconnect" href="https://firestore.googleapis.com">I am a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. I regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, I enjoy skiing, hiking, and being in the outdoors. I started lookout.dev to break down the barriers of learning in public. Learning in public fosters growth - for ourselves and others.
Have a question or comment?