YSlow 2.0

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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]

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Velocity NY - How to Measure Revenu... by Cliff Crocker 8274 views
Walmart pagespeed-slide by Bitsytask 42931 views

View on Slideshare

1 of 55 Ad

View on Slideshare

1 of 55 Ad