Downloaded 147 times
![Questions? [email_address] Using Firebug & YSlow to Optimize Your Online App](https://image.slidesharecdn.com/using-firebug-yslow836/75/Using-Firebug-YSlow-16-2048.jpg)
Uploaded byBrad Vernon
Using Firebug & YSlow
Firebug is a Firefox extension that helps with debugging JavaScript and Ajax applications. It allows inspection of DOM elements, JavaScript debugging, monitoring of network activity, and editing of HTML and CSS. YSlow is a Firefox add-on that grades the performance of web pages and identifies ways to optimize pages to load faster, such as using CSS sprites, gzip compression, browser caching, minimizing HTTP requests. The presentation demonstrated how to use Firebug and YSlow to debug scripts, monitor network activity, and find ways to improve page performance.
Using Firebug & YSlow
- 1. Using Firebug &YSlow to Optimize Your Online App Presented by Brad Vernon bradv@shark-media.com Tulsa.rb Group Oct. 1, 2007
- 2. 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
- 3. 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
- 4. Using Firebug &YSlow to Optimize Your Online App What does it look like? May 27, 2009
- 5. Using Firebug &YSlow to Optimize Your Online App What does it look like? May 27, 2009
- 6. 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
- 7. 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
- 8. Using Firebug &YSlow to Optimize Your Online App What are the tests? May 27, 2009
- 9. 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
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 14. 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
- 15. 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
- 16. Questions? [email_address] UsingFirebug & YSlow to Optimize Your Online App