Your SlideShare is downloading. ×
0
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
After YSlow "A"
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

After YSlow "A"

5,655

Published on

YDN Tech talk given on 6/26/2008

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,655
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
126
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Nicole
  • Transcript

    • 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. 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. 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>
    • 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
    • 7. After YSlow “A”: 20 more best practices
    • 8. After YSlow &quot;A&quot;?
    • 9. After YSlow &quot;A&quot;?
    • 10. tag: server
    • 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
    • 12. tag: content
    • 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>
    • 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>
    • 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>
    • 16. Preload - Unconditional <ul><li>Example: </li></ul>
    • 17. Preload - Conditional <ul><li>Example: search.yahoo.com </li></ul>
    • 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>
    • 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>
    • 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>
    • 21. tag: javascript
    • 22. Develop smart event handlers
    • 23. tag: css
    • 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>
    • 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>
    • 26. Avoid filters <ul><li>Yahoo! Search saved 50-100ms for users of IE5&6 </li></ul>
    • 27. tag: images
    • 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>
    • 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%
    • 30. GIF-to-PNG Average 20.42% savings LOSSLESS!
    • 31. Crush PNG Average 16.05% savings LOSSLESS!
    • 32. Strip JPEG metadata Average 11.85% savings LOSSLESS!
    • 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>
    • 34. Case study: Google charts API 1 2 3
    • 35. Case study: Google charts API 1 2 3 Original (707 colors)
    • 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?)
    • 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>
    • 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>
    • 39. Optimize sprites Horizontal may be smaller
    • 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>
    • 41. tag: mobile
    • 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
    • 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>
    • 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>
    • 45. Credits – thank you!
    • 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>
    • 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

    ×