How To Remove Unused CSS In WordPress - WordPress Remove Unused CSS Tutorial 2021 Remove Unused CSS

When it comes to removing Unused CSS in WordPress you have two options. You can attempt to use an automatic tree shaker such as that in WPRocket, or you can manually clean up plugin files using something like Perfmatters.

You will not be able to fully remove all unused CSS your goal is to reduce it as much as you can by cleaning up plugins, loading them in a conditional manner while maintaining a good user experience. Tree Shaking tools can cause styles to go missing, such as missing icons missing transitions, hover effects, and more. But they will be incredibly easy to set up and if they work they will reduce your total amount of CSS more so than manually cleaning it up.

I do not recommend deleting content from files by hand or using the CSS audit in google chrome. This can easily break pages across your site and make it impossible for you to run updates.

If you would like to support the channel, consider using some of our links below!

Link to Perfmatters

Link to WPRocket

Like us on Facebook

Follow us on Twitter

Check out our website for more WordPress Tutorials

--

Recommended Shared Hosting Platform (Have Used Siteground for over 3 years and it's great!)

Recommended VPS Hosting Platform (Cloudways is fast, cheap and offers great support!)

Some of our Gear Being Used

[SERTMedia]

Remember, if you're using an automated tool you're more likely to remove more unused CSS than the manual method but the amount of issues is more likely to increase. My general advice is you're never going to remove all unused CSS (no matter the method) your end goal is to simply reduce the amount of transferred CSS as much as possible. This can mean swapping slow plugins like ShareThis for NovaShare, or consolidating plugins of similar functionality (like Contact Forms). Finally cleaning up plugins to only load on pages where they are needed is very important at reducing transfer sizes on pages where those assets are not being used. For instance, the events calendar knows to not load its assets on pages where no events are included, this improves the performance of the rest of the site, even though the payload on the heavier events page is quite hefty. Let me know if you have any questions!

[sanjeev]

Found your channel yesterday and watched 30+ videos relevant to me. 🙂 Great job.

[dant.]

Glad to see this post. You seem to have been reading my mind about unused CSS. And so glad to see that this channel hasn't gone dormant.

[mzlowe]

So glad to see you posting again. Missed your insights.

[prasantakumarbindhani]

You deserve atleast 100K Plus subscriber.You give 100% value to your subscribers.Great job. 👍👍

[nirmitha]

Thanks for the valuable content, Always, Brother.
You remembered me the big guy (Sylvester) on Scorpions TV series.
You look like him 😆

[michaelsafwat]

The best channel and the best content in this field.

[unTLDR]

Always on point and bringing amazing value! Thanks 🙏🏼

[marcoscandido]

If I use Perfmatters, should I disable Divi Theme Static CSS File Generation and all of its performance features?

[seekbeautytravel]

WP Rocket Unused CSS overall is great once you figure out the safelist for unused css function. By the way their support can help you with that. However the largest problem for me that makes me keep this function off is the fact that it causes html size grow 2-3x and for website with international traffic is horrible since you cannot unload it with CDN. Also if you cannot preload all your pages it will make the first uncached load 4-5 seconds. In my case with thousands of pages and search base functinoality of my website is just impossible. So no good there. I wish they would clean up the css and make it load as a separte css file instead of inlining it.

[monenuel]

Asset Clean Up (FREE VERSION) vs Perfmatters which works better in terms of unloading unused CSS?

[aliliftawe]

thank you so much, this is very useful

[cristianfurculita]

valuable, in depth content. keep it up

[boobloveclub]

My menu icon (hamburger) on mobile disappears with this function enabled. Using Elementor Pro. Anyone know what to white list in 'CSS safelist' wprocket to fix this?

[felipe_arbelaez]

Would WP Rocket support help you out to resolve by the Remove Unused CSS feature?

[dannmarceau]

Small website, ten articles, took an hour.

[prassistant]

Hello! Check the email with a offer (ConveyThis)

[deniss.]

Hello! Check the email with a offer (ConveyThis)