Extensive use of CSS Sprite to improve front end performance

eXo Platform Blog

eXo Portal 2.0 early success is also based on its great art work and web design.

To achieve such a quality, we employ 5 professional web designers that spend their time making greats skins for us and our customers.

This of course implies the use of  many images in the portal page. Unfortunately,  this may impact the page processing time if each image is served through a single HTTP request. Furthermore, it also increases the number of hits on the server which consumes CPU and lower the number of concurent users you can get.

Hopefully, there exist a method that allows to use several images within the page but to request them thanks to a single CSS request. This technic is called CSS sprite.

The idea is quite simple and leverages advanced CSS 2.0 features. We append into a single image several icons that will then be used in the css background code and relatively positioned using the following syntax:

.UICalendarPortlet .SearchIcon {
background: url(‘icons/CalendarIcons.gif’) no-repeat left -1117px;

As you can see,  eXo Calendar application is using css sprites and we were able to dramatically reduce the number of HTTP calls when that application is first launched.

Related Posts

I'm Chief Executive Officer of eXo (The Open Source Digital workplace), a company I founded just out of university to serve its first customer, the U.S. Department of Defense. I'm also board Member at Meeds.io, an association of software vendors that provides its members with employee recognition software.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>