YSlow 2.0 Stoyan Stefanov, Yahoo! Inc. Beijing, Dec 6 th 2008

About the presenter Yahoo! Performance YSlow dev/architect smush.it tool phpied.com blog

Yahoo! Performance

YSlow dev/architect

smush.it tool

phpied.com blog

The importance of performance Task completion Slow site = lost business

Task completion

Slow site = lost business

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

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

The importance of front-end In FF3 HTML Page: 22%

The importance of front-end In IE6 HTML Page: < 5%

Front-end performance Focus on the front-end Greater potential Easier

Focus on the front-end

Greater potential

Easier

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

“ 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

Best practices http://developer.yahoo.com/performance List of 34 best practices Categorized into 7 tags

http://developer.yahoo.com/performance

List of 34 best practices

Categorized into 7 tags

Lossless image optimization http://smush.it

YSlow 1.0 Pre-set rules, grades and scores Hard to customize Firebug dependent “ Yahoo’s problems are not your problems”

Pre-set rules, grades and scores

Hard to customize

Firebug dependent

“ Yahoo’s problems are not your problems”

YSlow 2.0 extensible customizable open to community contributions multi-browser support

extensible

customizable

open to community contributions

multi-browser support

Rules and grading

Rules/ best practices

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

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

Rules Allow developers to create their own rules e.g. No images Use YUI … who knows

Allow developers to create their own rules

e.g.

No images

Use YUI

… who knows

A new rule An object with properties: ID Name Category URL Configuration options Lint method

An object with properties:

ID

Name

Category

URL

Configuration options

Lint method

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){…} } );

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){…}

}

);

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

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'

};

}

The pool We end up with a pool of rules out-of-the-box rules created by the YSlow team contributed by the community

We end up with a pool of rules

out-of-the-box rules created by the YSlow team

contributed by the community

Grading algorithm 1.0 Currently hardcoded 13 “lint” functions are called by name, e.g. lintCSSAtTop() , lintExpires() , etc. Some customizable options, but not many

Currently hardcoded

13 “lint” functions are called by name, e.g. lintCSSAtTop() , lintExpires() , etc.

Some customizable options, but not many

Grading 2.0 Make it algorithm s Customizable Allow users to create their own grading algos

Make it algorithm s

Customizable

Allow users to create their own grading algos

Warning! The screenshots in this presentation are purely fictional Any resemblance with the real YSlow 2.0 is actually highly undesirable

The screenshots in this presentation are purely fictional

Any resemblance with the real YSlow 2.0 is actually highly undesirable

Algos

Ruleset You pick and choose from the pool of rules Customize rule options And create a ruleset A ruleset = a grading algorithm

You pick and choose from the pool of rules

Customize rule options

And create a ruleset

A ruleset = a grading algorithm

Share the new algo YSlow creates a new .xpi - a new Firefox extension which is effectively an extension to YSlow

YSlow creates a new .xpi - a new Firefox extension which is effectively an extension to YSlow

Sharing the .xpi Within the team, so that everyone is on the same page With the world (publish on addons.mozilla.com)

Within the team, so that everyone is on the same page

With the world (publish on addons.mozilla.com)

New Ruleset YSLOW.registerRuleset({ id: 'myrulz', name: 'My custom grading', rules: { ynumreq: {}, ycdn: {}, yexpires: {}, // ... } });

YSLOW.registerRuleset({

id: 'myrulz',

name: 'My custom grading',

rules: {

ynumreq: {},

ycdn: {},

yexpires: {},

// ...

}

});

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

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

Tools and import/export

Tools 1.0

Tools 2.0

Tools 2.0 More tools Custom user tools Import/Export

More tools

Custom user tools

Import/Export

JavaScript tools

CSS tools

Import/Export

Import/export Ability to save YSlow runs, aka “sessions” Ability to open saved sessions Import from other tools – Fiddler, HttpWatch Standard format?

Ability to save YSlow runs, aka “sessions”

Ability to open saved sessions

Import from other tools – Fiddler, HttpWatch

Standard format?

Extensible tools menu

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

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

YSlow.registerTool( { id: 'mytool', name: 'Custom tool #37', print_output: true, run: function(cset) { return 'I am a custom tool'; } } );

YSlow.registerTool(

{

id: 'mytool',

name: 'Custom tool #37',

print_output: true,

run: function(cset) {

return 'I am a custom tool';

}

}

);

Development support

APIs Since users will be using them, the APIs need to be: Stable Documented

Since users will be using them, the APIs need to be:

Stable

Documented

Code organization Separate UI from logic, use renderers Separate from Firebug and Firefox Split and group code to defined libraries

Separate UI from logic, use renderers

Separate from Firebug and Firefox

Split and group code to defined libraries

Code quality Follow better practices / run JSLint Unit tests

Follow better practices / run JSLint

Unit tests

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: 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

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

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)

#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)

Stoyan Stefanov [email_address]