YSlow 2.0

60,957
-1

Published on

My slides from the "Exceptional Website Performance with YSlow 2.0" show at CSDN (China Software Developers Network) in Beijing, Dec 6, 2008

Published in: Technology

YSlow 2.0

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

×