Automatically Removing Unused CSS from Wordpress Pages?

#help #wordpress #performance

The Problem

A client approached me with a WordPress site (100+ pages) that takes over 20 seconds to load. I analyzed the site with lighthouse and other tools and found that there's at least 2mb of useless CSS and other crap loading 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 used rules. I think it should be very possible to write a plugin that does something like the following on each page load:

Concat all CSS files together
Replace all CSS links with the single concatted link
Render the page
Run purifycss on the rendered output, saving the minified and optimized CSS to a new file with a hashed name
Replace the concatted 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?

Latest comments (15)

rafaljosko • Jun 14 '20

Hello,
Try this - wptypek.com/product/wptypek-perfor...

Thangjam Kishorchand • Apr 14 '20 • Edited

I use Asset clean up the plugin to remove unused CSS from my site and you can see the result unused-css.com/detect-unused-css?u... and they are also built with theme builder which lots of bloats that come with Elementor but fear not I have written a tutorial on how to remove unused CSS (manually) foxscribbler.com/remove-unused-css...

khaled semada • Mar 17 '20

thank u

triviaquestions • Dec 21 '19

hello friends, due to some CSS and images problem my blog speed is very low. My blog is related to quiz questions (triviaquestions4u.com/friends-triv...) and answers which contain simple content and images. but I don't know why it's too heavy. Anyone have a solution to this problem, please?