SHARE
Page Speed: How to Minify or Compress CSS

Search Engine Optimization is not just about valid W3C compliant code. It’s only a starting part of it. Web sites are indexed on search engines through various criteria. Web site ranking also depends upon how fast website can be accessed. Again, it is not only about user’s Internet speed. But about how fast your website can deliver and render content from the server to all these popular search engines.

Which means, Page Speed for a website needs to be optimized through as many possible ways and to do this, we must analyze elements that can be truly optimized to fit pass into Page Speed tests.

How to analyze Page Speed?

Google Page Speed is a great tool to analyze such elements and it gives comprehensive suggestions that can be incorporated to make a faster loading website.

After going through all these tests, I thought I should share some information here in a series of posts called ‘Page Speed’. These are not just the web tools, but also some tips and tricks to understand technical terms, information mentioned on Google Page Speed analysis.

This is the first part of the series.

How to Minify CSS or Use CSS compression

If you test website through Google Page Speed, one of the elements you might see is to Minify CSS. This is nothing but compressing CSS files used, to cut the actual downloadable file size of the website.

What does Minify CSS mean?

Minification is the practice of removing unnecessary characters from code to cut its size, removing unnecessary spacing, and optimizing the CSS code; thus improving load times.

How to Minify or Compress CSS files

  • The first thing to do is, pick up the CSS file mentioned in your page speed report.
  • Take backup of the CSS file you are going to compress.
  • There is a nice CSS Compressor tool available. Go to this online CSS Compressor.

Page Speed: How to Minify or Compress CSS

  • You can choose from many options to set compression rules.

Changes made by the Compressor

Once you process your CSS code through this tool you should see what changes it has made to your CSS. Like,

  • Wherever applicable it has changed the number 2 to correct value of 2px
  • It has optimized font-weight by changing it from ‘bold’ to ‘700’
  • And by changing font-weight from ‘normal’ to ‘400’
  • It also shows that instead of writing #FFFFFF its good practice to write #FFF to compress color values affecting the file size of our CSS.

Page Speed: How to Minify or Compress CSS

Compression Ratio

After using this compression tool, my CSS file size has been reduced by approx 26%

Page Speed: How to Minify or Compress CSS

I will keep posting more information to improve your page speed as I explore. Hope this helps…