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

Рет қаралды 19,616

Күн бұрын

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
perfmatters.io?ref=257
Link to WPRocket
www.sertmedia.com/wp-rocket-s...
Like us on Facebook
/ sertmedia
Follow us on Twitter
/ sert_media
Check out our website for more WordPress Tutorials
www.sertmedia.com
--
Recommended Shared Hosting Platform (Have Used Siteground for over 3 years and it's great!)
SiteGround: www.siteground.com/go/sertmedia
Recommended VPS Hosting Platform (Cloudways is fast, cheap and offers great support!)
CloudWays: www.cloudways.com/en/?id=347522
Bookmark our Amazon.com Link to Support Us!
Amazon.com: amzn.to/2ScDeGl
Some of our Gear Being Used
Camera: amzn.to/2vM5bNI

Пікірлер: 26

@SERTMedia 3 жыл бұрын

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!

@fatjay9402 3 жыл бұрын

I did try the Unused CSS beta.. but it made like 10000000000000 files on the server.. is that normal ?

@MichaelsPaintingChannel 2 жыл бұрын

I have a minified css from autoptimze that is 211k characters long. This is way to big isn't it so?

@dant.6364 3 жыл бұрын

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.

@sanjeev2003 3 жыл бұрын

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

@mzlowe2364 3 жыл бұрын

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

@SERTMedia 3 жыл бұрын

Thank you for watching!

@prasantakumarbindhani 2 жыл бұрын

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

@unTLDR 3 жыл бұрын

Always on point and bringing amazing value! Thanks 🙏🏼

@SERTMedia 3 жыл бұрын

Thank you for watching!

@darvin.santos 2 жыл бұрын

Thanks! I appreciate that advice

@cristianfurculita3137 3 жыл бұрын

valuable, in depth content. keep it up

@nirmitha 3 жыл бұрын

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

@visualmodo 3 жыл бұрын

Really good WP work!

@aliliftawe 2 жыл бұрын

thank you so much, this is very useful

@michaelsafwat2349 3 жыл бұрын

The best channel and the best content in this field.

@SERTMedia 3 жыл бұрын

Thank you for watching!

@marcoscandido7434 Жыл бұрын

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

@monenuel2526 2 жыл бұрын

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

@seekbeautytravel 2 жыл бұрын

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.

@boobloveclub3246 3 жыл бұрын

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?