Hello @deepsky1d
Thank you for reaching out and I am happy to assist you with this.
Those files are not unused because of the W3 Total Cache Minify. To confirm this, you can disable CSS minify and you will see all the files that are showing unused in google page speed before the minification process.
What happens is, that there is a good chance that your website contains CSS that has no impact on current page elements. Some frameworks and themes come with dozens of CSS styles that you probably don’t need. If you added a feature during development and removed it, later on, there could still be rules associated with that feature lingering in your style sheets.
This process should be done manually as there is no automatic process that can figure out which part of the CSS should be loading on which page.
If you’re using Chrome, the DevTools tab has a handy tool that allows you to see what code is being executed on a page on what isn’t. To access this tool, follow the steps below:
Open Chrome DevTools
Open the command menu with: cmd + shift + p
Type in “Coverage” and click on the “Show Coverage” option
Select a CSS file from the Coverage tab which will open the file up in the Sources tab
Any CSS that is next to a solid green line means that the code was executed. Solid red means it did not execute. A line of code that is both red and green, means that only some code on that line is executed.
Just because a style isn’t used on one page doesn’t mean that it’s not used elsewhere, so you should audit several pages on your site and keep track of which rules keep appearing on the unused list. You can do this by copying and saving the results of each audit into a Google Sheets document. The ones that appear the most can probably be safely removed.
Once the removal of the unused CSS is completed, you can minify those files and they will not show as unused.
Thanks!
