For increasing performance of any website, the size of CSS / JS files should be as minimum as possible. To decrease the size CSS files following techniques must be used.
Structure your CSS and HTML elegantly
You must use cascading power of CSS in you html/css code.
For eg. Code like this could be written as
<p class="someClass">First</p> <p class="someClass">Second</p> <p class="someClass">Third</p> <p class="someClass">Forth</p> <p class="someClass">Fifth</p>
Should be written as
<div class='someClass'> <p>First</p> <p>Second</p> <p>Third</p> <p>Forth</p> <p>Fifth</p> </div>
This is just an example, these type of technique could be used in your html/css files to optimize your code.
Use CSS Shorthand Rules
When I was still learning CSS, I found shorthand rules to be quite daunting and confusing at times. But I strived to learn the shorthand syntax for every rule simply because I am lazy and do not want to bother typing the same thing over and over not to mention having to memorize all the rule names.
Compare the example longhand its equivalent shorthand below.
#someid {
background-attachment: fixed;
background-color: #000000;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-position: left bottom;
}
Shorthand version:
#someid { background: #000 url(images/image.png) no-repeat fixed left bottom; }
Optimize Your CSS
Use CSS Optimiser. For very large CSS files it is a quick and easy way to rewrite things that may otherwise prove too time-consuming to optimize manually.
Server-side Compression
Server-side compression techniques have long been put to use by large scale applications for two main reasons. First, bandwidth is precious and expensive. Second, it does not require having to modify code for it to work. What it does require, however, is supported server software (or hardware). Hence the term “server-side”.
One such solution can easily be deployed on Apache servers. Once again SitePoint has written an introduction to server-side compression using Apache and mod_gzip.
Recent Responses