In the forever quest for faster page load times, one thing that alludes us when using pre-made HTML templates is how to reduce bloat

Google Chrome Devtools has had a built-in tool for a while now called ‘coverage’. It allows you to visit every page in your website and it will report back what percentage of CSS is unused. Even better it will show you in DevTools which lines / styles aren’t in use over a number of pages.

Crucially though it has lacked the ability to access this coverage data for further processing. That was until update 73 to Chrome a few weeks ago which introduced the ability to export coverage data to a JSON file.

This is an excellent addition to Chrome DevTools and we’ll soon see developers publishing scripts to process this data and automatically optimize CSS though to date I haven’t found anyone who has published a script to do this. I even asked the question on StackExchange a few days ago, no-one answered so I decided to build my own DevTools coverage parsing script.

The process is still quite manual and not perfect but compared to running a sitemap through PostCSS or PurgeCSS it’s a far more reliable solution. On a test site I managed to reduce the main stylesheet from the homepage down by 80%, from 1.4MB to 0.27MB without degradation in visuals/functionality.

As always, if you are taking steps to optimise a site, you should always do it locally first and not in a production environment. Vagrant+VVV is my local dev tool of choice but use whatever local dev environment you are comfortable with.

<?php

$target_css = '/wp-content/themes/mytheme/style.css';
$json_string = 'Coverage-20190407T080649.json';
$output_filename = 'output.css';

$jsondata = file_get_contents($json_string);
$obj = json_decode($jsondata,true);
$output_css = '';

foreach( $obj as $arr ) {
    if( strpos( $arr['url'], $target_css ) ) {
        
        foreach ($arr['ranges'] as $name => $value) {
            $length = $value['end'] - $value['start'];
            $output_css .= substr($arr['text'], $value['start'], $length) . PHP_EOL;
        }
        
        break;
    }
}

echo $output_css;
file_put_contents($output_filename, $output_css);

?>