1. Optimizing Websites with YSlow Tom Lianza Co-Founder Wishlisting.com Tom Lianza Co-Founder Wishlisting.com

2. What is Yslow? By Yahoo - A performance report card for your site. http://developer.yahoo.com/yslow/ By Yahoo - A performance report card for your site. http://developer.yahoo.com/yslow/

3. What its going to tell you Browser Caching report HTTP Request Breakdown Browser Caching report HTTP Request Breakdown

4. Note: Dont take the Grades Too Seriously Amazon.com: D Yahoo.com and Google.com: A MSN.com: F The YSlow download page: C Amazon.com: D Yahoo.com and Google.com: A MSN.com: F The YSlow download page: C

5. Caching + Compression YSlows two best features (in my opinion) Yahoo study: 20% of overall pageviews are with an empty cache. 40-60% of users have an empty cache experience Caching: helps repeat visitors Compression: helps everyone YSlows two best features (in my opinion) Yahoo study: 20% of overall pageviews are with an empty cache. 40-60% of users have an empty cache experience Caching: helps repeat visitors Compression: helps everyone

6. Caching: Conditional GET By default, uses file timestamps (Last- Modified/If-Modified-Since) Entity Tags (Etags) could be more precise, but YSlow punishes you for using them. Apache: FileETag MTime Size or FileETag none More info: http://joshua.schachter.org/2006/11/apache-etags.htmlhttp://joshua.schachter.org/2006/11/apache-etags.html Dynamic content: Rails 2.0 will have ETag support and if-modified function (faster). By default, uses file timestamps (Last- Modified/If-Modified-Since) Entity Tags (Etags) could be more precise, but YSlow punishes you for using them. Apache: FileETag MTime Size or FileETag none More info: http://joshua.schachter.org/2006/11/apache-etags.htmlhttp://joshua.schachter.org/2006/11/apache-etags.html Dynamic content: Rails 2.0 will have ETag support and if-modified function (faster).

7. Caching: Expires Header Tells the browser that an element neednt be re-fetched until some date in the future. Super-fast. Mainly for static content. We use Apaches mod_expires ExpiresActive on ExpiresDefault "access plus 1 year" More info: http://betterexplained.com/articles/how-to-optimize-your-site- with-http-caching/ Tells the browser that an element neednt be re-fetched until some date in the future. Super-fast. Mainly for static content. We use Apaches mod_expires ExpiresActive on ExpiresDefault "access plus 1 year" More info: http://betterexplained.com/articles/how-to-optimize-your-site- with-http-caching/

8. Compression: Gzip Send your files zipped up. Browsers unzip automatically Less bandwidth. Dead simple. Apache mod_deflate. More info: http://betterexplained.com/articles/how-to-optimize- your-site-with-gzip-compression/ Our config: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html Send your files zipped up. Browsers unzip automatically Less bandwidth. Dead simple. Apache mod_deflate. More info: http://betterexplained.com/articles/how-to-optimize- your-site-with-gzip-compression/ Our config: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

9. Compression: Minify JavaScript Javascript can be reformatted to be smaller. Several popular tools: DoJo ShrinkSafe, Dean Edwards Packer, JSMin, YUI Compressor Less bandwidth. Code illegible. Rails 2.0 will have this baked in. asset_packager plugin will do some of this now (for CSS too) Javascript can be reformatted to be smaller. Several popular tools: DoJo ShrinkSafe, Dean Edwards Packer, JSMin, YUI Compressor Less bandwidth. Code illegible. Rails 2.0 will have this baked in. asset_packager plugin will do some of this now (for CSS too)

10. Reduce Requests DNS lookups Can take 20-120ms each Target 2-4 hosts Rails distributed_assets HTTP Requests CSS Sprites Inline CSS/JavaScript Rails asset_packager (again) DNS lookups Can take 20-120ms each Target 2-4 hosts Rails distributed_assets HTTP Requests CSS Sprites Inline CSS/JavaScript Rails asset_packager (again)

11. Page Structure Make CSS + JavaScript external for separate caching CSS at the top for progressive rendering JavaScript at the bottom to prevent blocking requests Make CSS + JavaScript external for separate caching CSS at the top for progressive rendering JavaScript at the bottom to prevent blocking requests

12. Any Questions?