While running a Speed test, you may have noticed PageSpeed Insights warning of Unused CSS removal. Would you like to remove unused CSS from your WordPress site to make it load faster & get better performance grades ?
There is a lot of CSS code that gets added by WordPress themes and plugins that you do not require. The performance of WordPress and the user experience can be improved by removing the unused CSS code. We will demonstrate in this article how you can easily remove unused CSS from your WordPress website without causing your website to break.
Remove Unused CSS in WordPress Using different Ways
If you want to reduce the amount of unused CSS on your WordPress website, there are a few different methods that you can try.
While it would be possible to remove all of the unnecessary CSS in WordPress, it would be quite a difficult task. In addition, as a result of the way WordPress works behind the scenes, it may be difficult for some users to find and remove unnecessary CSS.
In that case, we’ll show you different ways of removing unused CSS, and you can pick the best method that suits your needs.
Find Your Largest CSS Files
To see your most extensive CSS files, sort your coverage report by “usage visualization” in Chrome Dev Tools. URLs typically include the name of the plugin, theme, or third-party code which generated the file. As a result, it will now be easier for you to determine what needs to be optimized.
Remove Unused CSS With Used CSS In A Separate File
It is faster to create a separate file since the HTML size does not increase, and the file can be cached, unlike inlining. It is also loaded in a separate file by LiteSpeed Cache’s CSS and FlyingPress. In addition, WP Rocket optimizes for scores rather than visitors, unlike most other plugins, which use different files because they are faster.
Avoid Plugins That Add CSS
Tools like Query Monitor and WP Hive are good, but they don’t always show whether a plugin adds extra CSS/JS to the front end. As a result, the plugin’s full impact can only be observed after re-testing your website after adding content to the front end. The most common culprits are galleries, sliders, contact forms, comments, chat, calendars, and page builder plugins related to design.
Use A Lightweight Theme + Page Builder.
The front end is overloaded with CSS, JavaScript, and fonts. As a result, a slow website is guaranteed when combined with extra page builder plugins such as Elementor Pro and Ultimate Addons.
Enable CSS Optimizations In Page Builders
Among these settings are Elementor’s experiments and Divi’s performance settings, which include several options for reducing CSS size (e.g., improved asset and CSS loading in Elementor and dynamic CSS in Divi). In general, you will get better results if you enable more performance.
Disable Icons If You Don’t Use Them
If If you are not using Elementor icons, turn them off. For Google Fonts + Font Awesome, you can do this in Perfmatters or Elementor’s documentation.
Remove CSS In Asset Unloading Plugins
Using Perfmatters, you can disable CSS/JS (or entire plugins) where they are not needed, remove unused CSS, and replace YouTube iframes with preview images. The remaining unused CSS can be made more accessible by all these methods. CSS/JS files can also be disabled with Asset CleanUp Plugin.
Lazy Load Background Images Found In CSS
Most cache plugins won’t lazyload background images if they’re packed in a separate CSS file.
Therefore, if you would like to lazy load background images, please refer to the documentation of your cache plugin. FlyingPress comes with a lazy-bg helper class you can add to the additional CSS class, unlike WP Rocket which requires inline HTML. A lazy-bg helper class can be manually added, or Optimole has a solution using CSS selectors.
Remove Gutenberg CSS
Suppose You can dequeue the Gutenberg block library if you do not use Gutenberg blocks. Use Code Snippets or functions.php to add this.
Combine CSS (Or Not)
The CSS/JS size should not exceed 10KB if you combine them. In most cases, CSS and JavaScript should not be combined since it is almost impossible.
Disable WooCommerce Styles
By default, WooCommerce loads styles across your website. If you only use these styles on eCommerce pages, you can disable them everywhere. WooCommerce has documentation, but we recommend Disable WooCommerce Bloat, which has many more settings for bloat removal.
Find more such articles at Seahawk Media.
