Minify CSS code size and make your website load faster.Your website CSS file consist of some thousands of instructions,some you might not be use.But browser has to be download files like colors,fonts etc.Here minify means make it small.With HTML5 and CSS3 ,you can reduce the size of your css file content.
Minify CSS means making it small,lets take an example.In the below code before the css,the size of the code is 469 bytes.After minify this css code,it became to 259 bytes.See the change,obviously you are saving more than 45%.It's a just one part of code in our Genesis theme (WordPress).
h1,
h2,
h3,
h4,
h5,
h6 {
color: #222;
font-family: 'Raleway', sans-serif;
font-weight: 500;
line-height: 1.2;
margin: 0 0 16px;
margin: 0 0 1.6rem;
}
h1 {
font-size: 36px;
font-size: 3.6rem;
}
h2 {
font-size: 30px;
font-size: 3rem;
}
h3 {
font-size: 24px;
font-size: 2.4rem;
}
h4 {
font-size: 20px;
font-size: 2rem;
}
h5 {
font-size: 18px;
font-size: 1.8rem;
}
h6 {
font-size: 16px;
font-size: 1.6rem;
}This is the minified css code,which having just 259 bytes.
h1,h2,h3,h4,h5,h6 {color:#222;font-family:\'Raleway\', sans-serif;font-weight:500;line-height:1.2;margin:0 0 1.6rem;}
h1 {font-size:3.6rem;}
h2 {font-size:3rem;}
h3 {font-size:2.4rem;}
h4 {font-size:2rem;}
h5 {font-size:1.8rem;}
h6 {font-size:1.6rem;}CSS Minify in WordPress :
I'm using WordPress Genesis theme,it has one css file,which instruct plenty of styles like colors,fonts,backgrounds,media queries instructions,styles for widgets,sidebar etc.Really it's a large CSS file,in order to increase site speed,i used css minify tools.
Before minify CSS : In my wordpress theme,the CSS file size is 40331 bytes
After minify CSS :dramatically,the size reduced to 25062 bytes
Savings : about 15269 bytes,it's really big savings. Now your pages load faster. isn't it ?
In addition,you need to optimize your CSS file. Combining external CSS files,Inline Small CSS and avoiding @import css calls are the best practices to make your website super fast.
Minify CSS in WordPress with popular plugins like Better WordPress Minify, WP Super Minify, Assets Minify, etc.
The best way to minify CSS is using online tools, there are plenty of CSS minifier's available to compress style sheet.
Best Online Tools to Minify CSS
In a simple manner,minify css is nothing but reducing the size of your css file.To do this, either you can use any compress and minify online tool or re write your css content to small by using techniques.
There are several best online tools available to compress,clean and minify CSS code.It's doesn't matter whether you are using WordPress or Joomla or Magento or any other platform,css file is common for all websites.With clean compression and minify css tools,you can save up to 50% of file size in your CSS.We are listing only best tools,which gives better results.We tested some 20 tools to minify our CSS ,but many are not doing fine job.The below are CSS minifier and compression tools,which you can use without doubt and boost your website rankings by speeding up your website.
CSS Compressor
Use CSS Compressor to compress CSS to reduce CSS code size and make your website load faster. With this tool you can compress colors,font-weight
remove unnecessary backslashes and remove last semi-colons.
Minify CSS Tool by feed the bot
My favorite Minify CSS Tool developed by Patrick Sexton (feedthebot),it's a one of my best css minifier.It compress according to Google PageSpeed insights.The main advantages of this tool is removing unnecessary blank spaces ,compression of colors and font weight and reducing the CSS size content to maximum.For all projects i use this minify css tool.Thanks to Patrick Sexton to having not only great tool but also advanced page speed techniques to improve website speed.
Minify CSS
With Minify CSS tool,you can Compressor & Minify your CSS file content. Enormously it will reduce the good amount of size of your CSS file.It has some advanced options,which ever you want just select before doing compression and minify your CSS. By using this tool you can compress colors,font-weight and remove unnecessary backslashes.
CSS Minifier
The CSS Minifier is a another best tool to minify your CSS.This tool will reduce your CSS file size upto 50% .To Speed up your website,you must use minify css.This is a very simple tool to use without worry. Just copy and paste your CSS code and get output with huge CSS size savings.