Optimize CSS file size too big

Question

I'm trying to check my website speed by Google PageSpeed Tools.

Google PageSpeed Tool result:

http://cellsoftware.co.uk/wp-content/cache/autoptimize/css/autoptimize_741fb0cdb70079b195ed32dd2fe38206.css

The css file is too much big. I downloaded for check the size and it's size 1.11MB . After then I'm trying to reduce css by Critical Path CSS Generator it's capacity MAX: 800000 characters but my css file have 1169501 characters. So it's can't reduce.

So what process I can use for optimization ?

Answer 1

A bit late, but my approach would be to see why your CSS file is so large. 1.11MiB for styling is too much. For comparison, a good size CSS should be under 150KiB, perhaps 200KiB maximum. In the case that your CSS is over that, you may have some optimizations you can do. A few points of optimization:

• Unused CSS. Does your stylesheet contain CSS rules that aren't even used? There are tools out there that can scan/crawl your entire site and provide you with references to unused style lines.
• Any data URI's like base64 encoded images in your CSS? Perhaps consider pulling these out. However, if this is your case, you can probably optimize the images through some sort of image file size crunching tool then re-encode them for your CSS.
• Style duplication. If a group of classes have a large portion of style overlap, they should share a style definition and then be altered separately further down the CSS for specific style requirements.
• Overuse of complex selectors. Generally having an ID or class name is preferred and one should avoid complex cascading DOM selectors. This not only hurts the browser parsing of the CSS but bloats the CSS file itself.

If you're using a template (looks like you're using Wordpress), then I'd almost suggest throwing out your current template, getting a nice lean one that is close to what you want and further styling that one with the above rules in mind. I believe that may be your quickest route to a speedy site.