Dynamics CRM 2011 performance improvements: CSS sprites

Today’s business applications are mostly delivered through a web client that lives inside your browser. While Dynamics CRM has a “fat client” in the form of the Outlook components that can serve the CRM functionality even in an offline environment, Dynamics CRM itself is inherently a web application. The benefits of browser based application delivery are quite plain and obvious, but one must remember that there are still downsides to this approach. Everything relies on the client PC having a fast and reliable connection to the web server, which is not always the case. This particularly affects the mobile workforce or global companies with multiple offices spread around the world. Downloading the UI components involved in rendering a page of the web client will often mean loading tens of different image, script and other files, which requires good bandwidth and low latency to provide a smooth user experience.

The user interface of Microsoft Dynamics CRM 2011 is much more graphical than in the previous versions, thanks to the new ribbon menu. While this does in my opinion make navigation inside CRM much more user friendly than the old text based menu hierarchies, it does make you wonder if all this comes with a price you have to pay in terms of slower page load times. Well, the good news is that Microsoft has also paid attention to the performance aspect and is now utilizing CSS sprites to render the default icons of the CRM UI.

The image above is not a strange collage made by me, rather it is a single file called ribbon.png that is loaded when you access the Dynamics CRM through a web client. The image is a whopping 580 kb, but the good news is that you only need to load it once and then it will be cached by your browser. More importantly, each and every icon is rendered from this single image file, by displaying different parts of the image where a specific icon is needed in the UI.

This same technique was already used in SharePoint 2010 and I’m glad to see it make its way also to Microsoft Dynamics CRM 2011. It will significantly reduce the amount of HTTP requests needed when loading a CRM page. Of course, the technique is only applicable to the default icon site. I’m not aware of any tricks for displaying a set of custom icons through this way, so adding a huge number of new ribbon options for your XRM application may come with a cost on the page loading performance.