Posts Tagged ‘css sprites’
How to optimise your website
Posted on: August 19, 2009
We have seen most of us are very keen in designing our website very nicely. To do so we end up with using more good images, css styles and javaScript . So its not only important to develop a good website also to optimise your website. As we why we all others who view your website tend to see that the website should load fast, the moment he types the url on the browser if the user finds that the site is taking time to load. The user gets pissed of and he closes the browser. So its better that you optimise your website. Now you might be thinking of how to optimise website. There are some tips for doing this.
1. Use CSS Sprites : Rather than using multiple CSS background images for your page, instead use CSS sprites that is combine all these into one graphic image. Which will reduce your image size and also the HTTP requests. Say if there are say 5 images so there will be 5 HTTP request generated and sent your server. So rather then 5 images combine them into one, so there will be only one HTTP request.
Ex:
#menu ul li{
background:url(images/menuicons.gif) no-repeat;
}
#menu ul li.design{
background-position:0px -50px;
}
by this the size and HTTP requests will be considerably reduced.
2. Use an external CDN : A CDN is nothing but Content Delivery Network, which basically means use of scripts that are hosted on other sites.
Now you might be thinking why should I use the scripts of others. The reason is users might not download the scripts when they visit your website as it will be already cached.
Google has an AJAX Libraries API that you can use.
<script src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js” type=”text/javascript”></script>
3. Put JavaScript at the bottom: Put all those JS that are not required at the very begining of your webpage. By doing this it will make your content load first and then the rest of the JS.
4. Optimise graphics for web: Save your images using photoshop, with save for web as option. By which you can check the quality of your image and which will help you reducing your image size also.
By these I think you can optimise most of the website. I had tried this one for my website. I think even you should have a try for this and do comment on whether your site got optimised or not.
CSS sprites group multiple images into one composite image and display them using CSS background positioning. By this you can save significant amount of HTTP requests by combining it into one or more sprites and using them by CSS.
Before knowing more about Sprites you need to know why to use CSS Sprites. Now you know that what Sprites are all about(grouping of multiple images), you might be thinking why to combine all those images? isin’t it quicker to use smaller images. I say no, by using smaller images you might be thinking that I am loading the site by a loading faster by loading bits. All that technique did was fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once. Each one of these images use a seperate HTTP request, and more number of these require more time and less efficient is your page.
So lets see now how this is achieved.To achieve this you need to do the following,
1. First and the foremost thing is to group all your images(usually icons and decorative images) into a sprite.
2. Then align these images into one or more lines.
3. Then use this image as a background image of some element and position it to X and Y pixels accordingly.
By doing this you get an increased speed and reduced HTTP requests.
This is the simple technique and easy method to improve your web performance.
Mywebdunia's Blog 