• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

CSS Sprite

 
Ranch Hand
Posts: 54
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
Author
Posts: 42
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
They worship nothing. They say it's because nothing is worth fighting for. Like this tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic