YSlow 2.0
•Download as PPT, PDF•
34 likes•51,698 views
My slides from the "Exceptional Website Performance with YSlow 2.0" show at CSDN (China Software Developers Network) in Beijing, Dec 6, 2008
Report
Share
Related slideshows
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Similar to YSlow 2.0
Similar to YSlow 2.0 (20)
More from Stoyan Stefanov
More from Stoyan Stefanov (20)
Recently uploaded
Recently uploaded (20)
YSlow 2.0
- 1. YSlow 2.0 Stoyan Stefanov, Yahoo! Inc. Beijing, Dec 6 th 2008
- 2. About the presenter Yahoo! Performance YSlow dev/architect smush.it tool phpied.com blog
- 3. The importance of performance Task completion Slow site = lost business
- 4. The importance of performance 500 ms slower = 20% drop in traffic (Google) 400 ms slower = 5-9% drop in full-page traffic* (Yahoo!) 100 ms slower = 1% drop in sales (Amazon) * Users leaving before the page finishes loading
- 5. The importance of front-end In FF3 HTML Page: 22%
- 6. The importance of front-end In IE6 HTML Page: < 5%
- 7. Front-end performance Focus on the front-end Greater potential Easier
- 8. 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
- 9. Best practices http://developer.yahoo.com/performance List of 34 best practices Categorized into 7 tags
- 11. Lossless image optimization http://smush.it
- 12. YSlow 1.0 Pre-set rules, grades and scores Hard to customize Firebug dependent “ Yahoo’s problems are not your problems”
- 13. YSlow 2.0 extensible customizable open to community contributions multi-browser support
- 16. Rules Current list of rules in YSlow – 13 Current list of rules on YDN – 34 Add new rules 10 rules were identified as testable Categorize the rules
- 17. Rules Allow developers to create their own rules e.g. No images Use YUI … who knows
- 18. A new rule An object with properties: ID Name Category URL Configuration options Lint method
- 19. YSlow.registerRule ( { id: 'no_images', name: 'No images', categories: ['images', 'content'], url: 'http://blog.ws/myrule.html', config: { allowed: 0 }, lint: function(doc, cset, config){…} } );
- 20. lint: function(doc, cset, config) { var grade = 100; var num = cset.getComponentsByType(['image']); if (num.length > config.allowed) { grade = 0; } return { grade: grade, message: 'Please do not use images' }; }
- 21. The pool We end up with a pool of rules out-of-the-box rules created by the YSlow team contributed by the community
- 22. Grading algorithm 1.0 Currently hardcoded 13 “lint” functions are called by name, e.g. lintCSSAtTop() , lintExpires() , etc. Some customizable options, but not many
- 23. Grading 2.0 Make it algorithm s Customizable Allow users to create their own grading algos
- 24. Warning! The screenshots in this presentation are purely fictional Any resemblance with the real YSlow 2.0 is actually highly undesirable
- 25. Algos
- 27. Ruleset You pick and choose from the pool of rules Customize rule options And create a ruleset A ruleset = a grading algorithm
- 30. Share the new algo YSlow creates a new .xpi - a new Firefox extension which is effectively an extension to YSlow
- 31. Sharing the .xpi Within the team, so that everyone is on the same page With the world (publish on addons.mozilla.com)
- 32. New Ruleset YSLOW.registerRuleset({ id: 'myrulz', name: 'My custom grading', rules: { ynumreq: {}, ycdn: {}, yexpires: {}, // ... } });
- 33. Logic YSlow 1.0: Go through a list of preset rules and preset options YSlow 2.0: What’s the current ruleset? Loop through the rules in the set and call their lint() Gather an array of results
- 35. Tools 1.0
- 36. Tools 2.0
- 37. Tools 2.0 More tools Custom user tools Import/Export
- 38. JavaScript tools
- 39. CSS tools
- 40. Import/Export
- 41. Import/export Ability to save YSlow runs, aka “sessions” Ability to open saved sessions Import from other tools – Fiddler, HttpWatch Standard format?
- 43. Extensible tools User creates a function that takes the list of components and does something The function is published in an extension to YSlow User-created tools have access to the YSlow APIs Most likely the tool produces a result (HTML), so let’s make this easy
- 44. YSlow.registerTool( { id: 'mytool', name: 'Custom tool #37', print_output: true, run: function(cset) { return 'I am a custom tool'; } } );
- 46. APIs Since users will be using them, the APIs need to be: Stable Documented
- 47. Code organization Separate UI from logic, use renderers Separate from Firebug and Firefox Split and group code to defined libraries
- 48. Code quality Follow better practices / run JSLint Unit tests
- 49. Flow diagram
- 50. Pool of rule objects “ Yahoo! default” ruleset object “ Personal blog” ruleset object “ SEO” ruleset object L I N T
- 51. Contains result objects L I N T resultset HTML renderer <ol> <li>Minimize HTTP requests… JSON renderer
- 52. Types of extensions to YSlow 2.0. (summary)
- 53. An extension to YSlow can: Add a new Rule Add a new Ruleset (can also be generated using the UI) Add a new Tool Add a new Renderer Add a new export or import format
- 54. New rules in YSlow 2.0 #14 - Make Ajax cacheable #16 - Use GET for XHR #19 - Reduce the number of DOM elements #22 - No 404s #23 - Reduce cookie size #24 - Cookie-free static components #28 - Avoid AlphaImageLoader #31 - Don’t scale images in HTML #32 - Make favicon small and cacheable #33 – Components under 25K (iPhone)
- 55. Stoyan Stefanov [email_address]