Post on 08-May-2015
description
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?
April 11, 2023 2
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?
April 11, 2023 3
Using Firebug & YSlow to Optimize Your Online App
What does it look like?
April 11, 2023 4
Using Firebug & YSlow to Optimize Your Online App
What does it look like?
April 11, 2023 5
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?
April 11, 2023 6
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?
April 11, 2023 7
Using Firebug & YSlow to Optimize Your Online App
What are the tests?
April 11, 2023 8
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
April 11, 2023 9
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
April 11, 2023 10
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
April 11, 2023 11
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
April 11, 2023 12
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
April 11, 2023 13
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
April 11, 2023 14
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
April 11, 2023 15
Questions?
bradv@shark-media.com
Using Firebug & YSlow to Optimize Your Online App