Using Firebug & YSlow to Optimize Your Online App Presented by Brad Vernon bradv@shark-media.com Tulsa.rb Group Oct. 1, 2007

Using Firebug & YSlow to Optimize Your Online App Literal definition: Arsonist: a criminal who illegally sets fire to property What we care about: An extension to Firefox or IE JavaScript Library Created by Joe Hewitt (now in state of flux) Helps with the debugging of JavaScript and Ajax. Includes a DOM inspector, JavaScript console, command-line JavaScript interpreter, JavaScript profiler, and CSS/HTML editor What is Firebug? May 27, 2009

Literal definition:

Arsonist: a criminal who illegally sets fire to property

What we care about:

An extension to Firefox or IE JavaScript Library

Created by Joe Hewitt (now in state of flux)

Helps with the debugging of JavaScript and Ajax.

Includes a DOM inspector, JavaScript console, command-line JavaScript interpreter, JavaScript profiler, and CSS/HTML editor

Using Firebug & YSlow to Optimize Your Online App Shows all Ajax based GET/POST requests Log your own info using console.log(), console.info(), console.debug(), console.warn(), and console.error() Can be DOM element, object, or string Easy way to edit CSS/HTML on the fly Measure your script performance Find what and where JavaScript errors occur Why should you use it? May 27, 2009

Shows all Ajax based GET/POST requests

Log your own info using

console.log(), console.info(), console.debug(), console.warn(), and console.error()

Can be DOM element, object, or string

Easy way to edit CSS/HTML on the fly

Measure your script performance

Find what and where JavaScript errors occur

Using Firebug & YSlow to Optimize Your Online App What does it look like? May 27, 2009

Using Firebug & YSlow to Optimize Your Online App What does it look like? May 27, 2009

Using Firebug & YSlow to Optimize Your Online App Developed by Yahoo Engineers Analyzes web pages & tells why they may be slow Based on the rules for high performance web sites Firefox only add-on integrated with the popular Firebug web development tool Report gives you: Performance report card HTTP/HTML summary List of components in the page Tools including JSLint (JavaScript verifier) What is YSlow? May 27, 2009

Developed by Yahoo Engineers

Analyzes web pages & tells why they may be slow

Based on the rules for high performance web sites

Firefox only add-on integrated with the popular Firebug web development tool

Report gives you:

Performance report card

HTTP/HTML summary

List of components in the page

Tools including JSLint (JavaScript verifier)

Using Firebug & YSlow to Optimize Your Online App Fastest way to find slow downs in your website Grading makes it simple Links directly to information that can help get better grade on test Adds to the powerful Firebug Why should you use it? May 27, 2009

Fastest way to find slow downs in your website

Grading makes it simple

Links directly to information that can help get better grade on test

Adds to the powerful Firebug

Using Firebug & YSlow to Optimize Your Online App What are the tests? May 27, 2009

Using Firebug & YSlow to Optimize Your Online App Use CSS Sprites to reduce images #panel1b a:hover { background: transparent url(test-3.jpg) 0 -200px no-repeat; } #panel2b a:hover { background: transparent url(test-3.jpg) -96px -200px no-repeat; } Quick tips based on YSlow May 27, 2009

Use CSS Sprites to reduce images

#panel1b a:hover {

background: transparent url(test-3.jpg) 0 -200px no-repeat;

}

#panel2b a:hover {

background: transparent url(test-3.jpg) -96px -200px no-repeat;

}

Using Firebug & YSlow to Optimize Your Online App Use multiple (2-4) sub-domains to mimic a Content Delivery Network (CDN) Limit to number of items per domain at a time Firefox = 4 items IE = 2 items Safari = 4 items (not verified) Examples: js.domain.com, images.domain.com Quick tips based on YSlow May 27, 2009

Use multiple (2-4) sub-domains to mimic a Content Delivery Network (CDN)

Limit to number of items per domain at a time

Firefox = 4 items

IE = 2 items

Safari = 4 items (not verified)

Examples: js.domain.com, images.domain.com

Using Firebug & YSlow to Optimize Your Online App Gzip your JavaScript, CSS, and HTML using mod_gzip or mod_deflate in Apache AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css Quick tips based on YSlow May 27, 2009

Gzip your JavaScript, CSS, and HTML using mod_gzip or mod_deflate in Apache AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

Using Firebug & YSlow to Optimize Your Online App Use an expires tag in Apache ExpiresDefault "access plus 10 years“ ExpiresByType image/gif "modification plus 5 hours 3 minutes" Quick tips based on YSlow May 27, 2009

Use an expires tag in Apache ExpiresDefault "access plus 10 years“ ExpiresByType image/gif "modification plus 5 hours 3 minutes"

Using Firebug & YSlow to Optimize Your Online App Put CSS in the <head> and JavaScript at the bottom of the page Most JavaScript runs on document.ready() Show visual before function – makes it look like it’s loading faster Quick tips based on YSlow May 27, 2009

Put CSS in the <head> and JavaScript at the bottom of the page

Most JavaScript runs on document.ready()

Show visual before function – makes it look like it’s loading faster

Using Firebug & YSlow to Optimize Your Online App Minify your JavaScript using one of these: JSMin (my choice) Dojo Shrinksafe Dean Edwards Packer (Obscures code) YUI Compressor (New Kid on the Block) Find which is best at: http://compressorrater.thruhere.net/ Quick tips based on YSlow May 27, 2009

Minify your JavaScript using one of these:

JSMin (my choice)

Dojo Shrinksafe

Dean Edwards Packer (Obscures code)

YUI Compressor (New Kid on the Block)

Find which is best at: http://compressorrater.thruhere.net/

Using Firebug & YSlow to Optimize Your Online App Use ETags Unique identifier of content and cache 10c24bc-4ab-457e1c1f Doesn’t work when spanning servers, but consistent domains (images.domain.com) will work Quick tips based on YSlow May 27, 2009

Use ETags

Unique identifier of content and cache

10c24bc-4ab-457e1c1f

Doesn’t work when spanning servers, but consistent domains (images.domain.com) will work

Questions? [email_address] Using Firebug & YSlow to Optimize Your Online App