Using Firebug & YSlow
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Using Firebug & YSlow

on

  • 7,658 views

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

Statistics

Views

Total Views
7,658
Views on SlideShare
7,645
Embed Views
13

Actions

Likes
1
Downloads
133
Comments
0

3 Embeds 13

http://www.slideshare.net 11
http://98.195.196.183 1
http://xhoberfilez.co.cc 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Using Firebug & YSlow Presentation 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