High Performance Webpages
Yahoo!'s Exceptional Performance team has identified 13 best practices for making webpages faster through a series of research studies on Yahoo!'s properties. These guidelines focus on the front-end, for example, why it's bad to use "@import" for including stylesheets and why ETags disable browser caching. These best practices have proven to reduce response times of Yahoo! properties by 25-50%. We focus on the front-end because that's where 80-90% of the end-user response time is spent. This "80-90% front-end" phenomenon is not isolated to just Yahoo!. It holds true for most web sites, including the ten most-visited U.S. web sites. In any optimization effort its critical to profile current performance to identify where the greatest improvement can be made. Its clear that the place to focus for fast web pages is the front-end:
- There is more potential for improvement by focusing on the front-end. Making the back-end twice as fast reduces response times by 5-10%, whereas making the front-end twice as fast saves 40-45%.
- Front-end improvements typically require less time and resources than back-end performance projects.
- Focusing on front-end improvements has proven to work. Over fifty teams at Yahoo! have reduced their end-user response times by following the best practices described here.
As web applications evolve to contain more functionality and content, these best practices are expected to have an even bigger impact. In this workshop we'll discuss the research projects that provided the basis for several rules, as well as the 13 rules themselves. I'll also demonstrate Yahoo! performance tools developed in Firefox and use them to do a live debugging session to evaluate the performance of popular web sites.