Using Firebug & YSlow

Using Firebug & YSlow to Optimize Your Online App

Presented by

Brad Vernon [email protected]

Tulsa.rb Group

Oct. 1, 2007


• 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?

April 11, 2023 2


• 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?

April 11, 2023 3


What does it look like?

April 11, 2023 4


What does it look like?

April 11, 2023 5


• 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?

April 11, 2023 6


• 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?

April 11, 2023 7


What are the tests?

April 11, 2023 8


• 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

April 11, 2023 9


• 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


April 11, 2023 10


• Gzip your JavaScript, CSS, and HTML using mod_gzip or mod_deflate in Apache

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css


April 11, 2023 11


• Use an expires tag in Apache

ExpiresDefault "access plus 10 years“

ExpiresByType image/gif "modification plus 5 hours 3 minutes"


April 11, 2023 12


• 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


April 11, 2023 13


• 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/


April 11, 2023 14

http://compressorrater.thruhere.net/


• 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


April 11, 2023 15

Questions?

[email protected]


Technology

Using Firebug & YSlow