<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html;charset=ISO-8859-2" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
Nathan thanks for implementing CSS Sprites in RC! Great job!<br>
<br>
I agree with Michael, this is another sign that RC is going in the
right direction.<br>
There are other important things happening on the client side (Jquery
impementation),<br>
and under the hood the plugin system development is showing a great
progress.<br>
I love this system!<br>
<br>
till<br>
This stuff is great, please if you can include it the next release...<br>
<br>
Michael Baierl, 09.03.28 16:02:
<blockquote cite="mid:49CE3BFC.7020805@mbaierl.com" type="cite">
  <pre wrap="">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:
  </pre>
  <blockquote type="cite">
    <pre wrap="">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:

<a class="moz-txt-link-freetext" href="https://natha.nkinka.de/devmail/skins/default/images/icons/rc_icons.png">https://natha.nkinka.de/devmail/skins/default/images/icons/rc_icons.png</a>

And here are the patches to implement this:

<a class="moz-txt-link-freetext" href="http://code.nkinka.de/gitweb?p=roundcube.git;a=commitdiff;h=84a7acd0f42e3c30c896d65699bbd4b1a3cedd41">http://code.nkinka.de/gitweb?p=roundcube.git;a=commitdiff;h=84a7acd0f42e3c30c896d65699bbd4b1a3cedd41</a>

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
    </pre>
  </blockquote>
  <pre wrap=""><!---->__</pre>
</blockquote>
</body>
</html>