Extensive use of CSS Sprite to improve front end performance

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.

Here is the image: Sprite icons

Be part of the discussion, share your comments

comments

Keep in touch with the author