Your SlideShare is downloading. ×
0
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Using Firebug & YSlow
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Using Firebug & YSlow

4,847

Published on

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

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
4,847
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
141
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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] Using Firebug & YSlow to Optimize Your Online App

×