Using Firebug & YSlow  to Optimize Your Online App Presented by Brad Vernon  bradv@shark-media.com Tulsa.rb Group  Oct. 1,...
Using Firebug & YSlow  to Optimize Your Online App <ul><li>Literal definition:  </li></ul><ul><ul><li>Arsonist: a criminal...
Using Firebug & YSlow  to Optimize Your Online App <ul><li>Shows all Ajax based GET/POST requests </li></ul><ul><li>Log yo...
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 <ul><li>Developed by Yahoo Engineers </li></ul><ul><li>Analyzes web pag...
Using Firebug & YSlow  to Optimize Your Online App <ul><li>Fastest way to find slow downs in your website </li></ul><ul><l...
Using Firebug & YSlow  to Optimize Your Online App What are the tests? May 27, 2009
Using Firebug & YSlow  to Optimize Your Online App <ul><li>Use CSS Sprites to reduce images </li></ul><ul><ul><li>#panel1b...
Using Firebug & YSlow  to Optimize Your Online App <ul><li>Use multiple (2-4) sub-domains to mimic a Content Delivery Netw...
Using Firebug & YSlow  to Optimize Your Online App <ul><li>Gzip your JavaScript, CSS, and HTML using mod_gzip or mod_defla...
Using Firebug & YSlow  to Optimize Your Online App <ul><li>Use an expires tag in Apache ExpiresDefault &quot;access plus 1...
Using Firebug & YSlow  to Optimize Your Online App <ul><li>Put CSS in the <head> and JavaScript at the bottom of the page ...
Using Firebug & YSlow  to Optimize Your Online App <ul><li>Minify your JavaScript using one of these: </li></ul><ul><ul><l...
Using Firebug & YSlow  to Optimize Your Online App <ul><li>Use ETags </li></ul><ul><ul><li>Unique identifier of content an...
Questions? [email_address] Using Firebug & YSlow  to Optimize Your Online App
Upcoming SlideShare
Loading in …5
×

Using Firebug & YSlow

5,243 views

Published on

Short intro to Firebug and YSlow presented at Tulsa.rb Group Oct. 1, 2007 by Brad Vernon

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,243
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
142
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Using Firebug & YSlow

  1. 1. Using Firebug & YSlow to Optimize Your Online App Presented by Brad Vernon bradv@shark-media.com Tulsa.rb Group Oct. 1, 2007
  2. 2. Using Firebug & YSlow to Optimize Your Online App <ul><li>Literal definition: </li></ul><ul><ul><li>Arsonist: a criminal who illegally sets fire to property </li></ul></ul><ul><li>What we care about: </li></ul><ul><ul><li>An extension to Firefox or IE JavaScript Library </li></ul></ul><ul><ul><li>Created by Joe Hewitt (now in state of flux) </li></ul></ul><ul><ul><li>Helps with the debugging of JavaScript and Ajax. </li></ul></ul><ul><ul><li>Includes a DOM inspector, JavaScript console, command-line JavaScript interpreter, JavaScript profiler, and CSS/HTML editor </li></ul></ul>What is Firebug? May 27, 2009
  3. 3. Using Firebug & YSlow to Optimize Your Online App <ul><li>Shows all Ajax based GET/POST requests </li></ul><ul><li>Log your own info using </li></ul><ul><ul><li>console.log(), console.info(), console.debug(), console.warn(), and console.error() </li></ul></ul><ul><ul><li>Can be DOM element, object, or string </li></ul></ul><ul><li>Easy way to edit CSS/HTML on the fly </li></ul><ul><li>Measure your script performance </li></ul><ul><li>Find what and where JavaScript errors occur </li></ul>Why should you use it? May 27, 2009
  4. 4. Using Firebug & YSlow to Optimize Your Online App What does it look like? May 27, 2009
  5. 5. Using Firebug & YSlow to Optimize Your Online App What does it look like? May 27, 2009
  6. 6. Using Firebug & YSlow to Optimize Your Online App <ul><li>Developed by Yahoo Engineers </li></ul><ul><li>Analyzes web pages & tells why they may be slow </li></ul><ul><li>Based on the rules for high performance web sites </li></ul><ul><li>Firefox only add-on integrated with the popular Firebug web development tool </li></ul><ul><li>Report gives you: </li></ul><ul><ul><li>Performance report card </li></ul></ul><ul><ul><li>HTTP/HTML summary </li></ul></ul><ul><ul><li>List of components in the page </li></ul></ul><ul><ul><li>Tools including JSLint (JavaScript verifier) </li></ul></ul>What is YSlow? May 27, 2009
  7. 7. Using Firebug & YSlow to Optimize Your Online App <ul><li>Fastest way to find slow downs in your website </li></ul><ul><li>Grading makes it simple </li></ul><ul><li>Links directly to information that can help get better grade on test </li></ul><ul><li>Adds to the powerful Firebug </li></ul>Why should you use it? May 27, 2009
  8. 8. Using Firebug & YSlow to Optimize Your Online App What are the tests? May 27, 2009
  9. 9. Using Firebug & YSlow to Optimize Your Online App <ul><li>Use CSS Sprites to reduce images </li></ul><ul><ul><li>#panel1b a:hover { </li></ul></ul><ul><ul><li>background: transparent url(test-3.jpg) 0 -200px no-repeat; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>#panel2b a:hover { </li></ul></ul><ul><ul><li>background: transparent url(test-3.jpg) -96px -200px no-repeat; </li></ul></ul><ul><ul><li>} </li></ul></ul>Quick tips based on YSlow May 27, 2009
  10. 10. Using Firebug & YSlow to Optimize Your Online App <ul><li>Use multiple (2-4) sub-domains to mimic a Content Delivery Network (CDN) </li></ul><ul><li>Limit to number of items per domain at a time </li></ul><ul><ul><li>Firefox = 4 items </li></ul></ul><ul><ul><li>IE = 2 items </li></ul></ul><ul><ul><li>Safari = 4 items (not verified) </li></ul></ul><ul><li>Examples: js.domain.com, images.domain.com </li></ul>Quick tips based on YSlow May 27, 2009
  11. 11. Using Firebug & YSlow to Optimize Your Online App <ul><li>Gzip your JavaScript, CSS, and HTML using mod_gzip or mod_deflate in Apache AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css </li></ul>Quick tips based on YSlow May 27, 2009
  12. 12. Using Firebug & YSlow to Optimize Your Online App <ul><li>Use an expires tag in Apache ExpiresDefault &quot;access plus 10 years“ ExpiresByType image/gif &quot;modification plus 5 hours 3 minutes&quot; </li></ul>Quick tips based on YSlow May 27, 2009
  13. 13. Using Firebug & YSlow to Optimize Your Online App <ul><li>Put CSS in the <head> and JavaScript at the bottom of the page </li></ul><ul><li>Most JavaScript runs on document.ready() </li></ul><ul><li>Show visual before function – makes it look like it’s loading faster </li></ul>Quick tips based on YSlow May 27, 2009
  14. 14. Using Firebug & YSlow to Optimize Your Online App <ul><li>Minify your JavaScript using one of these: </li></ul><ul><ul><li>JSMin (my choice) </li></ul></ul><ul><ul><li>Dojo Shrinksafe </li></ul></ul><ul><ul><li>Dean Edwards Packer (Obscures code) </li></ul></ul><ul><ul><li>YUI Compressor (New Kid on the Block) </li></ul></ul><ul><ul><li>Find which is best at: http://compressorrater.thruhere.net/ </li></ul></ul>Quick tips based on YSlow May 27, 2009
  15. 15. Using Firebug & YSlow to Optimize Your Online App <ul><li>Use ETags </li></ul><ul><ul><li>Unique identifier of content and cache </li></ul></ul><ul><ul><ul><li>10c24bc-4ab-457e1c1f </li></ul></ul></ul><ul><ul><li>Doesn’t work when spanning servers, but consistent domains (images.domain.com) will work </li></ul></ul>Quick tips based on YSlow May 27, 2009
  16. 16. Questions? [email_address] Using Firebug & YSlow to Optimize Your Online App

×