The Problem
A client approached me with a WordPress site (100+ pages) that takes over 20 seconds to load. I analyzed the site with the Lighthouse and other tools, and found that there's at least 2MB of useless CSS and other crap loadings on the home page.
Looking into the WP setup, it uses an off-the-shelf (theme store) theme with the typical glut of useless crap.
The Naive Solution
I could go through each page, analyze the unused CSS with browser extensions, then collate the results of those analyses into a (hopefully smaller) theme style.css This would take hours of repetitive mechanical work, with lots of potential human error.
The Preferred Strategy
Tools like PurifyCSS are able to statically analyze the final rendered markup for a page and strip the CSS file to only contain the used rules. I think it should be very possible to write a plugin that does something like the following on each page load:
- Concatenate all CSS files together
- Replace all CSS links with the single concatenated link
- Render the page
- Run PurifyCSS on the rendered output, save the minified and optimized CSS to a new file with a hashed name
- Replace the concatenated link with a link to the new optimized file
- Serve the page
All of that should happen before the caching plugin.
The Question
Does something like this already exist? What about my plan, is it reasonable? Am I ignoring any potential gotchas?