Get Your HEAD in Order

We love WebExpo and performance. And we’re big fans of Harry Roberts, whose talks and articles always go in-depth.

Harry, at this year’s WebExpo, spoke about how the mere order of elements in the head can affect website speed.

#Test the correct order of elements in the HEAD

In the talk he cited an example where such a small detail potentially cost his clients millions of dollars. Don’t expect that kind of impact on your sites—Harry’s example is a needle in a haystack, a lottery win for optimization.

However, if you think you’ve already solved big speed problems, or you just want to verify everything is correct, try his tool CT.CSS.

It’s a small CSS snippet that will warn you about potential head-order mistakes:

The choice is yours. Curious? Check out the demo.

We’ve implemented it on a few sites. Examples:

In the image you’ll see a highly visited Czech site. Can you tell which one it is? :-)

If you see a red-framed alert, take it seriously. It could be that your site is one of those where a fix would have a substantial impact.

You might also discover that the root speed issue isn’t there.

#What is the correct order of elements in the HEAD?

Let’s review what should be, at least according to Harry:

    <meta charset | http-equiv | viewport>
    <title>

    <!-- Preconnect (https://www.vzhurudolu.cz/prirucka/preconnect) -->
    <link rel="preconnect">

    <!-- Asynchronous JS (analytics, etc.) -->
    <script src="" async></script>

    <!-- CSS that contains @import -->
    <link rel="stylesheet" href="…">

    <!-- Synchronous JS: -->
    <script src="…"></script>

    <!-- Synchronous CSS: -->
    <link rel="stylesheet" href="…">

    <!-- Preload (https://www.vzhurudolu.cz/prirucka/preload): -->
    <link rel="preload">

    <!-- Asynchronous JS with low priority: -->
    <script src="" defer></script>

    <!-- Prefetch and prerender: -->
    <link rel="prefetch">
    <link rel="prerender">

    <!-- ATD: SEO, meta tags, icons, Open Graph… -->

Interested in more? Check out the slides from Harry’s talk.