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 direction.
There are other important things happening on the client side (Jquery impementation),
and under the hood the plugin system development is showing a great progress.
I love this system!

till
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
    
__