{"id":36470,"date":"2008-03-13T09:26:03","date_gmt":"2008-03-13T09:26:03","guid":{"rendered":"http:\/\/localhost\/exoblog\/2008\/03\/13\/extensive-use-of-css-sprite-to-improve-front-end-performance\/"},"modified":"2008-03-13T09:26:03","modified_gmt":"2008-03-13T09:26:03","slug":"extensive-use-of-css-sprite-to-improve-front-end-performance","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/extensive-use-of-css-sprite-to-improve-front-end-performance\/","title":{"rendered":"Extensive use of CSS Sprite to improve front end performance"},"content":{"rendered":"<p>eXo Portal 2.0 early success is also based on its great art work and web design.<\/p>\n<p>To achieve such a quality, we employ 5 professional web designers that spend their time making greats skins for us and our customers.<\/p>\n<p>This of course implies the use of&nbsp; many images in the portal page. Unfortunately,&nbsp; 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.<\/p>\n<p>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.<\/p>\n<p>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:<\/p>\n<p>.UICalendarPortlet .SearchIcon {<br \/>\nbackground: url(&#8216;icons\/CalendarIcons.gif&#8217;) no-repeat left -1117px;<br \/>\n}<\/p>\n<p>As you can see,&nbsp; 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.<\/p>\n","protected":false},"excerpt":{"rendered":"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&nbsp; many images in the portal page. Unfortunately,&nbsp; this may [&hellip;]","protected":false},"author":7,"featured_media":12746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[699],"tags":[],"lang":"en","translations":{"en":36470},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/36470"}],"collection":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=36470"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/36470\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=36470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=36470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=36470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}