@potsandplants2020 I’ve checked your website and indeed, you have a large combined CSS file created by Asset CleanUp that is over 1.4MB. If you just combined CSS/JS files without unloading the useless ones first, you will end up with large combined files. As you asked for combining, the plugin did that (although the files are quite large and combined you end up with an even larger file) and the page loads fine.
So, to reduce the size of this combined, there are a few things you can do. First, load the website with /?nocache appended to it. Because of the query string, the combination won’t take place (e.g. plugins such as WP Rocket will also not trigger their cache if there are query strings in the URL unless you made an exception for that) and you will be able to see each CSS file individually loading in the Google Coverage which the usage percentage. Please unload the ones that are showing 100% for unused CSS, except the Google Fonts ones (consider doing a trial & error test separately with those fonts, you might not need all of them). Note that in very rare cases, you can perform unloading on a file with a 100% unused reported percentage, but later you find it that some CSS is needed, but this is unlikely. Just a heads up to be careful and test the homepage properly on both desktop & mobile views.
Some of the highly unlikely files that could be stripped include:
- /wp-content/cache/asset-cleanup/css/item
/mmm_mega_main_menu-v1587316476-e1ef0ac3965978ed7aa8665975d43b8c277bd2f1.css
- /wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/style.css?ver=2.5.14
- /wp-content/plugins/woocommerce/assets/css/woocommerce.css?ver=4.0.1
- /wp-content/themes/lukani/css/bootstrap.min.css?ver=4.1.0
- /wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/style.css?ver=2.5.14
- /wp-content/cache/asset-cleanup/css/item/fontawesome-v4.7.0-0140952c64e3f2b74ef64e050f2fe86eab6624c8.css
- /wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=4.0.1
- /wp-content/cache/asset-cleanup/css/item/owl-carousel-v2.3.4-a2fa945f9ac01fa3191a950c3f2cce188f50c4ef.css
To determine the original location (so it would be easier for you) of a cached file, you can click on it while you’re in the coverage and you will see it at the top of the file as a comment (e.g. for the last one, it will be /*! /wp-content/themes/lukani/css/owl.carousel.css */)
Only based on my checks, I determined you can reduce that large file with around 40%.
Happy testing and let me know if I can further assist you!
Hi Gabe,
Thank you for you answer!
When checking again I can see that for example js_composer.min.css is unused for 99.3%, still this 0,7% is messing with the layout of the page. What would you suggest?