[RCD] reduce network requests by consolidating icon images

Balazs Horvath balazs.horvath at weboor.net
Sun Mar 29 16:59:59 CEST 2009

Nathan thanks for implementing CSS Sprites in RC! Great job!

I agree with Michael, this is another sign that RC is going in the right 
There are other important things happening on the client side (Jquery 
and under the hood the plugin system development is showing a great 
I love this system!

This stuff is great, please if you can include it the next release...

Michael Baierl, 09.03.28 16:02:
> CSS Sprites are well known in the industry and exist since quite some 
> time... as you experienced the benefit are less network requests; which 
> outweighs the maybe larger file on an initial request. I've made great 
> experiences by using CSS sprites, especially if there is a lot of 
> network latency between the server and the client.
> Other well known optimizations are:
>   -) combining of CSS files into one large file
>   -) combining of JavaScript files into one large file
>   -) compression of CSS + JS files (YUI Compressor)
>   -) adding appropriate caching headers
> What you will end up with is a build system, like i.e. the Dojo 
> Framework does with their custom layers. Works great and has a lot of 
> advantages!
> Great to see RC going the right direction!
> Best regards,
> Michael
> Nathan Kinkade wrote:
>> I've been spending a lot of time in Firebug with RoundCube the past few
>> weeks.  One thing I've noticed is that there are quite a lot of network
>> requests to freshly load the front page.  With the default theme there are
>> around 45 separate requests for a little less than 250K.  I was asking
>> myself how to reduce the number of requests and was reminded of something
>> interesting that I had noticed Gmail doing, and that is to consolidate many
>> icons into a single image and then use CSS to position the image as the
>> background of a fixed width/height block-level element.
>> As I went to implement this, I began to realize that not only does this
>> approach reduce the number of network requests, but it also seems to
>> simplify the code a bit.  With this method the code doesn't have to worry
>> at all about images or file names, but becomes somewhat image-agnostic by
>> only specifying the *type* of behavior it would like to see in a given
>> location.  How that bahavior is implemented then becomes a simple matter of
>> CSS.
>> Here is the consolidated image with not all but most of the usual icons:
>> https://natha.nkinka.de/devmail/skins/default/images/icons/rc_icons.png
>> And here are the patches to implement this:
>> http://code.nkinka.de/gitweb?p=roundcube.git;a=commitdiff;h=84a7acd0f42e3c30c896d65699bbd4b1a3cedd41
>> I found that doing this reduced the number of requests on a clean load of
>> the main mailbox view from 45 to 35, which is fairly significant.  It does
>> add about 5K to the page size because it brings along a number of unneeded
>> icons for that page.  10 less requests may not be perceptible for many
>> people running on a fast machine with broadband Internet to a server that
>> isn't very loaded.  However, for a busy machine, perhaps an installation of
>> RoundCube serving webmail for a university, for example, 10 less requests
>> per fresh page load could make a noticeable difference.  10 less requests
>> will probably also make a noticeable difference for those on a high latency
>> connection, where 5K extra is less of a problem than 10 more network
>> requests.
>> I have no idea whether this is of any use or interest to anyone else, but I
>> thought I'd share my experiment with the list.
>> Nathan
> __
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.roundcube.net/pipermail/dev/attachments/20090329/e91d9df0/attachment-0001.html>
-------------- next part --------------
List info: http://lists.roundcube.net/dev/

More information about the Dev mailing list