DEV Community

Benny Powers 🇮🇱🇨🇦
Benny Powers 🇮🇱🇨🇦

Posted on

Automatically Removing Unused CSS from Wordpress Pages?

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:

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

Discussion (45)

alexphelps profile image
Alex Phelps

This looks inline with your requirement

Google Pagespeed (for nginx) can do this as well and a more robust solution than a wp plugin though it requires more skills and access to setup.

triviaquestion4 profile image

hello friends, due to some CSS and images problem my blog speed is very low. My blog is related to quiz questions ( 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?

adam_cyclones profile image
Adam Crockett

This might not be super helpful, but untie your thinking from the platform. This is not wordpress, this is a collection of files and folders. It is possible that there is a scanner to find unused rules sure but the unused rules might be tied to JavaScript logic. If it where me I'd write a simple puppeteer script and timebox it to strictly 2 hours. If that's not done, push back and explain that there is a serious problem, here is the report, what do you want to do about it? Then manually do the work. It's less risky that the end result won't mess up if you do this by hand.

hyperpress profile image
John Teague

One way to do this would be building an companion plugin for the Autoptimize plugin that runs the purifycss part after Autoptimize renders the concatenated output.css for pages and posts. The trick would be timing the trigger for purifycss. Maybe in a theme hook. Something for me to think about.

thkishor profile image
Thangjam Kishorchand • Edited on

I use Asset clean up the plugin to remove unused CSS from my site and you can see the result 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)

orest22 profile image

Here is an interesting conversation

Might help you.

khaledsemada profile image
khaled semada

thank u

Sloan, the sloth mascot
Comment deleted
rafaljosko profile image
rahuldey12 profile image
Rahul Dey

Which plugins u r using in your site can u send screenshot

Sloan, the sloth mascot
Comment deleted
dgmhubindia profile image

unused css is autoptimizer how can i fix that problem
please help me to solve this. my website is dgm hub

zuzukitap profile image
ZuzuKitap • Edited on

My web site is same problem.

Sloan, the sloth mascot
Comment deleted
lapduc profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct

unused css is a headache problem with me. I use wordpress website with flatsome theme, i tested it with google pagespeed in 3 month, result is bad, google say my website too slow. Now i know how to fix it. i will try clean my css hand html code. My website about used forklift in VietNam .Thanks