After YSlow "A"
Download as PPT, PDF10 likes3,272 views
The document discusses 20 additional best practices for improving web performance beyond the original 14 recommendations from YSlow. It covers techniques like flushing the buffer early, splitting components for post-loading, preloading necessary assets, reducing unnecessary DOM elements, optimizing images through techniques like converting to smaller file formats and using CSS sprites, and designing for mobile performance. The document provides examples and case studies to illustrate the recommendations and cites additional resources on web performance.
After YSlow "A"
- 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
- 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
- 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.) "When the Cookie Crumbles" Tenni Theurer, Steve Souders http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ "Maximizing Parallel Downloads in the Carpool Lane", 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 ) "High-performance AJAX applications" 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
Editor's Notes
- #2: Nicole