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.
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:
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:
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.
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]
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. [
Remember, HTML is parsed--
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.
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.