Get Your HEAD Straight
You love WebExpo and you love performance. Plus, we love Harry Roberts because his lectures and articles always dive deep.
At this year's WebExpo, Harry explained how the mere order of elements in the <head> can shift your website's speed.
Test the Correct Order of Elements in <head>
In his talk, Harry shared an instance where such a seemingly minor detail potentially cost his clients millions of dollars. Don't worry, you probably won't see such drastic effects, as Harry's example is like a needle in a haystack; a win in the optimization lottery.
However, if you think you've tackled the big speed issues, or just want to test whether everything's in the right order, try his tool CT.CSS.
It's a snippet of CSS that alerts you to potential order errors in the <head> section:
- Add the CSS directly to your page.
- Use a bookmarklet.
- Save it in the Snippets within Chrome DevTools.
The choice is yours. Eager to see it in action? Check out the demo.
We've applied this to several websites. Here are some examples:
The image shows a very popular Czech site. Can you recognize it? :-)
If you see a red-framed warning, take it seriously. It could be that your site is one of those where the fix might have a significant impact.
Or perhaps you'll find that the speed culprit of your site isn't hiding here.
What Is the Correct Order of Elements in <head>?
Let's see how it should be laid out, 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 containing @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">
<!-- Etc: SEO, meta tags, icons, Open Graph... -->
Want to learn more? Check out Harry's lecture slides.