Skip navigation.

My Opera News

Behind the scenes at My Opera community

Optimizing for speed, phase 1

By Fredrik Andersson. Sunday, 25. November 2007, 17:00:51

, ,

high performance web sites

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. :smile:

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! :smile:
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

Kite Geek 25. November 2007, 17:08

WOW I am very impressed. :smile:

Nghecon18 25. November 2007, 17:08

:D

Mickeyjoe_irl 25. November 2007, 17:49

:hat: Those of us on low bandwidth connections thank you :cheers:

Dasch 25. November 2007, 17:55

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.

:lol:

Don't beat me please. p:

Kite Geek 25. November 2007, 18:00

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

Dasch 25. November 2007, 18:11

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

:D

remcolanting 25. November 2007, 18:15

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.

nicomen 25. November 2007, 18:35

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

wallpearl 25. November 2007, 18:44

Wow, good news! Thanks for work! :smile:

remcolanting 25. November 2007, 18:45

:D

lamarca 25. November 2007, 19:40

good work

coxy 25. November 2007, 21:25

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

AyushJ 25. November 2007, 21:39

Great ! :yes:

Mickeyjoe_irl 25. November 2007, 21:43

A Greyhound, :idea: how appropriate.

G-off 25. November 2007, 23:07

Fred is awesome. :smile:

Tamil 25. November 2007, 23:41

:up:

IceArdor 26. November 2007, 03:32

Nice... amazing improvement.

vetler 26. November 2007, 09:33

Cool, good work Fred!

BAMAToNE 26. November 2007, 14:57

:up:

graste 26. November 2007, 19:00

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. :wink:

fred 26. November 2007, 19:22

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

Khadgar 28. November 2007, 04:08

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.

07rey 28. November 2007, 20:43

Good

dstorey 30. November 2007, 06:14

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 :frown:) and the images would even be scriptable :wink: It probably also takes some work to clean up the SVG Illustrator or Inkscape makes too.

philry4n 12. December 2007, 01:54

Merry Christmas devs!!! :hat:

lutherjw 12. December 2007, 04:39

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

DeathKnight1092 12. December 2007, 05:29

Merry Christmas:D

mcd 12. December 2007, 06:00

Merry Christmas to all of you! \o/

eztigma 12. December 2007, 07:15

merry christmas Fred!

Barebry 12. December 2007, 07:16

Merry Christmas, thanks for god work!!

shigen 12. December 2007, 11:12

:sing::sing: MERRY MERRY CHRISTMAS~!~!~! :sing:
xD

aos101 12. December 2007, 11:35

Merry Christmas! :D

zoligrg89 12. December 2007, 12:10

Merry Christmas!

garyg 12. December 2007, 12:30

Merry Christmas :D:smile:

toadbee 12. December 2007, 13:22

Merry Christmas Fred !!

sevillana 12. December 2007, 13:29

Merry Christmas guys!!!!

wakakei 12. December 2007, 14:33

Merry Christmas!!

Pattty 12. December 2007, 14:40

Hi, merry christmas!! :yes:

TriMN 12. December 2007, 15:39

Merry Christmas guys!

AleksOD 12. December 2007, 16:27

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

BELADA 12. December 2007, 16:28

Merry Christmas, Opera monkeys! :yes:

Neko42 12. December 2007, 16:38

Merry Christmas!

Nikio 12. December 2007, 19:27

merry christmass!!! and keep up the good work

Salve! 12. December 2007, 20:03

Merry Christmas!
And thanks for your work! :yes:
:smile:

vivalamuerte 12. December 2007, 21:27

Merry Christmas dude :D this is the kind of work I like... simplifying websites is art.

NOBUYUKI 12. December 2007, 22:14

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

Merry Christmas :D

violetisha 12. December 2007, 22:44

Merry Christmas Dev's guys!!! monkey

link226 13. December 2007, 03:58

good work and
merry christmas!

wallpearl 16. December 2007, 12:42

Merry Xmas :smile:

dr_flay 10. January 2008, 03:34

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

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.

1 2 Next »

Showing comments 1 - 50 of 59.

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.