Preconnect self

30.09.2014 by Stefan Wintermeyer

You can use preconnect to pre-open a new TCP connection. So the browser can do this time intensive task while it waits for the rest of the HTML-page. Example to preconnect www.example.com:

<html>
  <head>
    <link rel="preconnect" href="//www.example.com">
  </head>
  ...

That’s nothing new. But until I tried it I didn’t know that this could be useful for your own domain too.

While optimizing the index.html of amooma.de I ended with webpagetest.org/…/140925_HW_16V5/ and this waterfall:

<img src=”/assets/2014/09/30/waterfall_no_preconnect.png” class=pure-img-responsive=”true” alt=Waterfall without a preconnect.=”true” width=”930” height=”244” alt=”2014/09/30/waterfall_no_preconnect.png”>

In the 3rd line you can see that the browser opens a second TCP connection to fetch that image at the same time it fetches the image in the 2nd line. Makes sense. But by opening that TCP connection earlier we could save valueable time here. So I changed the HTML to this:

<html>
  <head>
    <link rel="preconnect" href="//amooma.de">
  </head>
  ...

And guess what happend!? The page became about 100ms faster! Have a look at webpagetest.org/…/140929_TQ_HVP/ and this waterfall:

<img src=”/assets/2014/09/30/waterfall_with_preconnect.png” class=pure-img-responsive=”true” alt=Waterfall with a preconnect.=”true” width=”930” height=”261” alt=”2014/09/30/waterfall_with_preconnect.png”>

WebPerf