|View this newsletter on the web.
[Robin]: Harry Roberts has been doing a ton of interesting work when it comes to the
<head> element and—no! stop yawning!—there’s good reason for that; it’s the place where all performance problems begin. Or, as Harry says in “Get Your Head Straight”:
The <head> is the biggest single render-blocking part of a page.
I’d venture a guess and say that the
<head> is one element that front-end folks pay the least attention to. But it’s super important! How you load your styles, how you load fonts, how your scripts are loaded; it all directly affects the user experience. And all that goes in the
<head>. And Harry, in that talk, suggests to…
Remove as Much as Possible
- Move low-priority scripts to the closing body tag
- Utilise in-body CSS
- Reduce in-head payloads—external or inlined
- Kill any inefficiencies such as redirects
All that advice is handy and all but the most handiest of things is this tool that Harry built called ct.css. Once you drag and drop a link into your bookmarks bar and click it, it runs a series of tests and highlights all the problems with your website’s
Here’s me running it on CSS-Tricks where it injects a list of suggestions to the top of the page:
The red boxes highlight stuff that you should probably fix—third-party scripts and stylesheets, for example—and the good stuff is highlighted in green. It’s a nifty tool that I’m going to keep in my back pocket since I find that performance fixes in the
<head> are often some of the easiest to fix (sometimes).