aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes CSS Sprite Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "CSS Sprite" Watch "CSS Sprite" New topic
Author

CSS Sprite

Sapna Grover
Ranch Hand

Joined: Sep 27, 2002
Posts: 54
Recently I read about a technique called CSS Sprite. I think it is very useful in improving performance of the web sites. Are there other CSS techniques to improve performance?

Thanks
Mike Bowers
Author
Ranch Hand

Joined: Oct 08, 2007
Posts: 42
I also like CSS Sprites. So much so, that I put them in Chapter 14 of my book, Pro CSS and HTML Design Patterns. As you pointed out, the main benefit of a CSS Sprite is to increase the download speed of a website. This works because each file a browser has to download takes time because of latency.

For example, I did some testing and found out that it is typically not the number of bytes that slows the rendering of a web page (unless the user uses a dialup connection or you include huge image files on your page), it is the number of files. This is because it takes 0.1 to 0.5 seconds per file for a browser to talk to a DNS server to translate a URL into the IP address of the web server and to send an HTTP request to the web server to get the file. Even if a browser caches all the files in a web page, it still takes 0.1 to 0.5 seconds per file just to ask the web server if the file is stale and needs to be updated.

MSN is much slower than Google mainly because each page has so many files to download � a page from MSN takes 6 to 8 seconds on my broadband connection and Google takes 0.5 seconds.

Thus, the best way you can increase the performance of web pages by limiting the number of files the page needs to download. You can put all the images in one CSS sprite, and embed all your CSS and JavaScript in the header of the web page. This will give you maximum performance.

If you are interested in other ways to improve your web pages and dramatically speed your web development, check out my book, Pro CSS and HTML Design patterns. You can view its examples at http://cssdesignpatterns.com
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: CSS Sprite