Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

After YSlow "A"


Published on

YDN Tech talk given on 6/26/2008

Published in: Technology, Design
  • Be the first to comment

After YSlow "A"

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