@espacemusculation the option to remove unused CSS is already there. It’s the unloading of the CSS files option. However, Asset CleanUp deals with whole files, not unused CSS from files where some syntax is used and some it’s not.
At the moment, I believe there is no tool that could do this automatically and if it is, it’s not 100% accurate. Some of the syntaxes might be needed for the mobile view while they aren’t for desktop. There could be CSS that is ONLY used after certain AJAX calls are made and the content that is added to the page (asynchronously) needs to be styled. It’s better to load extra CSS and make sure the layout is working fine, then going through the time-consuming process of squeezing every byte. It might be worthwhile in some instances.
I’ve checked your website and you have CSS files that are very likely unused 100% at least on your homepage:
– /wp-includes/css/dist/block-library/style.min.css?ver=5.4.1
– https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css?ver=4.6.4
– /wp-content/plugins/arscode-ninja-popups/assets/vendor/intl-tel-input/css/intlTelInput.min.css?ver=5.4.1
– /wp-content/plugins/fusion-core/css/style.min.css?ver=5.4.1
– /wp-content/plugins/arscode-ninja-popups/tooltipster/tooltipster.bundle.min.css?ver=5.4.1
– /wp-content/themes/Avada/style.css?ver=5.4.1
– /wp-content/themes/Avada-Child-Theme/style.css?ver=5.4.1
I will write an article about unloading unused CSS as the topic is quite popular and plenty of people have requested more information about it. Once I have it ready, I will add its link here 😉
I’m sorry, my new site is https://www.docteur-fitness.com/
When I talk about unused css, I’m talking about theme css for example. 90% of the css in the file is not used. But I can’t disable it because I use part of it anyway.
Someone will maybe devellop this
https://www.webperftools.com/blog/how-to-remove-unused-css-in-wordpress/
@espacemusculation that’s correct! You need ~10% of that CSS on both mobile and desktop view (if you resize the browser’s window while using Google Coverage tool, you will notice that the percentage changes). I’ve analyzed your website and the CSS file and, frankly, it looks like a typical example where extra CSS is loaded and can be easily removed.
I’m planning to write tutorials about unused CSS and a new feature in Asset CleanUp that will be implemented in the next version which will allow you to load alternative versions of the files (the handle name, the order of loading will be the same as well as any dependencies, it’s just the “src” and the “ver” number that will be changed).
I would like to use your website’s homepage as an example of how it can be optimized (e.g. the file /wp-content/themes/authentic/style.css?ver=6.1.2) step by step in order to safely remove at least 60% of the unused code (we have to do it safely and not chase byte by byte as it could be in your disadvantage, I’ll write about it). If you’re okay with that, I can mention your website or its staging URL (if you can provide one, that would be great) and show the users of Asset CleanUp my approach in trimming unused CSS from existing files (which are needed to load, so far the plugin dealt with only whole files). In the end, you will also get a purified CSS version for your homepage that you can use 😉
@gabelivan
Thanks for the explanations 🙂
And no problem to take my site as an example, it would be an honor 🙂
@espacemusculation I noticed you’re using the Authentic theme from Themeforest. Do you know if it has any .scss files in the package? These files are used to convert SCSS to CSS which results in the style.css file that most of the themes have. If they have it, it would speed up the process.
@gabelivan
There are no .scss files, unfortunately.
Kind regards
