YSlow 2.0
Upcoming SlideShare
Loading in...5
×
 

YSlow 2.0

on

  • 52,144 views

My slides from the "Exceptional Website Performance with YSlow 2.0" show at CSDN (China Software Developers Network) in Beijing, Dec 6, 2008

My slides from the "Exceptional Website Performance with YSlow 2.0" show at CSDN (China Software Developers Network) in Beijing, Dec 6, 2008

Statistics

Views

Total Views
52,144
Views on SlideShare
28,586
Embed Views
23,558

Actions

Likes
31
Downloads
386
Comments
0

35 Embeds 23,558

http://www.phpied.com 23260
http://otroblogmas.com 48
http://www.techpresentations.org 36
http://www.slideshare.net 27
http://www.newsblur.com 26
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://webcache.googleusercontent.com 6
http://webcache.googleusercontent.com 6
http://translate.googleusercontent.com 6
http://www.techiegyan.com 6
http://techno-sphere.blogspot.com 6
http://flavors.me 4
http://tugll.tugraz.at 4
http://www.mmm.phpied.com 4
url_unknown 4
http://www.e-presentations.us 3
http://www.techgig.com 3
http://blogsdirectoryhub.com 3
http://dev.newsblur.com 2
http://www.slideee.com 2
http://localhost 1
https://www.linkedin.com 1
http://techno-sphere.blogspot.ca 1
http://www.linkedin.com 1
http://tester 1
http://ranksit.com 1
http://preview.dolitl.com 1
http://static.slideshare.net 1
http://192.168.100.250 1
http://techno-sphere.blogspot.com.es 1
http://bbain@extranet.atlassian.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

YSlow 2.0 YSlow 2.0 Presentation Transcript

  • 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
  • Algos
  •  
  • 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]