The document discusses YSlow 2.0, a web performance tool developed by Yahoo! that emphasizes the importance of front-end optimization to improve loading times and reduce business losses caused by slow websites. It presents features of YSlow 2.0, including customizable rulesets, community contributions, and enhanced import/export capabilities, aimed at helping developers create effective performance strategies. The document also outlines new rules and algorithms for assessing website performance, highlighting significant improvements over the previous version.

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

14. Rules and grading

15. Rules/ best practices

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

34. Tools and import/export

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?

42. Extensible tools menu

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'; } } );

45. Development support

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]