Hi everybody!
Till asked me to ask the rest of the devs about their opinion regarding http://trac.roundcube.net/ticket/1484858, "Speed up the interface loading by using CSS sprites for images".
So, what do you guys think about it? Here's a good read regarding lowering the amount of http requests: http://developer.yahoo.com/performance/rules.html#num_http
Best regards, Oscar Carlsson
List info: http://lists.roundcube.net/dev/
On Mar 12, 2008, at 1:30 PM, Oscar Carlsson wrote:
Hi everybody!
Till asked me to ask the rest of the devs about their opinion
regarding http://trac.roundcube.net/ticket/1484858, "Speed up the interface
loading by using CSS sprites for images".
It wasn't that long ago that everyone split big images into many
smaller ones to make the page appear to load faster because there
were many connections to the server. There are features in
Photoshop / ImageReady to do just that. Seems there is a pendulum
that swings between many small images and few large images. Will RC
change again when this pendulum swings back the other way ?
Is it a better solution to load images in the background while the
user is typing in the login info, so that the images are cached by
the time the "login" button is pushed ?
If RC is used a lot by the user, won't the images reside in the local
browser cache 90% of the time anyway ?
Besides first-time users, will this change really make a difference ?
Charles Dostale System Admin - Silver Oaks Communications http://www.silveroaks.com/ 824 17th Street, Moline IL 61265
List info: http://lists.roundcube.net/dev/
On Wed, 12 Mar 2008 13:59:05 -0500, chasd chasd@silveroaks.com wrote:
On Mar 12, 2008, at 1:30 PM, Oscar Carlsson wrote:
Hi everybody!
Till asked me to ask the rest of the devs about their opinion regarding http://trac.roundcube.net/ticket/1484858, "Speed up the interface loading by using CSS sprites for images".
It wasn't that long ago that everyone split big images into many smaller ones to make the page appear to load faster because there were many connections to the server. There are features in Photoshop / ImageReady to do just that. Seems there is a pendulum that swings between many small images and few large images. Will RC change again when this pendulum swings back the other way ?
With the speed of most Internet connections today, it's no the transfer that takes time, it's the connection. This wasn't the case earlier with slow modem connections, that's why it was better to split images then.
Take a look at: http://tools.pingdom.com. Try your favorite website. You'll quickly see that it takes a looong time from "Start" to "First byte" (look at "How it works" for color explanation), but transfering the image is fast. That's why this method is popular, it uses the connection speed better. Of course, this is only possible to use with buttons, logos and such static images, but there are many of those in RC.
Is it a better solution to load images in the background while the user is typing in the login info, so that the images are cached by the time the "login" button is pushed ?
You can go as far as to include the raw image in the CSS if I remember correctly ;)
If RC is used a lot by the user, won't the images reside in the local browser cache 90% of the time anyway ? Besides first-time users, will this change really make a difference ?
Don't know if sprites will have an effect or not considering this.
/Oscar Carlsson
List info: http://lists.roundcube.net/dev/
Oscar Carlsson wrote:
It wasn't that long ago that everyone split big images into many smaller ones to make the page appear to load faster because there were many connections to the server.
That's correct, but for todays fast connections the HTTP overhead is higher than the transfer. And if there are many small files to transfer it makes sense to use CSS Sprites.
Is it a better solution to load images in the background while the user is typing in the login info, so that the images are cached by the time the "login" button is pushed ?
This is just for the first hit, instead you should set caching headers for static files so they remain on the client. BUT this is out of scope for Roundcube and should be set in Apache.
You can go as far as to include the raw image in the CSS if I remember correctly ;)
Does not work cross-browser, so no good idea.
If RC is used a lot by the user, won't the images reside in the local browser cache 90% of the time anyway ? Besides first-time users, will this change really make a difference ?
No, it won't, except the caching headers are set the wrong way.
Don't know if sprites will have an effect or not considering this.
I'm right now optimizing our companies homepage using Sprites and it's a lot of work and relatively complex, especially in terms of updates. For RC I don't think it's worth it as there are not too many images and the users are all returning users. For a commercial site where you have not returning visitors or visitors returning after their cache was cleaned it makes sense to spend the time on optimizing with CSS Sprites.
Spend your time on new features.
Mike
Oscar Carlsson wrote:
On Wed, 12 Mar 2008 13:59:05 -0500, chasd chasd@silveroaks.com wrote:
On Mar 12, 2008, at 1:30 PM, Oscar Carlsson wrote:
Hi everybody!
Till asked me to ask the rest of the devs about their opinion regarding http://trac.roundcube.net/ticket/1484858, "Speed up the interface loading by using CSS sprites for images".
It wasn't that long ago that everyone split big images into many smaller ones to make the page appear to load faster because there were many connections to the server. There are features in Photoshop / ImageReady to do just that. Seems there is a pendulum that swings between many small images and few large images. Will RC change again when this pendulum swings back the other way ?
With the speed of most Internet connections today, it's no the transfer that takes time, it's the connection. This wasn't the case earlier with slow modem connections, that's why it was better to split images then.
Take a look at: http://tools.pingdom.com. Try your favorite website. You'll quickly see that it takes a looong time from "Start" to "First byte" (look at "How it works" for color explanation), but transfering the image is fast. That's why this method is popular, it uses the connection speed better. Of course, this is only possible to use with buttons, logos and such static images, but there are many of those in RC.
We still have hundreds of customers that are still on slow dialup connections, and they're the most likely users of our webmail system. (Mostly when people with high speed connections forward them large e-mails with pictures and video that their modems can't handle.)
Unfortunately around here things are so spread out that there are huge chunks of area that have no broadband available, even via cellular or wireless. The best that some can hope for is ISDN, or a very expensive high-latency satellite link.
Not that the images would take too long to load either way, but it might be nice to give the admin a choice as to which is faster for their particular installation.
Given the choice though, I'd prefer to cater to the broadband users. It seems that most of our modem users have gotten very patient over the years and a little extra load time on a page doesn't mean a whole lot.
I do like the idea of caching the images while the user is typing in their username and password, though. They're sitting there typing anyhow and can spare a few moments.
Jim _______________________________________________ List info: http://lists.roundcube.net/dev/
On Mar 12, 2008, at 2:45 PM, Michael Baierl wrote:
I'm right now optimizing our companies homepage using Sprites and
it's a lot of work and relatively complex, especially in terms of updates.
For RC I don't think it's worth it as there are not too many images and
the users are all returning users.
My point stated in a better way. Thanks.
I agree with the point made that dial-up links are still around, even
though geeks that _create_ websites don't use them.
I don't think it is a good idea to optimize for broadband users where
the difference in page display performance would be a _small_
percentage gain, and penalize slow-link users where the consequential
non-optimization would be _huge_ percentage loss.
But I'm an old, fat, bald man that still remembers using Netscape 2.0
over 4800 baud 8)
ATH ATZ0
Charles Dostale System Admin - Silver Oaks Communications http://www.silveroaks.com/ 824 17th Street, Moline IL 61265
List info: http://lists.roundcube.net/dev/
On Wed, Mar 12, 2008 at 01:59:05PM -0500, chasd wrote:
It wasn't that long ago that everyone split big images into many
smaller ones to make the page appear to load faster because there
were many connections to the server. There are features in
Photoshop / ImageReady to do just that. Seems there is a pendulum
that swings between many small images and few large images. Will RC
change again when this pendulum swings back the other way ?
It's not a pendulum since these are solutions to different problems. The "tesselated" images was/is used to optimize the palette of GIF images (limited to 256 colors), to form one big image.
When it's about icons, like in RoundCube, where it is small images, there's simply a different bottleneck.
Working for a site that has tens of millions pageviews a day and makes heavy use of CSS sprites, I'd like to share some "real-world" results. The bottom line IMHO is that we've had good performance gains using CSS sprites, mainly because of:
- Reduced http requests overhead
- Incremental TCP speed (one big file goes faster than many small
ones, because TCP speed increments over time)
This doesn't change much between broadband and narrowband connections, as far as we've observed. Using CSS sprites, you get also a snappier rendering of the page, because once the graphics file has been decompressed, it is instantly available all over the page.
Of course, the best results are achieved when the graphics file is preloaded (for example at login) and kept in the browsers' cache. That leads to another problem: you'll have to append a version number to the file name, to refresh your users' caches in case the graphics get updated. The version number can be a parameter like image.png?v=12345.
HTH
Cheers, Corrado Fiore _______________________________________________ List info: http://lists.roundcube.net/dev/
Corrado Fiore написа:
That leads to another problem: you'll have to append a version number to the file name, to refresh your users' caches in case the graphics get updated. The version number can be a parameter like image.png?v=12345.
If it's like that, it will probably not get cached by user browsers at all. It should better be image.v12345.png or sth like that.
Kind regards, Doichin
List info: http://lists.roundcube.net/dev/
On Thu, Mar 13, 2008 at 7:04 PM, NetOne - Doichin Dokov root@net1.cc wrote:
Corrado Fiore написа:
That leads to another problem: you'll have to append a version number to the file name, to refresh your users' caches in case the graphics get updated. The version number can be a parameter like image.png?v=12345.
If it's like that, it will probably not get cached by user browsers at all. It should better be image.v12345.png or sth like that.
Yeah, I actually experienced that. ;-) The key is to do: default.css.v3, etc. pp..
Till _______________________________________________ List info: http://lists.roundcube.net/dev/
-
Andreas -
chasd -
Corrado Fiore -
Jim Pingle -
Michael Baierl -
NetOne - Doichin Dokov -
Oscar Carlsson -
till