Learn Performance - Resource Hints

preconnect

The preconnect resource hint tells the browser to open a connection to a domain or subdomain. This is especially useful if you are unable to self-host critical resources.

This demo includes a <link rel="preconnect" href="https://us-central1-web-devrel-apps.cloudfunctions.net"/> in the page's markup. The https://us-central1-web-devrel-apps.cloudfunctions.net/ is used to serve the images in the grid below.

Image 1
Image 1 Image 2 Image 3 Image 4

WebPageTest waterfall chart showing seven resources. The connection for the fourth resource, image-1.jpg is opened before the image is discovered and requested.

The above image is taken from WebPageTest and shows the resources loaded for this page (though from a previous version that was hosted on glitch). If you observe the chart above, you will notice that the connection for the first image resource, image-1.jpg is opened before the image is discovered at 1.7s.

WebPageTest waterfall chart showing seven resources. The connection for the fourth resource, image-1.jpg is opened once the image is discovered and requested.

The above waterfall shows the same page without the preconnect resource hint. If you compare the two waterfalls, the page with the preconnect hint begins downloading the image almost 500ms earlier.

View Source Code 
<head>
  <link rel="preconnect" href="https://us-central1-web-devrel-apps.cloudfunctions.net" /<
</head>