Your SlideShare is downloading. ×
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,588

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,588
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
      • 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
    • 3. 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
    • 4.  
    • 5. 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
    • 6. 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
    • 7. After YSlow “A”: 20 more best practices
    • 8. After YSlow "A"?
    • 9. After YSlow "A"?
    • 10. tag: server
    • 11. 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
    • 12. tag: content
    • 13. 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
    • 14. Post-load components
      • onload.js and onload.css
      • Progressive enhancement
      • Case study: yahoo.com
    • 15. 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
    • 16. Preload - Unconditional
      • Example:
    • 17. Preload - Conditional
      • Example: search.yahoo.com
    • 18. 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.
    • 19. 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)
    • 20. 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
    • 21. tag: javascript
    • 22. Develop smart event handlers
    • 23. tag: css
    • 24. 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!
    • 25. Avoid AlphaImageLoader
      • Best Solution: Avoid completely, use gracefully degrading PNG8.
      • Fallback: use underscore hack so as not to penalize IE7+ users.
      • _filter
    • 26. Avoid filters
      • Yahoo! Search saved 50-100ms for users of IE5&6
    • 27. tag: images
    • 28. Hmm, images?
      • Q: Is this really important?
      • A: Let’s survey the
      • global top 10 sites.
    • 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
        • 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
    • 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
      • All sites can optimize images
      • Which (former) presidential candidate had over 200K of useless image information sent over the wire for a single page?!
    • 38. Optimize CSS sprites
      • Combine similar colors
      • Keep color count low (<256) to fit in a PNG8
      • “ Be mobile-friendly” – don’t leave big gaps
    • 39. Optimize sprites Horizontal may be smaller
    • 40. 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?
    • 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
      • 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
    • 44. 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/
    • 45. Credits – thank you!
    • 46. Take-home
      • Focus on the front-end
      • Optimize images
      • Be relentlessly user focused
      • Every feature has a cost
      • Start early!
    • 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

    ×