How to bulk find unused CSS and Javascript with Puppeteer.
Bulk find assets, which are used in none of the bulk tested URLs or just in a few page types.
You want to find unused CSS and Javascript and kick it out because it improves speed and is e.g. mentioned in PageSpeed Insights
You probably know the Coverage Report in Chrome. With the tool you can find assets which are in % unused.
Here too (this is another project related to web vitals and Puppeteer) if you have multiple page types it’s not instantly clear which CSS and JavaScript files are 100% unused on all subpages. You have to use the coverage reports on multiple URLs. Puppeteer can automate and bulk test that.
It’s especially interesting I think with a quick and dirty bundled Wordpress with a multi purpose theme and a lot of plugins. In these cases you will find often many scripts switched on but never used.
Automated Coverage Reports for multiple URLs
Puppeteer is perfect to find out coverage for multiple URLs. Here’s a litte script to do it
More about: https://pptr.dev/#?product=Puppeteer&version=v3.3.0&show=api-class-coverage
The results of the script
The script creates a CSV with url, asset url and unused %. A pivot table with row = asset url will create something like this:
It’s sorted by average % unused. So 100% tells us that the file wasn’t used at all in 12 tested URLs. As a follow up I would go with all assets I really control on my domain (yellow) + the ones which were found on all tested 12 URLs (orange).
With a quick and dirty Wordpress it may happen that you find a lot of 100% unused files. A more professional setup looks more like this:
For blick.ch a lot of unused stuff is external.
Unused variance
To check unused variance is interesting too:
Without going into too much detail the marked line shows that on average 36% of the JavaScript code was used. But there was at least one tested URL (out of 19) where 75% of the Javascript was used. So that’s maybe an interesting file for splitting, conditional loading and fine tuning the load priorities.
