After YSlow "A"


Published on

YDN Tech talk given on 6/26/2008

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

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Nicole
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.