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.

Brahim Jaouane

I am a Digital Marketing specialist specialized in SEO at eXo Platform. Passionate about new technologies and Digital Marketing. With 10 years' experience, I support companies in their digital communication strategies and implement the tools necessary for their success. My approach combines the use of different traffic acquisition levers and an optimization of the user experience to convert visitors into customers. After various digital experiences in communication agencies as well as in B2B company, I have a wide range of skills and I am able to manage the digital marketing strategy of small and medium-sized companies.