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

What is Yslow? By Yahoo - A performance report card for your site. By Yahoo - A performance report card for your site.

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

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

Caching + Compression YSlows two best features (in my opinion) Yahoo study: 20% of overall pageviews are with an empty cache % 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 % of users have an empty cache experience Caching: helps repeat visitors Compression: helps everyone

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: 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: Dynamic content: Rails 2.0 will have ETag support and if-modified function (faster).

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: 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: with-http-caching/

Compression: Gzip Send your files zipped up. Browsers unzip automatically Less bandwidth. Dead simple. Apache mod_deflate. More info: your-site-with-gzip-compression/ Our config: Send your files zipped up. Browsers unzip automatically Less bandwidth. Dead simple. Apache mod_deflate. More info: your-site-with-gzip-compression/ Our config:

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)

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

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

Any Questions?