Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
YSlow 2.0 Stoyan Stefanov, Yahoo! Inc. Beijing, Dec 6 th  2008
About the presenter <ul><li>Yahoo! Performance </li></ul><ul><li>YSlow dev/architect </li></ul><ul><li>smush.it  tool </li...
The importance of performance <ul><li>Task completion </li></ul><ul><li>Slow site = lost business </li></ul>
The importance of performance <ul><li>500 ms slower = 20% drop in traffic (Google) </li></ul><ul><li>400 ms slower = 5-9% ...
The importance of front-end In FF3 HTML Page: 22%
The importance of front-end In IE6 HTML Page:  < 5%
Front-end performance <ul><li>Focus on the front-end </li></ul><ul><li>Greater potential </li></ul><ul><li>Easier </li></ul>
Exceptional Performance at Yahoo! <ul><li>“ Quantify and improve the performance of all Yahoo! products worldwide” </li></...
Best practices <ul><li>http://developer.yahoo.com/performance   </li></ul><ul><li>List of 34 best practices </li></ul><ul>...
 
Lossless image optimization http://smush.it
YSlow 1.0 <ul><li>Pre-set rules, grades and scores </li></ul><ul><li>Hard to customize </li></ul><ul><li>Firebug dependent...
YSlow 2.0 <ul><li>extensible  </li></ul><ul><li>customizable </li></ul><ul><li>open to community contributions </li></ul><...
Rules and grading
Rules/ best practices
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>Ad...
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>...
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>YSlow.registerRule ( </li></ul><ul><li>{ </li></ul><ul><li>id: 'no_images', </li></ul><ul><li>name: 'No images', <...
<ul><li>lint: function(doc, cset, config) { </li></ul><ul><li>var grade = 100; </li></ul><ul><li>var num = cset.getCompone...
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...
Grading algorithm 1.0 <ul><li>Currently hardcoded </li></ul><ul><li>13 “lint” functions are called by name, e.g.  lintCSSA...
Grading 2.0 <ul><li>Make it algorithm s </li></ul><ul><li>Customizable </li></ul><ul><li>Allow users to create their own g...
Warning! <ul><li>The screenshots in this presentation are purely fictional </li></ul><ul><li>Any resemblance with the real...
Algos
 
Ruleset <ul><li>You pick and choose from the pool of rules </li></ul><ul><li>Customize rule options </li></ul><ul><li>And ...
 
 
Share the new algo <ul><li>YSlow creates a new .xpi -  a new Firefox extension which is effectively an extension to YSlow ...
Sharing the .xpi <ul><li>Within the team, so that everyone is on the same page </li></ul><ul><li>With the world (publish o...
New Ruleset <ul><li>YSLOW.registerRuleset({  </li></ul><ul><li>id: 'myrulz', </li></ul><ul><li>name: 'My custom grading', ...
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>...
Tools and import/export
Tools 1.0
Tools 2.0
Tools 2.0 <ul><li>More tools </li></ul><ul><li>Custom user tools </li></ul><ul><li>Import/Export </li></ul>
JavaScript tools
CSS tools
Import/Export
Import/export <ul><li>Ability to save YSlow runs, aka “sessions” </li></ul><ul><li>Ability to open saved sessions </li></u...
Extensible tools menu
Extensible tools <ul><li>User creates a function that takes the list of components and does something </li></ul><ul><li>Th...
<ul><li>YSlow.registerTool( </li></ul><ul><li>{ </li></ul><ul><li>id: 'mytool', </li></ul><ul><li>name: 'Custom tool #37',...
Development support
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>...
Code organization <ul><li>Separate UI from logic, use renderers </li></ul><ul><li>Separate from Firebug and Firefox </li><...
Code quality <ul><li>Follow better practices / run JSLint </li></ul><ul><li>Unit tests </li></ul>
Flow diagram
Pool of  rule  objects “ Yahoo! default” ruleset  object “ Personal blog” ruleset  object “ SEO” ruleset  object L I N T
Contains result  objects L I N T resultset HTML renderer <ol> <li>Minimize HTTP requests… JSON renderer
Types of extensions to YSlow 2.0. (summary)
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)...
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 - R...
Stoyan Stefanov  [email_address]
Upcoming SlideShare
Loading in …5
×

YSlow 2.0

79,678 views

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]

×