Using Firebug & YSlow

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    1 Favorite

    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

    sharkmediasharkmedia, 2 years ago

    custom

    2012 views, 1 favs, 1 embeds more stats

    Short intro to Firebug and YSlow presented at Tulsa more

    More Info

    © All Rights Reserved

    Go to text version
    • Total Views 2012
      • 2011 on SlideShare
      • 1 from embeds
    • Comments 0
    • Favorites 1
    • Downloads 57
    Most viewed embeds
    • 1 views on http://98.195.196.183

    more

    All embeds
    • 1 views on http://98.195.196.183

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as innappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel

    Categories