Steve Souders of Yahoo’s “Exceptional Performance Team” gave an insanely great presentation at Web 2.0 about optimizing website performance by focusing on front end issues. Unfortunately I didn’t get to see it in person but the Web 2.0 talks have just been put up and the ppt is fascinating and absolutely a must-read for anyone involved in web products.
His work has been serialized on the Yahoo user interface blog, and will also be published in an upcoming O’Reilly title (est publish date: Sep 07).
We have so much of this wrong at topix now that it makes me want to cry but you can bet I’ve already emailed this ppt to my eng team. Even if you’re pure mgmt or product marketing you need to be aware of these issues and how they directly affect user experience. We’ve seen a direct correlation between site speed and traffic.
This is a big presentation, with a lot of data in it (a whole book’s worth apparently), but half way through he boils it down into 14 rules for faster front end performance:
1. Make fewer HTTP requests 减少http请求
2. Use a CDN 使用CDN(Content Delivery Network)
3. Add an Expires header 为页面header加上过期失效标识
4. Gzip components 使用Gzip压缩
5. Put CSS at the top 将CSS置于页面顶部
6. Move JS to the bottom 将JS放到页脚
7. Avoid CSS expressions 避免使用CSS expressions(典型的用法是css中混杂js)
8. Make JS and CSS external 站外引用JS和CSS
9. Reduce DNS lookups 减少DNS查询
10. Minify JS 精简JS代码
11. Avoid redirects 避免重定向
12. Remove duplicate scripts 去掉重复脚本代码
13. Turn off ETags 关闭掉Etags
14. Make AJAX cacheable and small 使ajax可缓存并尽可能的精简
The full talk has details on what all of these mean in practice. The final slide of the deck is a set of references and resources, which I’ve pulled out here for clickability: