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

58,316

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
0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
58,316
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
392
Comments
0
Likes
32
Embeds 0
No embeds

No notes for slide

YSlow 2.0

  1. 1. YSlow 2.0 Stoyan Stefanov, Yahoo! Inc. Beijing, Dec 6 th 2008
  2. 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. 3. The importance of performance <ul><li>Task completion </li></ul><ul><li>Slow site = lost business </li></ul>
  4. 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. 5. The importance of front-end In FF3 HTML Page: 22%
  6. 6. The importance of front-end In IE6 HTML Page: < 5%
  7. 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. 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. 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
  11. 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>
  12. 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>
  13. 14. Rules and grading
  14. 15. Rules/ best practices
  15. 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>
  16. 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>
  17. 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>
  18. 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>
  19. 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>
  20. 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>
  21. 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>
  22. 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>
  23. 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>
  24. 25. Algos
  25. 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>
  26. 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>
  27. 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>
  28. 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>
  29. 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>
  30. 34. Tools and import/export
  31. 35. Tools 1.0
  32. 36. Tools 2.0
  33. 37. Tools 2.0 <ul><li>More tools </li></ul><ul><li>Custom user tools </li></ul><ul><li>Import/Export </li></ul>
  34. 38. JavaScript tools
  35. 39. CSS tools
  36. 40. Import/Export
  37. 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>
  38. 42. Extensible tools menu
  39. 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>
  40. 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>
  41. 45. Development support
  42. 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>
  43. 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>
  44. 48. Code quality <ul><li>Follow better practices / run JSLint </li></ul><ul><li>Unit tests </li></ul>
  45. 49. Flow diagram
  46. 50. Pool of rule objects “ Yahoo! default” ruleset object “ Personal blog” ruleset object “ SEO” ruleset object L I N T
  47. 51. Contains result objects L I N T resultset HTML renderer <ol> <li>Minimize HTTP requests… JSON renderer
  48. 52. Types of extensions to YSlow 2.0. (summary)
  49. 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>
  50. 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>
  51. 55. Stoyan Stefanov [email_address]
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×