Friday, March 21st, 2008
Yahoo! releases new performance best practices
Category: Performance, Yahoo!
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 | [javascript] |
| 12. Develop smart event handlers | [javascript] |
| 13. Choose <link> over @import | [css] |
| 14. Avoid filters | [css] |
| 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?
Related Content:
4.5 rating from 65 votes
I really, really, like this post, keep it up. Especially the iPhone 25K tip :)
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!
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?
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.
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.
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!
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.
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?
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.
@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
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.
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.
I’m surprised Yahoo considers Amazon’s S3 a CDN. I didn’t think that’s really what S3 is good at.
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?
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.
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.
@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.
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?
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.
This is great…I can’t believe this is the first time I have heard about PNGCrusher! awesome