About Us | Sitemap | RSS Feeds
Home/CSS/CSS Optimization

CSS Optimization

CSS optimization is a must in todayís cut-throat competitive world. There are trillions of websites running across the globe and everyone is looking to offer the best user experience. This is very important, as no one likes to spend much time in browsing your site and wait for the page to refresh in hours. Therefore, no matter how good looking, informative the website is, the audience will leave you and never come back.

This tutorial is all about the different CSS optimization techniques, CSS optimization tricks and some CSS optimization tips. Pay attention to the below given sections for a detailed understanding.

Seek Help from Your CSS Shorthand Buddy

Use CSS shorthand to reduce the amount of code contained in a CSS document. This will surely optimize your CSS files and decrease their size significantly. It will further help you generate more efficient code for faster page downloads. This is a really cost-effective approach for achieving cost-effective website acceleration. CSS shorthand makes it even easier for you to style your markup, and helps you code faster and in a consised manner.

View Plain - Print Usage:
  1. .short
  2. {
  3.     padding:10px 5px 8px 15px;
  4.     font:bold 12px/18px arial,verdana;
  5.     color:#f00;
  6.     background:url(myimage.png) #ffffff 0px 0px no-repeat;
  7. }

Thereís No Scope For White Spaces/Line-Breaks

The white spaces and line breaks are something that we normally ignore in our CSS files. However, these extra white spaces and line breaks add a lot of bytes to the overall file size of the website. This is why it is advisable that one should make proper use of them without leaving any unnecessary space or line break in the CSS file.

Once coding is done in such a manner, rectifying the mistakes can be really tough. So, it is better to keep this in mind while coding it in the first place.

The following example will clarify the point further:

View Plain - Print Usage:
  1. .short
  2. {
  3. padding:10px 5px 8px 15px;font:bold 12px/18px arial,verdana;color:#f00;
  4. background:url(myimage.png) #ffffff 0px 0px no-repeat;
  5. }

Merge Multiple CSS and Stay Ahead

Merging multiple CSS files is a great way to optimize CSS files existing in a website. This guarantees all the files will be called at once enabling the pages to load fast. However, you can combine them together and then optimize that single large file using some compression tool also. This will reduce the total CSS file size of the website significantly. Unfortunately, if you try to do this manually you are going to run into maintenance problems.

The following example will clarify the point further:

View Plain - Print Usage:
  1. <head>
  2. <link href="URL0.css" rel="stylesheet" type="text/css" media="all" />
  3. <link href="URL1.css" rel="stylesheet" type="text/css" media="all" />
  4. <link href="URL2.css" rel="stylesheet" type="text/css" media="all" />
  5. </head>

Merge multiple CSS in one CSS only, for this you can merge manually or can merge dynamically with programming:

View Plain - Print Usage:
  1. <head>
  2. <link href="Global.css" rel="stylesheet" type="text/css" media="all" />
  3. </head>

Forget Internal/Inline CSS, Use External Only

Do not use internal or inline CSS as they make JavaScript and CSS inlined in HTML documents to get downloaded every time the HTML document is requested. It is advisable to use external CSS files for faster pages because the JavaScript and CSS files are cached by the browser. This gurantees reduced HTTP requests without increasing the size of the HTML document. However, if you put the JavaScript and CSS files in external files and get cached by the browser, the size of the HTML document decrease significantly without increasing the number of HTTP requests.

The following example will clarify the point further:

Internal CSS
View Plain - Print Usage:
  1. <head>
  2. <style type="text/css">
  3. .myclass
  4. {
  5. font:bold 12px/18px arial,verdana;
  6. }
  7. </style>
  8. </head>
Inline CSS
View Plain - Print Usage:
  1. <body>
  2. <div style="font:bold 12px/18px arial,verdana;"></div>
  3. </body>

Instead of using above styles, use external stylesheet like:

View Plain - Print Usage:
  1. <head>
  2. <link href="myCSS.css" rel="stylesheet" type="text/css" media="all" />
  3. </head>

Let Gzip/deflate Compress Your CSS For Good

Gzipping generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip. It reduces response times by reducing the size of the HTTP response. When lighter contents travel from server side to client side and vice versa, the process gets faster.

If you use Apache, the module configuring gzip depends on your version: Apache 1.3 uses mod_gzip while Apache 2.x uses mod_deflate.

The following example will clarify the point further:

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

You can also use this deflate compression in your .htaccess file on server root.

Play Smart with CSS Class Names

Calling multiple classes by creating a common class name in an element allows you to optimize your CSS significantly. The common class name repeats itself in many classes in your CSS file and allows you to call it according to your need in any HTML element.

For example: "float:left" and "font-size:12px;" almost repeats in many classes so we can make a separate class name for ".fl-left{float:left;}" and ".font12{font-size:12px}" and can do the same thing with other class names as well. Finally, we can call both classes in the same element "<div class='fl-left font12'>".

Therefore, create common class names for repeated classes and enjoy some optimized CSS making your website fast, user-friendly and highly accessible.

View Plain - Print Usage:
  1. <body>
  2. <div class="floatLeft Setfont txt"></div>
  3. </body>

Conclusion

The above discussed CSS optimization techniques will surely help you create fast loading websites with better usability and optimum accessability. It will result to satisfied users sometimes even boosting your return on investment. Always remember one equation:

CSS Optimization Techniques = Happy Browsing

Surely, this is the most appealing tutorial to you, if the assumption is correct. Itís very important to know about using CSS and itís even more important how to optimize it for the best results. So, donít miss to check out our next chapter for something even more exciting and useful.


Continue >> << Back
Disclaimer: This site is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License
Contact Us: info@tutorialswire.comCopyright © TutorialsWire.com, All Rights Reserved.