This week's book giveaway is in the Design forum.
We're giving away four copies of Design for the Mind and have Victor S. Yocco on-line!
See this thread for details.
Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

CSS Sprite

 
Sapna Grover
Ranch Hand
Posts: 54
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 42
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic