[Python-il] [pyweb-il:277] Re: Client-side performance load-graph screenshots

Ori Peleg oripel at gmail.com
Thu Jun 18 02:19:18 IDT 2009

Hi everyone,

Here's a summary of what I planned to go over in the talk today - I managed
to cover only a fraction.

   - Reference + further study:
      - Read Steve Souders's books:
   - High Performance Web
         - Even Faster Web
      - Watch Steve's talks online:
   - High Performance Web
Sites<http://video.yahoo.com/watch/1040890/3880720> at
         - Even Faster Web
Sites<http://www.youtube.com/watch?v=aJGC0JSlpPE>at Google I/O 2009
      - Read more excellent, and short, advice:
         - Yahoo's Best Practices for Speeding Up Your Web
         - Google's Web Performance Best
      - If you're hooked:
         - Steve's blog <http://www.stevesouders.com/blog/>, with cool links
         - Hammerhead <http://stevesouders.com/hammerhead/>, Steve's firebug
         plugin to time your page loads many times, with both an empty
and a primed
         cache. Firefox only.
         - The YUI Blog's performance
         - Steve's UA Profiler <http://stevesouders.com/ua/> - differences
         in performance characteristics between browsers
            - Issues like those we discussed, not JS benchmarking
         - Tools:
      - Install & use plugins for Firebug to analyze your site
   - YSlow <http://developer.yahoo.com/yslow/> from Yahoo! (very solid)
         - Page Speed <http://code.google.com/speed/page-speed/> from Google
         (new, cool, and a little flaky)
      - Use an HTTP debugging proxy:
         - Fiddler <http://www.fiddler2.com/fiddler2/>, free, Windows only
         - Charles <http://www.charlesproxy.com/>, $50, Windows+Linux+OS/X,
         my favorite (does bandwith and latency throttling)
         - Firebug's "Net" panel (very convenient but Firefox only)
         - Chrome's "Resources" view (Ctrl-Shift-J, choose "Resources",
         Chrome only)
         - Google Page Speed's "Activity"
detailed, Firefox only, currently unstable)
         - Reply to this message if you know of more good tools (that you've
         actually used)
      - Practices:
      - Measure measure measure:
   - Check your site's actual performance
      - Check with the browsers your users are using
         - Simulate connection parameters similar to your users' (e.g.
         bandwith, latency)
         - Try to measure your user's actual times
      - We use a modified version of
            easy to write your own
         - Minimize HTTP requests
         - Combine JS, CSS. Implementation suggestions:
            - part of the build script
            - script/manual process done offline
            - online, like the minify <http://code.google.com/p/minify/> PHP
               - Maybe
implement this?
            - Combine images
            - The technique is called CSS
            - Good online
service<http://spritegen.website-performance.org/>for generating CSS
sprites, code is open
            source <https://launchpad.net/css-sprite-generator>
         - Check for duplicates (they happen)
         - Load non-critical content (e.g. analytics) after page load with
      - Enable caching
         - Set "Expires" or "max-age" HTTP header
            - With Apache:
            ExpiresDefault "access plus 1 year"
         - Prefer far-future expiration where possible
         - Change resource URLs to avoid stale content
            - rename URLS + files in build script
            - rename URLS & use URL rewriting to point to originals
               - can rename in build script or on the fly
               - can use hash, timestamp, etc. (or even svn revision)
            - Avoid query parameter technique - some browsers and proxies
            refuse to cache it
         - Cache dynamic data & AJAX if possible
            - Need unique URLs (e.g. gmail's JSON mail content - see with
         - Reduce content sent
         - Enable GZIP for static + dynamic content
            - No scalability hit for static content, compressed responses
            are cached
            - Compressing dynamic content may burden your servers, but try
            it first
         - Minify JS + CSS
            - The YUI
Compressor<http://developer.yahoo.com/yui/compressor/> gives
            the best reductions
            - PHP's minify <http://code.google.com/p/minify/> and probably
            this on the fly
         - Optimize images
            - Serious savings (occasionally %60 or more)
         - Convert to PNG (yes, even 8-bit gifs) and use
PNGOUT<http://advsys.net/ken/util/pngout.htm>(Windows, best
            OptiPNG <http://optipng.sourceforge.net/> (all platforms)
            - Smushit (included in YSlow) - will offer you links for
            optimized images after you analyze your site
         - Put CSS stylesheets at the top
         - This is about the user experience - allowing the page to be
         usable as early as possible
      - In Firefox, if a stylesheet placed lower in the page changes the
         appearance of the page, users will see a "flash of unstyled
content" (FOUC)
         - In IE, if a stylesheet is placed lower in the page the browser
         will try to avoid the FOUC by not rendering *anything* until the
         stylesheet finishes loading.
            - This causes the "blank white page" syndrome
         - Avoid CSS's @import, use <link rel=... /> instead
            - IE treats it the same as putting CSS at the bottom of the page
         - Put external JS at the bottom
         - JS downloads block parallel downloads (especially in older
         browsers, including Chrome 1.0, Firefox 3.0, IE < 8)
         - This isn't possible with JS that uses document.write
            - If it's your own JS, convert it to use DOM manipulation
            - If it's a vendor's JS, try contacting them and asking about
            alternatives, or faking it yourself (by observing their code)
         - Tips for static resources:
         - Use proper combining, caching, gzip'ing, and minifying as stated
         - Prefetch / preload resources
            - Perfect if you have well-established entry points (e.g. a
            login page everyone has to go through)
            - Low-hanging fruit, minutes to implement and no effect on user
            experience (if done after page load)
            - How to preload with
            for example
         - Use a CDN
            - Better performance across the board for static resources, sort
            of equivalent to buying a faster server for your app
               - It's what saved ynet in the analysis, otherwise it would
               have been a gazillion seconds, not 12 seconds
            - Free CDNs with popular JS / CSS frameworks (e.g.
            Yahoo's <http://developer.yahoo.com/yui/articles/hosting/>)
            - Regular CDNs (if you can afford them)
            - CDNs that are appropriate for smaller budgets, e.g. Amazon's
            CloudFront <http://aws.amazon.com/cloudfront/>
         - Avoid sending unnecessary cookies
            - Everytime an HTTP request is made to mydomain.com, all cookies
            are sent with it
            - This is irrelevant for static resources
            - Solution: host them on a separate domain with no cookies
               - e.g., YouTube uses ytimg.com
            - Increase parallel downloads (more
            - Host resources on different hostnames - the browser will open
            up to X connections per hostname
               - e.g., YouTube uses i1.ytimg.com - i4.ytimg.com
            - Balance needed: the more hostnames, the more DNS lookups
            (round-trips to the DNS servers)
            - 2 - 4 hostnames were found good during tests, more hostnames
            slowed the pages
            - keep filename -> hostname mapping stable, to allow caching
         - Start resource downloads earlier
            - Flush response before it's complete, the browser can start
            downloading resources mentioned so far
            - This
how to do this with Django

That's it for now, maybe I'll post this in the blog as well.


On Wed, Jun 17, 2009 at 5:02 PM, Ori Peleg <oripel at gmail.com> wrote:

> 2 load graphs, one for http://yahoo.com and one for http://ynet.co.il
> In case you want a softcopy during the talk
> --
> Check out my blog: http://orip.org

Check out my blog: http://orip.org

You received this message because you are subscribed to the Google Groups "PyWeb-IL" group.
To post to this group, send email to pyweb-il at googlegroups.com
To unsubscribe from this group, send email to pyweb-il+unsubscribe at googlegroups.com
For more options, visit this group at http://groups.google.com/group/pyweb-il?hl=en

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://hamakor.org.il/pipermail/python-il/attachments/20090618/4b834675/attachment-0001.htm 

More information about the Python-il mailing list