How to delete unused CSS?

Hi,
We recently developed our website however when we check google page inside score is very low as it has a lot of Unused CSS files.
How can I delete it?

(URL removed by gandalf458 - not needed)

1 Like

I’m not sure what you mean by google page inside score but if it’s a new site it will take time to rank on Google.

The number of unused CSS files has no effect on how your site ranks in Google, but if you want to delete files you don’t want there is always the delete key.

delete-key2

I don’t understand… are you really asking how to delete a file? Can you explain further?

I think he means Google’s PageSpeed Insights. https://developers.google.com/speed/pagespeed/insights/

1 Like

You can’t delete unused CSS very easily. The article below should explain what you need.

2 Likes

I know it does not affect ranking but it does affect page speed and make it lot more slower

Unused CSS files will not make a difference to your page speed, but unused selectors will. As @PaulOB says, identifying unused CSS is not easy but the article he linked to should help.

1 Like

Just follow the below steps. Hope it helps.

  1. Open Chrome DevTools.
  2. Open the command menu with: cmd + shift + p.
  3. Type in “Coverage” and click on the “Show Coverage” option.
  4. Select a CSS file from the Coverage tab which will open the file up in the Sources tab.

Welcome to the forums @bencwalkerbw93. If you read that article you will see why it is not as simple as that.

The article is very correct in everything it says.

Now; IF your CSS doesnt rely on states, and IF your CSS is for your single page and IF javascript doesn’t add/delete elements or classes, then perhaps the Coverage tool is helpful. (Those are generally three very large IF’s for any site.)

I’m not entirely convinced that the first and second if couldnt be accounted for by a site crawler; the third would be considerably more difficult to overcome.

1 Like

he just means there is a tonne of css in his css file which is useless and will be slowing down his site, ive got the same problem.

OK so I guess the real question is - how to identify unused css ?
The first step surely would be to identify why is it useless and if it is useless, why is it there in the first place?
Was it once useful but now not used by the page because the page design has changed?
Is it for older browsers that are no longer supported?
Is it CSS that is now deprecated or unsupported?
If as your original question states you have identified unused css files - why not delete the file?

Hi Kerry this might help… Some people ( i include myself ) are what i call half coders, we dont really know what we are doing but can download templates & build a site by stitching bits together. Ive tried many years ago to be a coder but my brain just cant do it… Any way back to the point us half coders dont know what is useless css particularity when we bought / downloaded the code from a site.

Me personally paid for my the code for my site & I’m now trying to speed it up, but as usual whilst the mantra is make you site faster identfing and taking out defunct / garbage code is a thorny path & intimidating for a half coder :wink:

Hi @Nightwing I don’t know what class I’m in - I guess ‘old coder’ I first started with machine code, then progressed to basic - before windows even! On my first PC the OS was BASIC (the language - not the level) the RAM was a phenomenal 8K and no hard disk - just a tape drive. I remember the first hard drive I dealt with which was 5mb and cost 5K GBP and was the size of a shoe box!

I do struggle with modern technologies having been out of the game for a LONG while. My approach is to take, for example, the CSS file - for example bootstrap.css and copy and paste sections into meaningful separate css files. For example in some projects I will have navbar.css, general.css, different css for different sections. Then I simply comment out parts I don’t think are needed and see if it breaks. If it doesn’t - I rename the file and delete the bits I think I don’t need. If it all goes wrong I can step back. A kind of retrospective culling. Takes a bit of time - but it is a structured approach and I end up with the minimum code I need. If I find out later I was wrong I can paste back in the part I deleted.