Optimizing Websites with YSlow Tom Lianza Co-Founder Wishlisting.com Tom Lianza Co-Founder...
-
Upload
kylie-erickson -
Category
Documents
-
view
216 -
download
0
Transcript of Optimizing Websites with YSlow Tom Lianza Co-Founder Wishlisting.com Tom Lianza Co-Founder...
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?