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=84a7acd0f42e3c30...
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
__
List info: http://lists.roundcube.net/dev/