My Opera News - Optimizing for speed, phase 1

Optimizing for speed, phase 1

By Fredrik Anderssonfred. Sunday, November 25, 2007 5:00:51 PM

I've spend the last few days optimizing My Opera for faster loading, using the 14 rules from Steve Souders (Yahoo!) excellent book High Performance Web Sites.

I saw Nate Koechley from Yahoo! present these rules at a Web conference in London a long time ago and I've wanted to implement them since then, but I had not got around to it until earlier this week when Sverre got the book and put it on my desk.

There's much that can be done to speed up My Opera. We have done a few things already, such as moving all scripts to the bottom of the page, and we aim to do a lot more in the future.

For this My Opera update I've decided to focus on getting fewer HTTP requests and smaller files sizes for the My Opera ui.

If we take a closer look at the images that are used for the My Opera ui today we can see that it's 27 images (depending on what page you look at) with a total file size of 71,3 KB. That's the backgrounds for the main layout, the logo, menu, icons for the top bar, tabs for sub menus, etc (I'm only including the images that are used for the ui, not the ones in the page content).

The challenge with optimizing this is that the ui for the upcoming My Opera release will contain even more icons than before, because of the drop down menus, and we still needed to make it smaller.

So, how do you think it went?

Quite well actually. The result for the new site is 8 images and 21,8 KB!
There is of course a lot more that can be done, and we will continue working on this.

Stay tuned for more posts on this topic.

Sneak preview of upcoming release99.901% uptime!

Comments

1 2 Next »

.Kite Geek # Sunday, November 25, 2007 5:08:31 PM

WOW I am very impressed.

GillyNghecon18 # Sunday, November 25, 2007 5:08:52 PM

Uncle MickMickeyjoe-Irl # Sunday, November 25, 2007 5:49:27 PM

Those of us on low bandwidth connections thank you

-( + )-Dasch # Sunday, November 25, 2007 5:55:04 PM

Sounds good.
But aren't there more important things to do? Maybe the file upload section. This to use is like using things in the 90th. Same with pictures uploading and the messages section.

Don't beat me please.

.Kite Geek # Sunday, November 25, 2007 6:00:09 PM

we not beat you... They beat me instead... :Yikes:

-( + )-Dasch # Sunday, November 25, 2007 6:11:12 PM

Why they should beating you? No no ..., then they can beat that:

Remco Lantingremcolanting # Sunday, November 25, 2007 6:15:54 PM

Another way to reduce traffic for http requests: host images on a domain the cookies for the main domain don't get sent too. This is already used, consciously or unconsciously, by hosting a lot of images on files.myopera.com while the content is on my.opera.com. Places like blogposts with a lot of comments (and therefore avatars) will get a nice speed boost out of this.

Nicolas Mendozanicomen # Sunday, November 25, 2007 6:35:16 PM

Remco: you are right of course. We are working on those parts too in the background

Remco Lantingremcolanting # Sunday, November 25, 2007 6:45:51 PM

lamarca lamarca # Sunday, November 25, 2007 7:40:48 PM

good work

Matt Coxcoxy # Sunday, November 25, 2007 9:25:12 PM

I love the dog on the cover of that book. <3

AyushAyushJ # Sunday, November 25, 2007 9:39:41 PM

Great !

Uncle MickMickeyjoe-Irl # Sunday, November 25, 2007 9:43:32 PM

A Greyhound,

how appropriate.

Geoff GirardinG-off # Sunday, November 25, 2007 11:07:56 PM

Fred is awesome.

Tamil # Sunday, November 25, 2007 11:41:35 PM

Ice ArdorIceArdor # Monday, November 26, 2007 3:32:31 AM

Nice... amazing improvement.

Vetle Roeimvetler # Monday, November 26, 2007 9:33:48 AM

Cool, good work Fred!

CharlieBAMAToNE # Monday, November 26, 2007 2:57:37 PM

graste # Monday, November 26, 2007 7:00:26 PM

If you'll really use a lot of smaller images like icons on the new page, it's possibly a good idea to look into css image sprites to reduce the number of HTTP requests necessary. You most probably know all of this already as you reduced the number of images.

Fredrik Anderssonfred # Monday, November 26, 2007 7:22:24 PM

yes. we're using css sprites quite a lot for the new site.

Dustin WilsonKhadgar # Wednesday, November 28, 2007 4:08:22 AM

Excellent job, Fred. I've been experimenting with CSS spriting myself quite a bit lately. Next time I think about it I might pick up that book. I've heard a lot about it before your post here about it all. Congrats. Hopefully on my new project I can reduce the size that much.

Rey07rey # Wednesday, November 28, 2007 8:43:08 PM

Good

David Storeydstorey # Friday, November 30, 2007 6:14:03 AM

To reduce even more you could save the illustration type images as SVG and GZIP them as SVGz (about 1 20th the size of SVG in many cases) and deliver them as CSS background images in Opera 9.5+ using content negotiation, an png to the rest. I'm not sure if it is possible with this method to know if svg as a background is supported or not though, as Firefox and Safari both support SV, but not in CSS.

If it works the file size should be way smaller (in latest Opera only

) and the images would even be scriptable

It probably also takes some work to clean up the SVG Illustrator or Inkscape makes too.

Ryan Octavianusphilry4n # Wednesday, December 12, 2007 1:54:45 AM

Merry Christmas devs!!!

Joel Lutherlutherjw # Wednesday, December 12, 2007 4:39:27 AM

Merry Christmas to the dev team! Thanks for all the great work you've been doing - can't wait for the update.

Death the Brain EaterDeathKnight1092 # Wednesday, December 12, 2007 5:29:04 AM

Merry Christmas:D

Dennismcd # Wednesday, December 12, 2007 6:00:43 AM

Merry Christmas to all of you! \o/

Ruben Garciaeztigma # Wednesday, December 12, 2007 7:15:16 AM

merry christmas Fred!

Barebry # Wednesday, December 12, 2007 7:16:21 AM

Merry Christmas, thanks for god work!!

Redshigen # Wednesday, December 12, 2007 11:12:37 AM

MERRY MERRY CHRISTMAS~!~!~!

aos101 # Wednesday, December 12, 2007 11:35:15 AM

Merry Christmas!

Zolizoligrg89 # Wednesday, December 12, 2007 12:10:04 PM

Merry Christmas!

Garygaryg # Wednesday, December 12, 2007 12:30:15 PM

Merry Christmas

toadbee # Wednesday, December 12, 2007 1:22:36 PM

Merry Christmas Fred !!

Miczalinasevillana # Wednesday, December 12, 2007 1:29:50 PM

Merry Christmas guys!!!!

wakakei # Wednesday, December 12, 2007 2:33:17 PM

Merry Christmas!!

PatttyMetalgirlPattty # Wednesday, December 12, 2007 2:40:29 PM

Hi, merry christmas!!

Tri M. NguyenTriMN # Wednesday, December 12, 2007 3:39:20 PM

Merry Christmas guys!

KryptoKnightAleksOD # Wednesday, December 12, 2007 4:27:24 PM

Guys! Thank you for working on my.opera! Merry Christmas!

BelaBELADA # Wednesday, December 12, 2007 4:28:10 PM

Merry Christmas, Opera monkeys!

NekoNeko42 # Wednesday, December 12, 2007 4:38:39 PM

Merry Christmas!

Nikio # Wednesday, December 12, 2007 7:27:09 PM

merry christmass!!! and keep up the good work

MagdalenaSalve! # Wednesday, December 12, 2007 8:03:08 PM

Merry Christmas!
And thanks for your work!

vivalamuerte # Wednesday, December 12, 2007 9:27:24 PM

Merry Christmas dude

this is the kind of work I like... simplifying websites is art.

Efstathios AmanatidisNOBUYUKI # Wednesday, December 12, 2007 10:14:05 PM

Wow, you actually got down to 8 images? Sounds really awesome.
But in my opinion opera is fast enough xD

Merry Christmas

Violeta Rosalesvioletisha # Wednesday, December 12, 2007 10:44:31 PM

Merry Christmas Dev's guys!!!

/-\ [) /-\ /V\link226 # Thursday, December 13, 2007 3:58:39 AM

good work and
merry christmas!

Dr. Flaydr-flay # Thursday, January 10, 2008 3:34:36 AM

The speed of My.Opera is one of my reasons I got myself a page, yet you make it faster still

I assume you are using all PNGs & no GIFs ?

The PNGout plugin for Irfanview, is rather good (& very uptodate) at optimizing PNGs for tiny file size. worth trying a comparison with you current GFX prog.

Fredrik Anderssonfred # Thursday, January 10, 2008 3:13:18 PM

more GIFs than PNGs actually.. PNGs are great for medium size images, but I've found that GIFs usually get smaller when it comes to really small images. I guess it's because the GIF header is smaller than the PNG header, but I'm not sure. one issue with PNG is also transparency and IE 5/6

Dr. Flaydr-flay # Thursday, January 10, 2008 7:10:32 PM

I see your point, PNGs do allow a lot more usefull info saved in the header.
But then on analyzing the wink emoticon above, I stripped the the un-used colours out & saved it as a 5bit (32 colour) transparent PNG, using Irfanviews PNGOUT plugin & removing the extra PNG chunks.
If i understood the plugins options more, I may be able to make it smaller still.

Original - wink.gif = 389 bytes
PNGOUT - wink.png = 315 bytes

You may find if you can save 5 or 6 bit GIFs you can get it smaller than that. Irfanview only seems to write full 8bit GIFs
Sigh! takes me back to the good old Amiga days

1 2 Next »

Showing comments 1 - 50 of 57.