Friday, March 21st, 2008

Yahoo! releases new performance best practices

Category: Performance, Yahoo!

Stoyan Stefanov has been working with the Yahoo! engineers to find more best practices, and presented on a new batch:

He covers the existing 14 rules, plus 20 new rules for faster web pages. We’ve categorized the optimizations into: server, content, cookie, JavaScript, CSS, images, and mobile.

Here are the new items, with details on them coming soon:

1. Flush the buffer early [server]
2. Use GET for AJAX requests [server]
3. Post-load components [content]
4. Preload components [content]
5. Reduce the number of DOM elements [content]
6. Split components across domains [content]
7. Minimize the number of iframes [content]
8. No 404s [content]
9. Reduce cookie size [cookie]
10. Use cookie-free domains for components [cookie]
11. Minimize DOM access
12. Develop smart event handlers
13. Choose <link> over @import
14. Avoid filters
15. Optimize images [images]
16. Optimize CSS sprites [images]
17. Don’t scale images in HTML [images]
18. Make favicon.ico small and cacheable [images]
19. Keep components under 25K [mobile]
20. Pack components into a multipart document [mobile]

Is it just me, or is performance getting a LOT of attention these days?

Posted by Dion Almaer at 11:02 am
20 Comments

++++-
4.4 rating from 70 votes

20 Comments »

Comments feed TrackBack URI

I really, really, like this post, keep it up. Especially the iPhone 25K tip :)

Comment by Anonymous — March 21, 2008

Yes, performance is getting a lot of attention, and that’s a good thing. Ajax adds complexity to web pages, but users still don’t accept slow sites, no matter how many cool Ajax features you add. We’ve build Ajax apps for large financial services companies like ING and ABN AMRO, and at least 20% of their users is still using a modem connection (I’ll be interested to hear how many modem users Yahoo! has, I guess at least 10%). Then you need to squeeze every last drop of performance out of your web page. Thank you Yahoo! for evangelizing Web Site performance!

Comment by JepCastelein — March 21, 2008

On slide 60, entitled “Optimize CSS sprites”, the first suggestion is to keep sprites horizontal instead of vertical whenever possible. I didn’t know it makes a performance difference — can anyone explain the reasoning behind this?

Comment by WombatSteve — March 21, 2008

I know some 2MB websites that could use this list as a huge improvement, but they simply don’t care. There are still sites where people don’t optomize the JPGs or SWFs on the site. And on top of that they call 5 CSS files that all do much of the same stuff.

Comment by jive — March 21, 2008

Some of these I expected, some I did not. I guess that defines a good article! Looking forward to putting something of this into practice.

Comment by Cory — March 21, 2008

I- for one- wish Yahoo! would develop a more realistic set of performance criteria. The reality of the modern internet is that it’s a crazy, mashed-up world. It doesn’t matter if we’re talking about something as simple as AdSense ads or the AddThis bookmark widget, or something as complex as Google Maps mashed up against data from CraigsList. Many of the sites out there simply DO NOT hot ALL their own content and as such, many of the criteria Yahoo! and YSlow judge a site on are beyond a developer’s control. It’s just plain offensive to me when my site gets low marks because I have three AdSense ads on my page- which happen to use IFRAMEs, do not use far futures expires headers, and trigger a slew of HTTP requests for HTML, CSS, JavaScript etc. Well, Yahoo!, should I just stop advertising? Performance is important, for sure, but so is ad revenue, user experience, etc. My site is fine- stop giving it a D. It’s bad for my self esteem!

Comment by krancour — March 21, 2008

Interesting follow-up, YSlow- which gives a score based on Yahoo!’s older set of performance criteria gives our beloved Ajaxian.com a 28. 28!!! How do you guys feel about that? Come on Yahoo!; give us a break.

Comment by krancour — March 21, 2008

From the slides:

> 500 ms slower = 50% drop in traffic (Google)
> 100 ms slower = 1% drop in sales (Amazon)

I’m not completely sure I am following what this is saying. Anybody got reference info where I can find out more about these stats?

Comment by Eric Anderson — March 21, 2008

Also from the slides it says DNS lookups should be reduced. No more than 2-4 DNS entries. Makes me wonder if it might be useful to use an IP if the address is fairly static for content. So if my images are hosted on images.example.com and the IP address of that server is fairly static have my pages generate with the IP address for images instead of the domain.

But maybe that is just over-optimization.

Comment by Eric Anderson — March 21, 2008

@WombatSteve
Usually (not necessarily, depends on # of colors, etc, but still, usually) you get a smaller file size when you have a sprite in a long line, as opposed to a long column. The difference is not usually big, so it’s ok to have vertical sprites, but prefer horizontal if you have a choice.
More important is not to have big gaps in the sprites. Gaps probably won’t affect the filesize much, but will require more memory.

@Cory
Yes, more detailed articles coming up, keep an eye on YUI blog and developer.yahoo.com.

@krancour
It’s true that YSlow could be pretty brutal in its score, but the grades are merely informational.
About ads and other third party content: at the end it is your page, right, so you decide what to put on it. Also if many people start caring about performance and start bugging the ad providers, then we’ll see a change for good. If site owners don’t do anything, nothing will change.

@Eric Anderson
It’s 20% for Google, not 50% ;)
Amazon: http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt
Google: http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html
Yes, you can use an IP address, there’s no DNS lookup in this case

Comment by stoyan — March 21, 2008

I had just posted something earlier this week on my blog about CNN’s website having 34 external JavaScript includes, totaling 1MB… Bandwidth for some isn’t an issue, for others a huge issue. Developers and content providers need to step it up.

Comment by kward — March 21, 2008

The first step is to find out the purpose of the webpage, what is it’s goal, message? If you’re page lacks focus and a clear purpose you will clutter the page and adversely affect it’s performance. The list of performance best practices are very good, however if you lack a clear vision you’ll have a page either still performs poorly or a page that performs well but is meaningless. Never lose site of purpose and the principle of simplicity.

Comment by PeterTWebshop — March 21, 2008

I’m surprised Yahoo considers Amazon’s S3 a CDN. I didn’t think that’s really what S3 is good at.

Comment by tlrobinson — March 21, 2008

Does anyone know what presentation these slides are from? Is there video of the presenter? I would love to see it.

I was researching their suggestion of flushing output early, and the php flush(); command. On php.net their was a lot of warnings about different problems it could bring with it, does anyone use this – do you have problems?

Comment by louis — March 21, 2008

This was a great read, but I think that in most cases, half of these things are not practical. Most developers simply don’t have 100% control over their servers, and thus a lot of these recommendations become extremely difficult or impossible. Look at krancour’s case: he needs to have those ads on his page, so the iFrame recommendation is an impossibility. Of course, performance is important, but in a lot of cases it is not the most important thing. You might have to sacrifice a little bit of speed to achieve a better user experience (or to make life easier for yourself as a developer), but according to Yahoo! that’s not okay. Unless you’re getting tons of traffic, a good majority of these things don’t have to apply to you.

Comment by musicfreak — March 22, 2008

some of this technics i know from the book “high performance web sites” by Steve Souders, some principle are easy to apply, some not. I’m not sure that gzip is function in ie 5.5 & ie 6 SP1. There are a lot of this browsers in use, and i want to be sure that users are seeing the content of my websites. Anyway is good to know exactly how the browsers work. Yslow extension+firebug is really a step forward to improve performance and give the users a good web experience.

Comment by mindsoul — March 22, 2008

@louis, Here is a previous video from the Y! performance team. Great watch (sound is a bit fuzzy the first 2 minutes)

http://www.youtube.com/watch?v=BTHvs3V8DBA

I would like to note the jpeg algorithm. Because JPEG is compressed it gets uncompressed when it is loaded in to the browser.
A 20Kb image can easily get 60Kb in client memory.

Comment by tan — March 22, 2008

Any idea on why they recommend AJAX GET over POST? This doesn’t make sense to me…I suppose they are saying the GET is faster?

Comment by cnizz — March 24, 2008

I’m surprized by the suggestion to use horizontal image strips. Traditionally for performance image strips always had to be vertical:
http://blogs.msdn.com/oldnewthing/archive/2005/08/05/448073.aspx

I guess this is a case where the performance improvement from smaller download size offsets the increased memory access time.

Comment by Joeri — March 25, 2008

This is great…I can’t believe this is the first time I have heard about PNGCrusher! awesome

Comment by botterlei — March 25, 2008

Leave a comment

You must be logged in to post a comment.