Quick and easy ????
When running a Google PageSpeed or Lighthouse report, a common audit category that many website owners and developers encounter is “remove unused CSS”. This is an extremely common audit to fail (especially with WordPress websites), and addressing it can save you multiple seconds of page loading times. (This post describes why)
Lighthouse recommends that you remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity. It’ll display this suggestion for all stylesheets that can save 2Kbs or more by removing CSS.
In this post, we're going to break down what exactly causes this PageSpeed opportunity to show, why removing unused CSS is one of the best things you can do for website loading speeds, and introduce a plugin to automate this whole process for WordPress websites.
Because some CSS contains essential styling information for web pages, it must be loaded before the content of the page is shown to the viewer.
Essential CSS loading must be render blocking, so it is really important to remove as much unused CSS as possible to have the fastest loading pages. This is especially true in WordPress websites, where individual themes and plugins may call excessive CSS classes.
For example many of the Page Builders (think Elementor or Divi) have massive style sheets that total over 200 kilobytes, while only calling around 10% of the classes contained in them for the specific page.
Additionally many plug-ins contain CSS that's called every time any WordPress page loads. This is especially detrimental to paid speed, because 100% of the style stylesheet might not be called on that individual page.. For example, if you have a forms plug-in that is only for the “Contact Us” page, but the stylesheet is loaded site-wide via a element in your site header, you're spending countless milliseconds loading unneeded CSS. When you have 20 plugins, these milliseconds quickly add up to Seconds of time spent loading your page.
Those two points are the reason that one of the most common suggestions that WordPress website owners and developers encounter when running page speed tests is to “Remove Unused CSS”.
Cut out that bloat, and you’ve got a site that’ll load 1-2 seconds faster than before.
We wrote a blog post on how to manually remove unneeded CSS classes from your WordPress website, but in this post we want to introduce our favorite plugin that makes this process much quicker and easier.
Asset Clean Up is an essential plugin to our “SpeedOpp Kit”, the base set of plugins that we install on all WordPress websites when running our speed optimization services. In the remainder of this post we're going to introduce its features, tell you why we like it, and teach you basics in using it. If done correctly, not only will you remove the” remove unneeded CSS” opportunity from your PageSpeed report, but you'll cut seconds off your actual site loading time.
Here’s what it can do and how you can use it.
The main feature of this plugin is called “unload”. Unload allows you to disable unused CSS files on a per-page basis. For the remainder of the essential CSS, Asset Clean Up merges and minifies the files -- lowering their total file size and reducing the number of HTTP requests loaded by the browser.
An example similar to the one given in the “ welcome page” of this plugin is as follows:
Suppose you have a page where 20 files (CSS & JS) are loaded. All have a total size of 2.0 MB. Using Asset CleanUp, you can reduce the number to 8 files by unloading (aka, disabling) the other 12 files which aren’t needed on the specific page. By doing this, you reduce the total size of assets loaded to 1.0 MB. Now, if you combine and minify the remaining 8 files, the total size of the assets becomes 0.75 MB. In the end, the assets will load 2.6 times faster for your visitors and improve your Google PageSpeed score.
Here’s the UI, which shows up on individual backend pages in WordPress.
You can simply toggle on and off individual CSS files, instantly reducing unused CSS. Please note that these screenshots are for the paid version of the plugin. Same UI, except in the free version, you can only remove unused CSS.
The plug-in allows you to test these changes before pushing them to the live site. If you did this manually, you would probably need to download a copy of your site and install it on a localhost, where you would test each individual file to see if it broke the site.
With Asset Clean Up, you can test these changes on the live site before pushing them live. If something breaks, you can simply undo it -- no downtime for anyone.
A review of the features of this FREE plugin:
Simple, but powerful.
This plug-in works in tandem with WP-Rocket (and its creator actually recommends this), our recommended caching plugin for WordPress. Combining both of these plugins will address most of the opportunities that are called on Google PageSpeed reports, like removing unused CSS, eliminating render-blocking resources and minimizing third-party code (as well as a couple others).
The paid version of this plugin (named Asset CleanUp Pro: Performance WordPress Plugin) offers website owners and developers a ton of additional tools that will directly impact the page speed loading times of your website.
Like many speed optimization services and plugins, your investment is well worth it. Quicker page speed leads to higher search engine rankings. When you boost your page placements on search engine results with a faster site, you get more visits (and 93% of them come from a search engine, so this is important).
Your user experience is bolstered from a quicker, snappier site and the combination of both of these elements leads to happier visitors. Faster sites, more (and happier) visitors and better UX leads to more conversions to leads. And finally, more leads result in more revenue.
The free version of Asset Clean Up is an immensely powerful tool, but the paid version of Asset Clean Up is a hundred times better. The developer has rightfully so put some super-powerful features behind this pay wall. For example, this version offers you:
Here are some of our use cases for the paid version of this:
Remove unused fonts from an individual page without recoding the site:
Load plugins only in the pages where they’re required (this saves a TON of loading time):
ID which CSS files would have the biggest impact on PageSpeed if addressed:
As you can see, Asset Clean Up is a super powerful tool for website owners, agencies and developers. It's the perfect tool to help you remove unused CSS and boost your PageSpeed score, and we wholeheartedly recommend it to anyone looking for a free way to boost their PageSpeed score and website speed.
Interested in a professional service that will improve your PageSpeed score (or your money back)? Check us out.
IsoGroup- Web Dev/Design, WordPress and More