DEV Community

Automatically Removing Unused CSS from Wordpress Pages?

Benny Powers 🇮🇱🇨🇦 on September 20, 2018

The Problem A client approached me with a WordPress site (100+ pages) that takes over 20 seconds to load. I analyzed the site with light...
Collapse
 
alexphelps profile image
Alex Phelps

This looks inline with your requirement -wordpress.org/plugins/psn-pagespee...

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.

Collapse
 
triviaquestion4 profile image
triviaquestions

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?

Collapse
 
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.

Collapse
 
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.

Collapse
 
thkishor profile image
Thangjam Kishorchand • 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...

Collapse
 
orest22 profile image
Orest

Here is an interesting conversation discourse.roots.io/t/removing-unus...

Might help you.

Collapse
 
khaledsemada profile image
khaled semada

thank u

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

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

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
dgmhubindia profile image
dgmhubindia

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