How to determine critical CSS for your webpage

By /

If you ever tried optimizing your website performance, you probably run your web page through Google Page Speed and got several tips on what can be improved to make your site faster.

In this post we will take a closer look at what is meant by “Eliminate render-blocking resources” and explain step by step how you can fix that.

Render-blocking resources

Page Speed tips “Eliminate render-blocking resources”

When you open a website you often see a blank page before the first content is displayed. This sometimes takes several seconds, especially on mobile and on slow networks (3G). 

First Contentful Paint with render-blocking resources

The reason is that by default the browser delays the page rendering (First Contentful Paint) until it has finished loading, parsing and executing all the CSS files referenced in the <head> of your page. It does this because it needs to calculate the layout of the page. This actually makes sense, because if your browser displayed the content before the styles were fully loaded, you would see a completely unstyled page with elements jumping around while your CSS loads. That’s not the best experience, right?

So what can we do to make the page show the content faster but still in a pleasing appearance?

Inline critical CSS

Critical CSS is the smallest set of CSS rules that is necessary to show the first screen’s worth of content (“above-the-fold”, the content that is visible without scrolling). It should be included as an inline <style>-block as soon as possible in the <head> section, so that it’s included in the first few TCP packets of response. The inline styles should be kept as small as possible, because it won’t be cached like other static resources, so it will be sent on each page load and we don’t want to delay the transmission of the rest of the HTML.

Pro Tip:

  • The Critical CSS should be transferred with the first 14KB of response – that’s approximately the size of the first TCP round-trip.

The rest of the CSS should be deferred in the footer or loaded asynchronously after page-load. But be mindful with these styles too, as we don’t want to transfer too much unused css and waste our user’s bandwidth.

So instead of this:

<link rel="stylesheet" href="path/to/styles.css" type="text/css" />

You’ll need to write this:

<link rel="preload" href="path/to/styles.css" type="text/css" as="style"onload="this.onload=null;this.rel='stylesheet';"/>   

As a result, your content will be visible much faster

First Contentful Paint with critical path CSS and the rest loaded asynchronously

How to find critical CSS

You can create your own critical CSS manually by removing all stylesheets from your webpage and re-add the styles rule by rule until the main layout and the above-the-fold content looks good. This is a tedious process and a long cycle of changes and refreshes in your browser and you’ll need to test multiple screen sizes and browsers. There must be a better solution.

Luckily there are some great tools that can automatically generate the critical CSS for your website.

Critical created by Addy Osmani is an npm module that extracts the above-the-fold CSS and can be integrated in your frontend build process with Gulp, Grunt or Webpack. It uses Penthouse and Puppeteer under the hood.

Upside: 

  • automatically detects all stylesheets on your page
  • supports multiple screen resolutions
  • as per documentation, src can be either a local path or a source code string, but in our tests it worked with an external URL too

Downside: 

  • requires npm or build tools

Install: npm i -D critical

Example Code: 

// index.js
const critical = require('critical');
critical.generate({
  src: 'https://www.peterbagi.de/',
  width: 1300,
  height: 900,
  inline: false
}, (err, criticalCSS) => {
  console.log(criticalCSS);
});

// run on command line:
// node index.js

CriticalCSS created by FilamentGroup is another npm module that is also available as a CLI. 

Upside:

  • You can use the option “force-include” to have more control over the included rules

Downside: 

  • you have to specify the CSS file you want to extract the rules from
  • the CSS and HTML files have to be relative and can’t use HTTP URLs

Install: npm i -D criticalcss

Example code:

// index.js
const criticalcss = require("criticalcss");
criticalcss.getRules("path/to/styles.css", (err, output) => {
  const allRules = JSON.parse(output);
  criticalcss.findCritical("path/to/page.html", allRules, (err, output) => {
     console.log(output);
  });
});
// run on command line:
// node index.js

Penthouse is a powerful tool and great if you have a large number of styles or a dynamic web app, e.g. with Angular. 

Upside:

Downside:

  • You have to specify the css files that you want to extract the rules from.
Screenshot of Critical Path CSS Generator

Sitelocity Critical Path CSS Generator is an online tool where you can enter your web page URL and it automatically parses your HTML, goes through all CSS files and generates the critical CSS to a downloadable file.

Upside:

  • No need to install anything, non-developer-friendly
  • Step-by-step guide how to include it in your web page

Downside:

  • Sometimes unavailable, probably due to high traffic load

Criticalcss.com is an online tool made by the creator of Penthouse, Jonas Ohlsson Aden

Upside

  • Easy to use
  • Clean design
  • Can be used in WordPress as an extension for the plugin “Autoptimize”

Downside:

  • Requires a paid membership 
    • 2£ / month for a regular HTML
    • 7£ / month for use in WordPress

Leave a Comment

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