Optimising CSS delivery

Apr 10, 2017 static-sitesperformancepagespeedcritical-css

In a previous post I covered my efforts to improve the PageSpeed ranking of my site.

Today I achieved a perfect 100/100 PageSpeed score on Desktop.

PageSpeed Insights 100/100 score for https://www.josephearl.co.uk on Deskop

To do this I had to optimise my CSS delivery. What does that mean? Well, previously, all of my styles were loaded using a link in the head:

<html>
  <head>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <p>Content</p>
  </body>
</html>

But this is bad and blocks rendering until all of styles.css has finished downloading.

To fix this, you need to work out what CSS is critical to render the visible portion of your page and inline that into your HTML, then include the rest of your styles at the end of your body:

<html>
  <head>
    <!-- Critical CSS inlined into HTML -->
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Content</p>
    <link rel="stylesheet" href="/styles.css" />
  </body>
</html>

Figuring out the critical CSS is the hard part! Luckily there are some handy tools to help you do this.

I ended up using the hosted version of Penthouse, I just had to enter my URL and paste in my CSS and click a button and out popped my critical CSS.

My Content Security Policy does not allow unsafe-inline, so I used report-uri.io’s hash tool to generate a hash for the contents of the critical style section in my head and added that to my policy.