ct.css – Let’s take a look inside your <head>

Harry Roberts created a utility CSS file ct.css that x-rays your site’s <head>:

Your <head> is the single biggest render-blocking part of your page—ensuring it is well-formed is critical. ct.css is a diagnostic CSS snippet that exposes potential performance issues in your page’s <head> tags.

<link rel="stylesheet" href="https://csswizardry.com/ct/ct.css" class="ct" />

The CSS basically adds display: block; to all script and style includes. Using attribute selectors, it can then highlight the ones that do things wrongly. For example:

head script[src] {
  display: block;
  border-style:var(--ct-is-problematic);
  border-color:var(--ct-warn)
}
head script[src]::before{
  content:"[Blocking Script – " attr(src) "]"
}

The legend for the output is this:

  • Red: This is an error and should be addressed.
  • Orange: This could be problematic in certain scenarios.
  • Green: This is fine and is purely informational.
  • Solid: This file is the problem.
  • Dashed: Another file(s) are causing problems with this file.

Also available as a bookmarklet that injects the code for you.

ct.css

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.