Optimizing Websites with YSlow

Optimizing Websites with YSlow

Tom LianzaCo-Founder Wishlisting.com

Tom LianzaCo-Founder Wishlisting.com

What is Yslow?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/

What it’s going to tell youWhat it’s going to tell you

Browser Caching report

HTTP Request Breakdown

Browser Caching report

HTTP Request Breakdown

Note: Don’t take the Grades Too SeriouslyNote: Don’t take the Grades Too Seriously

Amazon.com: DYahoo.com and Google.com: AMSN.com: FThe YSlow download page: C

Amazon.com: DYahoo.com and Google.com: AMSN.com: FThe YSlow download page: C

Caching + CompressionCaching + Compression

YSlow’s 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

YSlow’s 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

Caching: Conditional GETCaching: 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.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.html

Dynamic content: Rails 2.0 will have ETag support and if-modified function (faster).

Caching: Expires HeaderCaching: Expires Header

Tells the browser that an element needn’t be re-fetched until some date in the future.

Super-fast. Mainly for static content.We use Apache’s mod_expires <filesmatch "\.(jp?g|gif|png|css)$"> ExpiresActive on ExpiresDefault "access plus 1 year" </filesmatch> More info: http://betterexplained.com/articles/how-to-optimize-your-site-

with-http-caching/

Tells the browser that an element needn’t be re-fetched until some date in the future.

Super-fast. Mainly for static content.We use Apache’s mod_expires <filesmatch "\.(jp?g|gif|png|css)$"> ExpiresActive on ExpiresDefault "access plus 1 year" </filesmatch> More info: http://betterexplained.com/articles/how-to-optimize-your-site-

with-http-caching/

Compression: GzipCompression: 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

Compression: Minify JavaScript

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 RequestsReduce Requests

DNS lookupsCan take 20-120ms eachTarget 2-4 hostsRails distributed_assets

HTTP RequestsCSS SpritesInline CSS/JavaScriptRails asset_packager (again)

DNS lookupsCan take 20-120ms eachTarget 2-4 hostsRails distributed_assets

HTTP RequestsCSS SpritesInline CSS/JavaScriptRails asset_packager (again)

Page StructurePage 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?Any Questions?