preconnect your external sources
Table of Contents
Recently I have added in (and well overdue) the preconnect meta tag.
Preconnect is a resource hint tag you can add to your markup in the <head>. It will tell the browser,
that your markup will be making a request to a resource on an external domain, later int the document.
The tag looks like this
Once defined this will initiate the below, including SSL handshakes
- DNS Lookup
- TCP Handshake
- TLS negotiation
This will save you time later on down the request chain when the browser sees these resources and starts
to decide how to handle them.
The image above is an example of results using Google Chrome Dev Tools at Fast 3G and Online options.
- Fast 3g with preconnect
- Fast 3g without preconnect
- Fast 3g without preconnect
- Online with preconnect
- Fast 3g with preconnect
Red is before and Blue is after.
On mobile connections and a 6x slowdown on processor speed, it has a reduction of 2-6 seconds on page load speed!
Unfortunately, I didn't get a before for the Online test, but you can imagine the gain. The mobile performance
fight is what I am concentrating on day to day at the moment, anyway.
This gives us another great tool in our arsenal.
There are other options as well
Each one gives you certain advantages/disadvantages over the other.
For more in-depth information you can check out
https://w3c.github.io/resource-hints/#preconnect
Sources