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/
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/
On 28.03.2009 15:27, 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.
i think that this is a great improvement and i will try your patch as soon as i find time to recreate my roundcube dev installation.
cheers, raoul
On Sat, 28 Mar 2009 17:20:22 +0100, "Raoul Bhatia [IPAX]" r.bhatia@ipax.at wrote:
<snip> > > i think that this is a great improvement and i will try your patch > as soon as i find time to recreate my roundcube dev installation. > > cheers, > raoul
Feel free to clone my RoundCube git repository:
$ git clone git://code.nkinka.de/roundcube.git
By default it will create a local branch called svn-trunk, which tracks the RoundCube subversion repository and updates daily.
The changeset for this particular feature is in the remote branch one_image_many_icons.
Nathan
List info: http://lists.roundcube.net/dev/
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/
Hi Nathan
You're not the first asking for this but the first who implemented it. I just linked this thread to the according ticket: http://trac.roundcube.net/ticket/1484858
~Thomas
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/
List info: http://lists.roundcube.net/dev/
On Sun, 29 Mar 2009 19:51:40 +0200, Thomas Bruederli roundcube@gmail.com wrote:
Hi Nathan
You're not the first asking for this but the first who implemented it. I just linked this thread to the according ticket: http://trac.roundcube.net/ticket/1484858
~Thomas
Thanks. I'm still not that familiar with the code so certainly someone with a higher level view should sanity check what I've done. It's not unlikely that I've missed a few subtle things or that some small things may not work as expected, but it seems to work fine for me so far. I also realized that the image I linked to was dependent which git branch I had checked out, so I moved it to a more permanent location:
https://natha.nkinka.de/downloads/roundcube/rc_icons.png
I also renamed the git branch from the clumsy "one_image_many_icons" to "css_sprites". All of the commits are based on a clean checkout of the subversion trunk.
Nathan _______________________________________________ List info: http://lists.roundcube.net/dev/
Nathan Kinkade wrote:
On Sat, 28 Mar 2009 17:20:22 +0100, "Raoul Bhatia [IPAX]" r.bhatia@ipax.at wrote:
<snip> > i think that this is a great improvement and i will try your patch > as soon as i find time to recreate my roundcube dev installation. > > cheers, > raoul
Feel free to clone my RoundCube git repository:
$ git clone git://code.nkinka.de/roundcube.git
i used git checkout css_sprites and now have got a working environment. things are looking good but i noticed that the "blue unread star" is not disappearing when i open a message in the preview pane. the bold status is correctly set to normal.
cheers, raoul
On Fri, 03 Apr 2009 17:24:19 +0200, "Raoul Bhatia [IPAX]" r.bhatia@ipax.at wrote:
<snip> > > i used git checkout css_sprites and now have got a working environment. > things are looking good but i noticed that the "blue unread star" is not > disappearing when i open a message in the preview pane. the bold status > is correctly set to normal. > > cheers, > raoul
You're right. I had noticed that, but hadn't actually done anything about it. These small patches should fix the problem:
http://code.nkinka.de/gitweb?p=roundcube.git;a=commitdiff;h=e099a5847df411a1...
Saludos,
Nathan _______________________________________________ List info: http://lists.roundcube.net/dev/
hi,
Nathan Kinkade wrote:
http://code.nkinka.de/gitweb?p=roundcube.git;a=commitdiff;h=e099a5847df411a1...
are there any plans for merging the css sprites changes back into rc?
cheers, raoul
On Wed, 03 Jun 2009 12:12:11 +0200, "Raoul Bhatia [IPAX]" r.bhatia@ipax.at wrote:
hi,
Nathan Kinkade wrote:
http://code.nkinka.de/gitweb?p=roundcube.git;a=commitdiff;h=e099a5847df411a1...
are there any plans for merging the css sprites changes back into rc?
cheers, raoul
The sprite changes are currently in the trunk release of roundcube.
Robert King wrote:
The sprite changes are currently in the trunk release of roundcube.
Yes, but with one exception: messages list. Thomas, are you working on it? There's a patch in first message of this thread.
Of course, that's only something the RC devs could say, however, I do have a few related comments. The main reason I implemented CSS sprites was that I knew I was soon going to be living in a location with a relatively slow Internet connection (256kbps) and with high latency. I knew RC was a bit heavy on requests and page size, so I was proactively trying to make RC better equiped for a slow, high latency connction.
Well, I've been here now for over a month and discovered very quickly that RoundCube is quite literally unusable over a link of that speed, even with CSS sprites and a custom theme that ditches a good number of images for CSS buttons. I have to use Google Apps for my work, and even the javascript/ajax interface of Gmail is vastly more usable than RoundCube over this connection. I've reverted to using Mutt and offlineimap, which has restored sanity to my email experience. However, I like what RC is doing and may use it again from time to time when I get back to a faster Internet connection.
Nathan
On Wed, Jun 03, 2009 at 12:12:11PM +0200, Raoul Bhatia [IPAX] wrote:
hi,
Nathan Kinkade wrote:
http://code.nkinka.de/gitweb?p=roundcube.git;a=commitdiff;h=e099a5847df411a1...
are there any plans for merging the css sprites changes back into rc?
cheers, raoul -- ____________________________________________________________________ DI (FH) Raoul Bhatia M.Sc. email. r.bhatia@ipax.at Technischer Leiter
IPAX - Aloy Bhatia Hava OEG web. http://www.ipax.at Barawitzkagasse 10/2/2/11 email. office@ipax.at 1190 Wien tel. +43 1 3670030 FN 277995t HG Wien fax. +43 1 3670030 15 ____________________________________________________________________
List info: http://lists.roundcube.net/dev/
Nathan Kinkade wrote:
Well, I've been here now for over a month and discovered very quickly that RoundCube is quite literally unusable over a link of that speed, even with CSS sprites and a custom theme that ditches a good number of images for CSS buttons.
Well, CSS sprites all all other techniques only speed up the initial page loading; once everything is loaded and cached by the browser it does not make a difference if you use sprites or single images.... then only application performance itself is important.
Best regards,
Michael
A.L.E.C wrote:
Robert King wrote:
The sprite changes are currently in the trunk release of roundcube.
Yes, but with one exception: messages list. Thomas, are you working on it? There's a patch in first message of this thread.
Not yet. Currently sprites are (only) used within the skin which means that the application itself does not oblige anybody who creates a skin to use sprites. Making the message list work with sprites requires changes in the application code and we loose some "flexibility".
There are more possibilities to use sprites in the default skin (e.g. the toolbar icons) and I think we should leave the message list as it is for the moment. With correct caching headers we can still save much data overhead.
~Thomas _______________________________________________ List info: http://lists.roundcube.net/dev/
On Thu, 04 Jun 2009 23:06:40 +0200, Thomas Bruederli roundcube@gmail.com wrote:
the application itself does not oblige anybody who creates a skin to use sprites. Making the message list work with sprites requires changes in
the
application code and we loose some "flexibility".
There are more possibilities to use sprites in the default skin (e.g. the
toolbar icons) and I think we should leave the message list as it is for the moment. With correct caching headers we can still save much data overhead.
~Thomas _______________________________________________ List info: http://lists.roundcube.net/dev/
I really think the best method is to leave that flexibility in the skin. Keeping to the MVC model.
-
A.L.E.C -
Balazs Horvath -
Michael Baierl -
Nathan Kinkade -
Raoul Bhatia [IPAX] -
Robert King -
Thomas Bruederli