How to remove Unnecessary Stylesheet


#1

image

In a test, I conducted on my website. I found website loading too many stylesheets. I reached to that particular location of file and hide it. In this hope that it would not be called again but the result was the same.

I tried techniques, even edit stylesheet and put this sign in the begging and end of the text /**/ (hide) so that it did not call.
The Outcome was same.


#2

This is called commenting out the CSS, it will not stop the file request.


#3

The only unnecessary file I see in the screenshot is dashicons.min.css


#5

Please be aware that each stylesheet has some kind of use, removing it will break your site functionality.

  • style.css it’s for your theme styling
  • jetpack it’s for JetPack related stuff
  • dashicons, WordPress uses it show icon inside WordPress admin area as well as frontend it is used by some theme.
  • font-awesome: It’s a similar to dashicons, used by famous plugin like ShortCodes Ultimate. Removing font-awesome will remove all major icons.
  • Google Font, it’s for your font styling.

etc …

In fact there are some tool available like this https://uncss-online.com/ however I don’t recommend.

Solution

  • Don’t attempt to remove any stylesheet unless you know what exactly you are doing. It should be done properly via functions.php as WordPress officially recommends.
// removing Google Fonts which handle is google-fonts
function hgk_dequeue_google_fonts() {
    wp_dequeue_style( 'google-fonts' );
}
add_action( 'wp_enqueue_scripts', 'hgk_dequeue_google_fonts', 20 );
  • If you want reduce stylesheet count, setup ‘Autoptimize’ plugin. That would be easier for you.

  • You may try Autoptimize criticalcss.com power-up plugin in addition to Autoptimize for better result. (Premium)


#6

I undo all my changes and choose second option, to install “Autoptimize” plugin.

Thanks, @gulshankumar