📝 CSS-Tricks 270: Where’s your head at?

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 <head>.

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).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s