@alipour66m thank you for the review and for the suggestion! Indeed, there are CSS files needed to load, but only part of the CSS code is used within them. Often, the main CSS file (e.g. style.css from the theme’s root) is used to load lots of content that is not needed on certain pages as the sections (e.g. the CSS for sidebar) are not split into multiple files. Pages with little content (e.g. a contact or 404 page) will often have to load lots of unused CSS (I’ve often noticed over 90% of unused CSS loading in such pages).
However, purifying the CSS is not such an easy task and even Google’s Coverage tool (which detects the unused CSS after the page was loaded) has to be used several times (e.g. resize for mobile/tablet view and make sure that content is also added to the purified CSS file). Moreover, you might have content added via AJAX calls and elements that are changing styles on hover which also have to be included. For a complex web page, extracting just the lines of CSS code that is needed with 100% accuracy is a time consuming task that in most cases it’s not worthy. You might have a theme that allows you to add modules that require a certain CSS code. Imagine removing and adding new content and then the CSS file has to be regenerated, the task needing manual intervention (because an automatic solution is not 100% reliable).
So, it’s a good idea to purify the CSS in some pages with high traffic (besides making it non-render blocking by preloading it in asynchronous mode, you can check this article to understand what I mean: https://www.filamentgroup.com/lab/async-css.html) as was as you know very well your website and frankly, it’s not that bad to leave a few extra loaded KB, then struggle for perfection and get missing styles, etc. I’m happy to strip 70% of the unused code and leave the remaining 30% to load, but at least the website will load completely fine and the user experience will also be very good if I’m using things like critical CSS or at least preload with async the CSS that is likely not needed above the fold after the first content paint.
Hope it helps! Good luck in optimising your website!
