HTML performance

If you've been writing websites for a while, you might be familiar with our good ol' Hyper Text Markup Language. Using this fun little XML-deriviate, you're able to weave together all sorts of square items on a page. Fun!

There's a catch though: the HTML of yore you knew, is different from today's markup. HTML5 started by adding all sorts of semantic tags to enable the move away from Flash, but it didn't stop there. HTML is a living standard these days — that means continuous deployment of new features, with either daily, or monthly updates depending on your browser (or yearly, if you use Safari 👀).

One of the exciting new features that's recently landed in browsers is the ability to asynchronously load resources. This means that your browser can go ahead and render things, while it's performing requests in the background. And not only that, we've also been handed controls to determine the order in which things should be downloaded.

Now, if we go ahead and add HTTP2 in the mix, things become real interesting. HTTP2 comes with a bunch of new features, but probably the most practical addition is that all requests to the same server can now share a connection! (This is called "multiplexing" in computer-speak). So this now means we can can now efficiently perform lots of requests to the same server, with little overhead, and the ability to prioritize which resources we need straight away, and on which we can wait a little. Booyah — resilient emerging-market-proof networking!


The only way to approach this right, is to get a feel for the tags. So we're going to go low-tech here, and just have you write a bunch of files so you can build some intuition as to how these things work.

Now serve all this up with serve(1) or httpster(1) (which can be installed from npm). Open up your devtools, navigate to the network tab, and watch how things load.

Bonus Challenges

If you're looking for some challenges, perhaps try some of these:


See Also

Author's notes

While "emerging markets" is definitely a buzzword, the idea behind it is not. People in non-western countries tend to use the internet mostly on Android devices, using a 3g connection. Also 4g while going through a tunnel in New York is not much better. What we're trying to say is: making internet things that work well with less-than-ideal connectivity is probably worth it for most people. Tunnel proof web. The internet of tunnels. The internet of Australia's entire east coast. But like, proof. Something like that.

Edit on GitHub Status: offline