#btconf Düsseldorf, Germany 08 - 09 Nov 2021

Harry Roberts

Harry is an independent Consultant Web Performance Engineer from the UK. He helps some of the world’s largest and most respected organisations find and fix their site-speed issues.

He is both a Google- and a Cloudinary Media Developer-Expert, and has consulted for clients from the United Nations to the BBC, General Electric to the Financial Times, and a whole host more.

When not doing work-work, he writes, teaches, and speaks about the entire gamut of front-end performance. When not doing work at all, he’s probably out riding his bike.

Want to watch this video on Vimeo directly? This way, please.

Get Your <head> Straight

Despite being the only section of a website that a user never sees, the <head> is arguably the most important. It is bound to its own unique set of rules and often governs the overall speed of the page.

In this talk, we’ll look at some specific caveats, some fascinating intricacies, and — critically — the optimum order for a faster <head>. Find out why your <head> tags are so messy, so vital, and, I promise you, so interesting.

Transcription

[Music]

[Audience applause]

Harry Roberts: All right. So, this talk begins somewhat predictably at 3.5 thousand years ago with something called The Cardiocentric Theory.

But this is the belief. They believed it was that important, it was the only real organ that was left inside the human body.

Hippocrates came up with the Cephalocentric Theory, ceph, the prefix (ceph) meaning of the head. But this never really caught on. It took a thousand years before someone first brought this up, and it never caught on. No one really thought the brain was that important.

The heart just pumps blood. Therefore, maybe the brain does something else.

But for about 2500, 3000 years, we had no idea just how important the head was. Human anatomy was completely misunderstood, and almost all the focus was put on the heart, everything from the neck down.

See what I did there. Very smart.

[Faint laughter]

Harry: Oh, wait! My clicker is going to give me a bit of trouble. I can tell.

In the next 40 minutes, you are going to learn way more than you ever thought possible about head tags, way more than you ever wanted to know. I am completely obsessed with head tags, and I can guarantee you (in about an hour), you will be as well.

HTML is parsed line-by-line.

The second important thing, and this actually kind of underpins the whole talk, really, your head is the single biggest render-blocking part of your document. And this sounds really simple just when I say it out loud, but if you stop and think the head is the single biggest render-blocking part of your document.

Because HTML is parsed line-by-line, the body tag, the opening body tag, cannot even be discovered until the closing head type is being finished. And the body is the only thing that actually is visible to a sighted user, right? So, until head is solved, the body might as well not even exist. What this basically means is you need to solve the head tag problem before you can even start to think about your body tags.

nothing, nothing, nothing, everything.

Right? Everything appeared at the same time.

If we were to simply nudge that script out of the head and into the body, this is a diff, this is barely a change, right? But simply moving that script out of the head and into the body, we can discover the opening body tag far quicker, which means that now what happens is we get a slightly better-perceived performance.

This is an absolute tram smash. This is such a mess.

I see it surprisingly frequently, and I see it because of things normally like this. People linking to a third-party CDN for a certain package. In this case, jQuery. You just point @latest or @3, and this will resolve to an actual version number.

Speaking with Jon just before I got on stage, I worked with a client in the U.K. about four years ago and, together, we worked out that if we could make their website 300 milliseconds faster, just 300, they would make an extra 8 million pounds a year. So, if I can get rid of--

Oh, by the way, pro-tip:

[Audience laughter]

Harry: Now, what is interesting here is that we can see on this graph, that stays 492 milliseconds. We got rid of this. It stands to reason we should have gained 492 milliseconds back.

This next one is quite interesting:

Laughter]

[Audience laughter]

Harry:

Actually, we got 140 milliseconds slower for a cumulative improvement of just 280 at this point.

That little asterisk there is to remind me to tell you that this is subject to change because things may change in browsers in the future. This is the current best sort of order based on all of my extensive testing. But there will be caveats and implementation details where, on your site, you might not be able to just simply replicate this.

There are my five friends.

[Audience laughter]

Harry:

Simply by inventing a preload scanner, IE8 moved us to a model a little more like this. Everything done in parallel. You can see how much faster that is. Way nicer.

[Audience whistles and laughs]

Harry:Laughter]

[Audience laughs]

Harry:

The only thing that stuck out to me was this:

So, I spoke to a friend who is much cleverer than I am. Most of my friends are much cleverer than I am. I asked him to query the HTTP archive and find out just how many Web pages (not websites but individual Web pages) this affects. It was actually a really small number: 8500 -- that was it -- webpages, not even websites. This is rare, so the chance it affects anyone in this room is very, very, very slim.

But I moved this line of HTML to the top of the head tags rather than the middle of the head tags, and we saw a tremendous change. In our demo case, we saved this much time.

The other interesting thing is, when the preload scanner does get disabled, so if things download one after the other, but if the preload scanner is disabled for this meta CSP, you also get double downloads. This is also part of the reason why fixing the head tags made one request disappear.

Just moving this one line of HTML to the top of the head tags saved us 3.7 seconds - just moving one line of HTML. Again, never tell your clients what you did. Tell them the outcomes of what you did.

Tell a browser how to deal with the page immediately. Make sure the browser understands what character encoding it should be using. Should it be rendering a zoomable page or not? What is the meta viewport?

Basically, yeah, anything to do with how the browser deals with the page, get that very, very early in the head.

For example, what could happen is, watch this. Look at the tab. That just says the current URL. This site looks down to me.

It literally just says the URL of the page. No actual feedback there. This looks broken.

However -- and this really, really surprised me -- that change was 280 milliseconds faster, which really surprised me because all I did is move some metatags around.

Once I took the median of 5 tests, it was 280 milliseconds faster. This really surprised me (just moving metadata around).

Where it does become a little more interesting--

What you do here is you just swap them around.

What you do is just swap these around.

Very poignant that (eight years later in the same room) this thing finally dies.

Swap these two around, right? Put your script first and we get complete parallelization. Those now happen at the exact same time - way faster.

Basically, you take this--

We take this, and we swap them around, and the waterfall chart now looks a lot more like this. Way faster. Way, way faster.

The Vans website is a bit of a car crash, unfortunately, and their head tag has got over a hundred, like 144 files in their head tags.

I did raise a bug. [

Just reordering synchronous CSS after synchronous JavaScript and imports before JavaScript, reordering this stuff, just moving lines around, the waterfall now looked like this. That huge bit of inline script is now defined before the CSS files.

Remember, HTML is parsed--

Audience: Line-by-line.

Harry:

[Audience laughs]

Harry:

[Audience laughs]

Harry:

Slack actually says this:

Yeah, a fair test. I made sure every file took at least a second to download.

Laughter] I did a workshop at a conference a couple of weeks ago, and this is what their head tags looked like.

[Audience member sneezes]

Harry: Bless you.

You can just create a little bookmark, and it will just work on the fly for any page you visit.

[Audience laughs]

Harry: But you have been very patient and it has been 45 minutes. I just want to say thank you very much for your time.

[Audience applause]

Speakers