YSlow 2.0

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

The importance of performance
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

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

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

Best practices
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”

YSlow 2.0
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

Rules
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

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

The pool
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

Grading 2.0
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

Ruleset
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

Sharing the .xpi
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: {},
// ...
}
});

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

Tools and import/export

Tools 1.0

Tools 2.0

Tools 2.0
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?

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

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

Code organization
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

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

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)

Stoyan Stefanov [email_address]

http://www.phpied.com	23035
http://otroblogmas.com	36
http://www.techpresentations.org	36
http://www.slideshare.net	27
http://www.newsblur.com	25
http://memiks.fr	24
http://extranet.atlassian.com	23
http://www.perfplanet.com	18
http://www.blogjer.com	17
http://www.blogsdirectoryhub.com	9
http://www.techiegyan.com	6
http://techno-sphere.blogspot.com	5
http://translate.googleusercontent.com	5
http://webcache.googleusercontent.com	5
http://webcache.googleusercontent.com	5
http://tugll.tugraz.at	4
http://flavors.me	4
url_unknown	4
http://blogsdirectoryhub.com	3
http://www.techgig.com	3
http://www.e-presentations.us	3
http://dev.newsblur.com	2
http://www.linkedin.com	1
http://www.mmm.phpied.com	1
http://ranksit.com	1
http://bbain@extranet.atlassian.com	1
http://192.168.100.250	1
http://techno-sphere.blogspot.com.es	1
http://static.slideshare.net	1
http://preview.dolitl.com	1
http://localhost	1
http://tester	1
http://techno-sphere.blogspot.ca	1

YSlow 2.0

by Stoyan Stefanov

Accessibility

Categories

Upload Details

Usage Rights

33 Embeds 23,310

Statistics

YSlow 2.0 Presentation Transcript

YSlow 2.0

by Stoyan Stefanov

Accessibility

Categories

Upload Details

Usage Rights

33 Embeds 23,310

Statistics

YSlow 2.0 Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare