0
After YSlow “A”: 20 more ideas for improving the user experience Nicole Sullivan nicolesl@yahoo-inc.com  http://www.stubbo...
The sluggish Web <ul><li>500 ms slower = 20% drop in traffic (Google) </li></ul><ul><li>400ms slower = 5-9% drop in full-p...
Exceptional Performance at Yahoo! <ul><li>Quantify and improve the performance of all Yahoo! products worldwide </li></ul>...
 
The Performance Golden Rule <ul><li>80-90% of the end-user response time is spent on the front-end.  Start there. </li></u...
List of 14 best practices  (updated) <ul><li>Make Fewer HTTP Requests </li></ul><ul><li>Use a Content Delivery Network </l...
After YSlow “A”: 20 more best practices
After YSlow &quot;A&quot;?
After YSlow &quot;A&quot;?
tag:  server
Flush the buffer early <ul><li>Let the browser start fetching components while your backend is busy </li></ul><ul><ul><li>...
tag:  content
Post-load components <ul><li>Ask yourself: what's  absolutely required  in order to render the page initially? </li></ul><...
Post-load components <ul><li>onload.js and onload.css </li></ul><ul><li>Progressive enhancement </li></ul><ul><li>Case stu...
Preload components <ul><li>Preload items you'll need in the future: </li></ul><ul><li>Unconditional  preload (google.com l...
Preload - Unconditional <ul><li>Example: </li></ul>
Preload - Conditional <ul><li>Example: search.yahoo.com </li></ul>
Preload - Anticipated <ul><li>“ The  redesign is cool , but it’s  so slow!” </li></ul><ul><li>Of course it’s slow:  </li><...
Reduce DOM elements <ul><li>World's fastest page?  about:blank ! </li></ul><ul><li>Risks: </li></ul><ul><ul><li>More bytes...
Reduce DOM elements <ul><li>Recommendations: </li></ul><ul><ul><li>Use semantic markup </li></ul></ul><ul><ul><li>Use YUI'...
tag:   javascript
Develop smart event handlers
tag:   css
Avoid filters – AlphaImageLoader <ul><li>Why is the AlphaImageLoader used? </li></ul><ul><ul><li>IE6 and earlier don’t nat...
Avoid AlphaImageLoader <ul><li>Best Solution: Avoid completely,  use gracefully degrading PNG8.  </li></ul><ul><li>Fallbac...
Avoid filters <ul><li>Yahoo! Search saved  50-100ms  for users of IE5&6 </li></ul>
tag:   images
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...
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...
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 <ul><ul><li>Convert all GIFs to PNGs (and check if there’s a saving)   > convert image.gif image.png </li>...
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+ ...
Optimize images <ul><li>All sites can optimize images </li></ul><ul><li>Which (former) presidential candidate had over 200...
Optimize CSS sprites <ul><li>Combine similar colors  </li></ul><ul><li>Keep color count low (<256) to fit in a PNG8 </li><...
Optimize sprites Horizontal may be smaller
To sprite or not to sprite?  <ul><li>1.  How many  pages  does your property have? </li></ul><ul><li>2.  Is your site  mod...
tag:   mobile
Mobile Performance Research Reduce the size of each component to   25 Kb  or less. http://yuiblog.com/blog/2008/02/06/ipho...
URLs – Exceptional Performance <ul><li>YUI blog  </li></ul><ul><li>http://yuiblog.com/blog/category/performance/   </li></...
URLs (contd.) <ul><li>&quot;When the Cookie Crumbles&quot; Tenni Theurer, Steve Souders </li></ul><ul><li>http://yuiblog.c...
Credits – thank you!
Take-home <ul><li>Focus on the front-end </li></ul><ul><li>Optimize images </li></ul><ul><li>Be relentlessly user focused ...
Thank you! Nicole Sullivan nicolesl@yahoo-inc.com  http://www.stubbornella.org Stoyan Stefanov stoyan@yahoo-inc.com  http:...
Upcoming SlideShare
Loading in...5
×

After YSlow "A"

5,674

Published on

YDN Tech talk given on 6/26/2008

Published in: Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,674
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
126
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • Nicole
  • Transcript of "After YSlow "A""

    1. 1. 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
    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>http://developer.yahoo.com/performance/rules.html 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: yahoo.com </li></ul>
    14. 15. Preload components <ul><li>Preload items you'll need in the future: </li></ul><ul><li>Unconditional preload (google.com loads a sprite onload) </li></ul><ul><li>Conditional preload (search.yahoo.com 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: search.yahoo.com </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>yahoo.com 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 Live.com 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. http://yuiblog.com/blog/2008/02/06/iphone-cacheability/ iPhone
    42. 43. URLs – Exceptional Performance <ul><li>YUI blog </li></ul><ul><li>http://yuiblog.com/blog/category/performance/ </li></ul><ul><li>YDN (Yahoo Developer Network) </li></ul><ul><li>http://developer.yahoo.com/performance/ </li></ul><ul><li>YDN blog </li></ul><ul><li>http://developer.yahoo.net/blog/archives/performance/ </li></ul><ul><li>Mailing list (Yahoo! Group) </li></ul><ul><li>http://tech.groups.yahoo.com/group/exceptional-performance/ </li></ul><ul><li>Feedback </li></ul><ul><li>http://developer.yahoo.com/yslow/feedback.html </li></ul>
    43. 44. URLs (contd.) <ul><li>&quot;When the Cookie Crumbles&quot; Tenni Theurer, Steve Souders </li></ul><ul><li>http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ </li></ul><ul><li>&quot;Maximizing Parallel Downloads in the Carpool Lane&quot;, Tenni Theurer, Patty Chi </li></ul><ul><li>http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ </li></ul><ul><li>YUI Image Loader ( http://developer.yahoo.com/yui/imageloader/ ) </li></ul><ul><li>YUI Get ( http://developer.yahoo.com/yui/get/ ) </li></ul><ul><li>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/ ) </li></ul><ul><li>JSMin ( http://www.crockford.com/javascript/jsmin.html ) </li></ul><ul><li>&quot;High-performance AJAX applications&quot; Julien Lecompte http://yuiblog.com/blog/2007/12/20/video-lecomte/ </li></ul><ul><li>Yahoo! engineer Michael J. Radwin talk back in 2004 </li></ul><ul><li>http://www.radwin.org/michael/talks/ </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 nicolesl@yahoo-inc.com http://www.stubbornella.org Stoyan Stefanov stoyan@yahoo-inc.com http://www.phpied.com http://developer.yahoo.com/performance
    1. A particular slide catching your eye?

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

    ×