Optimisation

Generating above the fold CSS using Chrome Coverage data

Avatar of Jonathan Reinink
David

Bristol WordPress expert and studio owner

Producing “above the fold” CSS for CMS driven sites (like WordPress) can be difficult. Using something like purgecss may be possible with task-driven workflows, yet what about sites that don’t (or even can’t) use this approach? The process takes your loaded webpage and works out what CSS is actually being used. Then with a small bit of manual editing, you can craft an appropriate critical CSS file.

WTF… MANUAL EDITING?

So yeah, this might not exactly fit into a fully automated workflow, but from the way we design and build WordPress websites at Atomic Smash, elements like the header and structure of a site don’t change regularly. So when preparing Critical CSS, we believe you should just be trying to reduce a large flash of unstyled content (FOUC).

Jonas Ohlsson Aden describes critical CSS as:

The critical path is the path to render a web page – what’s needed before that can happen. CSS Stylesheets block rendering. Until the browser has requested, received, downloaded and parsed your stylesheets, the page will remain blank. By reducing the amount of CSS the browser has to go through, and by inlining it on the page (removing the HTTP request), we can get the page to render much, much faster.

This CSS doesn’t have to be perfect, it just has to fill the gap between the content appearing on-screen and the rest of the CSS being loaded. This is why a more hard-coded critical CSS may work for a lot of sites. In theory, this process will only need to be rerun if there are large changes to the header or structure of the site.

Getting coverage data

Chrome has coverage detection built into its developer tools. Open up inspect and navigate to Menu > More tools > Coverage.

Find coverage option here

This will give a breakdown of all loaded CSS and JS:

File breakdown from coverage

In the above example, it tells you that from the main style sheet (style.min.css at the top) 94.5% of its contents are never read. Only 5.5% is actually used for the whole page.

By clicking the filename in that view, you get a thorough breakdown of what is and isn’t being used on a line by line basis:

Useable Critical CSS from a WordPress site
Green is being used on that page load, red isn’t

That’s all well and good, but how do you extract this data?

First, you need to export the usage data by clicking the down arrow in the ‘Coverage’ tab:

Download coverage data from Chrome

This will save a JSON output of all the data you see in the coverage panel. Line by line slices for every referenced file.

The next stage is to process this JSON data into something usable.

Generating critical CSS

At this point, we have the exact required slices of the main CSS file inside the JSON output. We need to process these slices against the live CSS file to pull and combine each necessary string of CSS. Here is a little JS script that can be run through Node to get what we need:

Running the script

Download a copy of the script to your local machine from here. Make sure you have node installed locally, open up a terminal and run:

node ./coverage-css.js path/to/coverage/file absolute/link/to/target/stylesheet

Here is an example:

node ./coverage-css.js Coverage.json https://www.mywebsite.com/style.css

The required CSS for the page is then output:

CSS output
Start of the CSS output

You can now copy and paste this CSS into your site for use as critical CSS.

I would love to know if anyone has any questions or thoughts on this process.