Getting Your `head` Straight: A New CSS Performance Diagnostics Snippet

There are plenty of ways to detect performance bottlenecks and audit CSS. We can look into common performance bottlenecks and the complexity of stylesheets, the way we load assets, and the order in which it happens.

One helpful way to spot common problems easily is to use some sort of a performance diagnostics CSS — a dedicated stylesheet that highlights potential problems and errors.

Today, during his talk at Webexpo Prague 2021, Harry Roberts, a web performance consultant and front-end engineer, introduced a little helper that helps him spot common performance bottlenecks easily. And that is mostly related to the order of how assets are loaded in the <head>.

As Harry says,

Modern news platform
for demanding readers

Subscribe to thematic newsletters prepared by professional editors.

  • Read your newsletters at regular time you want. E.g. every day at 9am.
  • We update your timeline only every 3 hours. Because that's sane.
  • No notifications. No endless scrolling. No addiction and FOMO.