After YSlow "A"
Upcoming SlideShare
Loading in...5
×
 

After YSlow "A"

on

  • 7,647 views

YDN Tech talk given on 6/26/2008

YDN Tech talk given on 6/26/2008

Statistics

Views

Total Views
7,647
Views on SlideShare
7,621
Embed Views
26

Actions

Likes
8
Downloads
123
Comments
0

4 Embeds 26

http://www.linkedin.com 14
https://www.linkedin.com 6
http://www.slideshare.net 5
http://www.scoop.it 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Nicole

After YSlow "A" After YSlow "A" Presentation Transcript

  • After YSlow “A”: 20 more ideas for improving the user experience Nicole Sullivan nicolesl@yahoo-inc.com http://www.stubbornella.org Stoyan Stefanov stoyan@yahoo-inc.com http://www.phpied.com http://developer.yahoo.com/performance
  • The sluggish Web
    • 500 ms slower = 20% drop in traffic (Google)
    • 400ms slower = 5-9% drop in full-page traffic (Yahoo!) *
    • 100 ms slower = 1% drop in sales (Amazon)
    • * Users leaving before the page finishes loading
  • Exceptional Performance at Yahoo!
    • Quantify and improve the performance of all Yahoo! products worldwide
    • Center of expertise
    • Build tools, analyze data
    • Gather, research, and evangelize best practices - internally and externally
    • YSlow
  •  
  • The Performance Golden Rule
    • 80-90% of the end-user response time is spent on the front-end. Start there.
    • Greater potential for improvement
    • Simpler
    • Proven to work
  • List of 14 best practices (updated)
    • Make Fewer HTTP Requests
    • Use a Content Delivery Network
    • Add Expires header (or Cache-control)
    • Gzip Components
    • Put CSS at the Top
    • Move Scripts to the Bottom (inline too)
    • Avoid CSS Expressions
    • Make JavaScript and CSS External
    • Reduce DNS Lookups
    • Minify JavaScript and CSS (inline too)
    • Avoid Redirects
    • Remove Duplicate Scripts
    • Configure ETags
    • Make AJAX Cacheable
    http://developer.yahoo.com/performance/rules.html content server server server server javascript javascript javascript javascript content css css css css content content
  • After YSlow “A”: 20 more best practices
  • After YSlow "A"?
  • After YSlow "A"?
  • tag: server
  • Flush the buffer early
    • Let the browser start fetching components while your backend is busy
      • PHP function <?php flush(); ?>
      • Best for busy backends / light frontends
    • Case Study: Yahoo! Search
    Components download in parallel with HTML
  • tag: content
  • Post-load components
    • Ask yourself: what's absolutely required in order to render the page initially?
    • The rest can wait (drag and drop, animations, hidden content, images below the fold)
    • JavaScript is ideal candidate for splitting
    • YUI Image Loader
    • YUI Get Utility
  • Post-load components
    • onload.js and onload.css
    • Progressive enhancement
    • Case study: yahoo.com
  • Preload components
    • Preload items you'll need in the future:
    • Unconditional preload (google.com loads a sprite onload)
    • Conditional preload (search.yahoo.com after you type in the input box)
    • Anticipated preload – preload in advance before launching a redesign
  • Preload - Unconditional
    • Example:
  • Preload - Conditional
    • Example: search.yahoo.com
  • Preload - Anticipated
    • “ The redesign is cool , but it’s so slow!”
    • Of course it’s slow:
      • 100% of page views are with an empty cache.
    • New Feature or full redesign?
      • Preload components before launch;
      • users will already have a primed cache when you go live.
  • Reduce DOM elements
    • World's fastest page? about:blank !
    • Risks:
      • More bytes to download
      • Slower DOM access in JavaScript
      • Semantically incorrect markup (like nested tables or abusing <div> s)
  • Reduce DOM elements
    • Recommendations:
      • Use semantic markup
      • Use YUI's reset.css, fonts.css, grids.css
      • Easy to test, just type in Firebug’s console:
        • document.getElementsByTagName('*').length
    • yahoo.com is a busy page and still under 700 HTML elements
  • tag: javascript
  • Develop smart event handlers
  • tag: css
  • Avoid filters – AlphaImageLoader
    • Why is the AlphaImageLoader used?
      • IE6 and earlier don’t natively support alpha transparency. This filter forces that support.
    • Problems:
      • Blocks rendering, freezes the browser
      • Increased memory consumption
      • Per element, not per image!
  • Avoid AlphaImageLoader
    • Best Solution: Avoid completely, use gracefully degrading PNG8.
    • Fallback: use underscore hack so as not to penalize IE7+ users.
    • _filter
  • Avoid filters
    • Yahoo! Search saved 50-100ms for users of IE5&6
  • tag: images
  • Hmm, images?
    • Q: Is this really important?
    • A: Let’s survey the
    • global top 10 sites.
  • What % of page weight is images? Average 45.6% 1 Yahoo! 29% 2 Google 75% 3 YouTube 62% 4 Live.com 64% 5 MSN 41% 6 MySpace 48% 7 Wikipedia 39% 8 Facebook 35% 9 Blogger 27% 10 Yahoo! JP 36%
  • GIF-to-PNG Average 20.42% savings LOSSLESS!
  • Crush PNG Average 16.05% savings LOSSLESS!
  • Strip JPEG metadata Average 11.85% savings LOSSLESS!
  • Optimize images
      • Convert all GIFs to PNGs (and check if there’s a saving) > convert image.gif image.png
      • Crush all PNGs > pngcrush image.png –rem alla –reduce result.png
      • Strip comments from JPEGs > jpegtran -copy none -optimize -perfect src.jpg dest.jpg
  • Case study: Google charts API 1 2 3
  • Case study: Google charts API 1 2 3 Original (707 colors)
  • Case study: Google charts API Original (1408 colors) Crushed (1408 colors) PNG8 (256 colors) 25% saving 55% saving (1000+ colors are lost but who can tell?)
  • Optimize images
    • All sites can optimize images
    • Which (former) presidential candidate had over 200K of useless image information sent over the wire for a single page?!
  • Optimize CSS sprites
    • Combine similar colors
    • Keep color count low (<256) to fit in a PNG8
    • “ Be mobile-friendly” – don’t leave big gaps
  • Optimize sprites Horizontal may be smaller
  • To sprite or not to sprite?
    • 1. How many pages does your property have?
    • 2. Is your site modular ? (hint: it should be!)
    • 3. How much time can your team spend on site maintenance?
  • tag: mobile
  • Mobile Performance Research Reduce the size of each component to 25 Kb or less. http://yuiblog.com/blog/2008/02/06/iphone-cacheability/ iPhone
  • URLs – Exceptional Performance
    • YUI blog
    • http://yuiblog.com/blog/category/performance/
    • YDN (Yahoo Developer Network)
    • http://developer.yahoo.com/performance/
    • YDN blog
    • http://developer.yahoo.net/blog/archives/performance/
    • Mailing list (Yahoo! Group)
    • http://tech.groups.yahoo.com/group/exceptional-performance/
    • Feedback
    • http://developer.yahoo.com/yslow/feedback.html
  • URLs (contd.)
    • &quot;When the Cookie Crumbles&quot; Tenni Theurer, Steve Souders
    • http://yuiblog.com/blog/2007/03/01/performance-research-part-3/
    • &quot;Maximizing Parallel Downloads in the Carpool Lane&quot;, Tenni Theurer, Patty Chi
    • http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
    • YUI Image Loader ( http://developer.yahoo.com/yui/imageloader/ )
    • YUI Get ( http://developer.yahoo.com/yui/get/ )
    • YUI Compressor ( http://developer.yahoo.com/yui/compressor/ contains a Java port of an internal PHP CSS minifier tool written by Isaac Schlueter, http://foohack.com/ )
    • JSMin ( http://www.crockford.com/javascript/jsmin.html )
    • &quot;High-performance AJAX applications&quot; Julien Lecompte http://yuiblog.com/blog/2007/12/20/video-lecomte/
    • Yahoo! engineer Michael J. Radwin talk back in 2004
    • http://www.radwin.org/michael/talks/
  • Credits – thank you!
  • Take-home
    • Focus on the front-end
    • Optimize images
    • Be relentlessly user focused
    • Every feature has a cost
    • Start early!
  • Thank you! Nicole Sullivan nicolesl@yahoo-inc.com http://www.stubbornella.org Stoyan Stefanov stoyan@yahoo-inc.com http://www.phpied.com http://developer.yahoo.com/performance