Archived topic
Remove unused CSS
7 replies · Started by Jim on August 9, 2019
Hi. I keep getting this kind of thing flagged in some speed tests like Google Lighthouse (see shared URL). Do you think this is part of my minified CSS? Or what is it?
Hi there,
That just looks like your CSS for the entire site to me.
Not sure why Google would mark it unused.
Do you get the same warning without any plugins activated?
I deactivated the cache/minification plugin (LSC Plugin) and I get these two paths now marked as unused: wp-includes/css/dist/block-library/style.min.css?ver=5.2.2 andwp-content/themes/generatepress/css/all.min.css?ver=2.3.2. When I enable the plugin, the path is as shared in the link.
Hi there,
It flags this CSS because a significant % of that CSS is not required on that particular page.
What it cannot calculate is that some of the unused CSS is required for other pages, user login status or elements that are loaded after initial page load.
Yes you could go to the extent of creating a Critical CSS path so it loads the the necessary CSS first and defers the rest for later loading. But this is a huge task and really not worth it for such a small amount of CSS. So i would ignore it.
One thing however:
Are you using the Gutenberg editor?
If not then the Disable Gutenberg plugin by Jeff Starr has an option to remove front end styles. Haven't tested it ( and would only do so on a backup / staging site ) but this could remove the first CSS file being loaded.
The LSC plugin has an option to generate critical CSS. So I am not sure if it is working or not. I guess I can ignore that warning. I do use the Gutenberg editor and have converted all my posts to it. But would you tell me why it loads frontend styles while it works backend?
Blocks require their own styling - things such as column layouts, button styles or alignment properties need to be added to the frontend as well.
Aha. That makes sense. But both codes are only like 10kb so not worth the hustle. Thanks for the clarification.
Totally :) You're welcome
