Remove Unused CSS from Integrity Stack - Google PSI Reccomendation

[podii]

Hi Team,

For the website https://www.afibsurgeons.org/ I was hoping you all might be able to give me some clarity around unused CSS. As you will see below, there is about 25KB of unused CSS that is parsed and loaded on ever page of the site. The origin of this CSS file is …/framework/dist/css/site/stacks/integrity-light*.css. Please see the screenshot below.

I know I can find out details on the CSS using Chrome developer tools, but I did not want to go into the file and start editing things with the fear of breaking my site.

If you could let me know any specific next steps as to getting this unused css out, I would really appreciate it! It is the last step in optimizing my site for speed

Thanks,

Hunter

[christopher]

Hi Hunter,

You can not prevent loading of that CSS file as it is the main theme CSS file and the theme will be broken without that. The Differ CSS case that you see which Google Page Speed suggests is for cases that a portion of the CSS is not used above the fold. But the CSS is needed for the other sections anyway.

We suggest that you hire a Page Speed expert to follow up with the CSS differ and Critical CSS Path. You can learn more about the feature here:
https://www.google.com/search?q=critical+css+path&oq=critical+CSS+pa&aqs=chrome.0.0j69i57j0l4.7967j0j7&sourceid=chrome&ie=UTF-8

and here:
https://www.wpfaster.org/blog/how-to-use-autoptimize-inline-and-defer-css-option

Please kindly consider that the method above is a highly advanced Page Speed customization which is outside of our support scope and you will need to hire an expert to handle the functionality.

Thank you for your understanding.