• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Websites on overdrive
 

Websites on overdrive

on

  • 1,448 views

Bandwidth and Latency, the two faces of web performance.

Bandwidth and Latency, the two faces of web performance.

Statistics

Views

Total Views
1,448
Views on SlideShare
1,425
Embed Views
23

Actions

Likes
0
Downloads
8
Comments
0

3 Embeds 23

http://talks.bluesmoon.info 13
http://www.slideshare.net 9
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

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

    Websites on overdrive Websites on overdrive Presentation Transcript

    • Magic, Illusion and other Peformances Bandwidth Latency Tools Websites on Overdrive Philip Tellis / philip@bluesmoon.info WebDU 2010 / 6-7 May 2010 WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Bandwidth Latency Tools $ finger philip Philip Tellis philip@bluesmoon.info @bluesmoon yahoo geek http://bluesmoon.info/ WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools Magic, Illusion and other Performances WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools User perception How fast does the user think it takes your page to load? Do you want a really fast page that appears to be slow? or do you want a slow page that appears to be fast? WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools User perception How fast does the user think it takes your page to load? Do you want a really fast page that appears to be slow? or do you want a slow page that appears to be fast? WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools User perception How fast does the user think it takes your page to load? Do you want a really fast page that appears to be slow? or do you want a slow page that appears to be fast? WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools Blink How many blinks between click and onload? The average human eye takes 300-400ms to blink Web search results (Google & Yahoo!) load in about 3 blinks WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools Blink How many blinks between click and onload? The average human eye takes 300-400ms to blink Web search results (Google & Yahoo!) load in about 3 blinks WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools Blink How many blinks between click and onload? The average human eye takes 300-400ms to blink Web search results (Google & Yahoo!) load in about 3 blinks WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools Games Double-buffering and the VBLANK WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools How expensive is that blink? Yahoo! – 400ms slower → 5-9% drop in full page loads Google – 400ms slower → search engagement reduces over time Bing – 1 sec slower → 2.8% revenue drop, 2 sec slower → 4.3% drop Ref: The business of performance – Stoyan Stefanov WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools ... and conversely Shopzilla – 6s → 1.2s resulted in 7-12% increase in conversion rate Netflix – 43% decrease in bandwidth bill after enabling compression What about You? Ref: The business of performance – Stoyan Stefanov WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools ... and conversely Shopzilla – 6s → 1.2s resulted in 7-12% increase in conversion rate Netflix – 43% decrease in bandwidth bill after enabling compression What about You? Ref: The business of performance – Stoyan Stefanov WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools The wheels behind the screen Performance improvement boils down to two things Bandwidth Latency Do you need to take the bus or a motorcycle? WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools The wheels behind the screen Performance improvement boils down to two things Bandwidth Latency Do you need to take the bus or a motorcycle? WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools The wheels behind the screen Performance improvement boils down to two things Bandwidth Latency Do you need to take the bus or a motorcycle? WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools The wheels behind the screen Performance improvement boils down to two things Bandwidth Latency Do you need to take the bus or a motorcycle? WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Seeing is believing Bandwidth The cost of performance Latency Where should we concentrate? Tools Not just the network Not just the network, but also within the browser process WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools Bandwidth WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools How fat is your pipe? How much data can you get across at once? Telephone system built for p-t-p voice? Optical fibre network? Geoff speeding down the M5 with 50TB of Daemon’s backup tapes? Ref: Shannon’s Theorem WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools How fat is your pipe? How much data can you get across at once? Telephone system built for p-t-p voice? Optical fibre network? Geoff speeding down the M5 with 50TB of Daemon’s backup tapes? Ref: Shannon’s Theorem WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools How fat is your pipe? How much data can you get across at once? Telephone system built for p-t-p voice? Optical fibre network? Geoff speeding down the M5 with 50TB of Daemon’s backup tapes? Ref: Shannon’s Theorem WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools How fat is your pipe? How much data can you get across at once? Telephone system built for p-t-p voice? Optical fibre network? Geoff speeding down the M5 with 50TB of Daemon’s backup tapes? Ref: Shannon’s Theorem WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools Shannon’s Theorem S C = B × log2 (1 + ) N C – Channel capacity in bps B – Bandwidth in Hz S – Signal strength N – Noise strength – S/N measured in dB WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools Bandwidth can be bought Bandwidth has increased steadily over time Networks, hard drives, memory, CPU, system bus, everything. Bandwidth can be parallelised WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools Bandwidth sells Marketing loves a fat pipe WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools How fast is the internet? YUI Blog measured bandwidth at 1Mbps and latency of 262ms Ref: Analysing Bandwidth & Latency – YUI Blog WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools How fast is the internet? Akamai measured average global bandwidth at 1.7Mbps Ref: State of the Internet – Akamai WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools ISPs WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools Australian ISPs Keep in mind that the Internet latency from Australia to the US is about 280ms WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools Pay for infrastructure South Korea invested in high bandwidth internet Google is investing in WiFi and Fibre in the US Akamai puts CDNs on high speed networks near the user WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools Measure your user’s bandwidth Javascript code to measure your user’s bandwidth & latency bw-test v1.3 WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools Make more efficient use of bandwidth gzip all text over the network minify your HTML, Javascript and CSS smush your images WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools Caveat about gzipping 15% of users still get uncompressed responses Ref: Beyond Gzipping – Tony Gentilcore, Google WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances The easier of the two Bandwidth State of the internet Latency How do we fix it? Tools In the DOM Use fewer elements and assets Use more specific elements WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools Latency WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools How fast can you drive? Latency deals with how long it takes to get a response after making a request WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools Speed Limits 3 × 108 m /s – in vacuum 2 × 108 m /s – in fibre =⇒ 21ms × 2 (roundtrip from Boston to San Francisco) WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools 42 It should take a packet around 42ms to go from Boston to SF and back It actually takes around 83ms for a packet to go from Boston to SF and back This hasn’t changed in 14 years Ref: It’s the latency, stupid – Stuart Cheshire WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools 42 It should take a packet around 42ms to go from Boston to SF and back It actually takes around 83ms for a packet to go from Boston to SF and back This hasn’t changed in 14 years Ref: It’s the latency, stupid – Stuart Cheshire WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools Latency isn’t sexy When was the last time you saw a TV commercial mention latency? WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools ISPs WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools Australian ISPs Keep in mind that the Internet latency from Australia to the US is about 280ms WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools Getting around latency Don’t add latency – It’s bad enough without us adding to it Caching – Bring the data closer to where it’s needed Parallelise – Reduce the number of serial roundtrips Predict – Get data before it’s needed WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools Don’t add latency – Reduce lookups & Connections Limit the number of DNS lookups. 2-4 is okay. Limit the number of HTTP connections Concatenate CSS into a single file. Concatenate JS into one or two files. Combine images into sprites If you can, stuff everything into one call See search.yahoo.com Structure your page to avoid blocking Defer or post-load non-essential components WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools Don’t add latency – Be quick on the return Keep MaxClients at a reasonable value (30’s a good number) Flush your headers as soon as they’re done Flush your page content often Offload static content to a separate server WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools Caching Turn on browser based caching wherever possible max-age, Expires & Cache-control Use a CDN, and make sure the CDN caches resources Use local copies of global references in Javascript Cache DOM nodes that you operate on a lot WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools Parallelise where possible Downloading scripts blocks page load, so do it in the background instead Browsers will download 4-8 resources from a host in parallel, take advantage of that Use event delegation WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools Predict what’s next and fetch it If you know what the user will do next, pre-fetch it Yahoo! Search page pre-loads sprites and Javascript for the results page Log analysis can tell you which pages are most popular, and pre-fetch those Build expected DOM nodes before they’re needed Ref: Preload CSS & JS without execution – Stoyan Stefanov WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances What’s the problem? Bandwidth State of the internet Latency How do we fix it? Tools One more thing Improving latency tends to improve bandwidth Increasing bandwidth can potentially worsen latency Larger packets take more time to assemble This is the difference between a 737 and a 747 WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Bandwidth Latency Tools Tools WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Bandwidth Latency Tools Useful tools for performance analysis YSlow – Firefox/Firebug plugin from Yahoo! PageSpeed – Firefox/Firebug plugin from Google PageTest – Web page testing tool ShowSlow – Automated YSlow runs against your URL Fiddler – Web debugging Proxy WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Bandwidth Latency Tools Further reading developer.yahoo.com/performance – Yahoo! code.google.com/speed/page-speed/docs/rules_intro.html – Google stevesouders.com/blog/ – Steve Souders phpied.com – Stoyan Stefanov WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Bandwidth Latency Tools Contact Me Philip Tellis philip@bluesmoon.info @bluesmoon yahoo geek http://bluesmoon.info/ slideshare.net/bluesmoon WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Bandwidth Latency Tools Thank you WebDU 2010 / 6-7 May 2010 Websites on Overdrive
    • Magic, Illusion and other Peformances Bandwidth Latency Tools Photo credits flickr.com/photos/ktylerconk/3154161850/ flickr.com/photos/lwr/3631563009/ flickr.com/photos/siennaisalive/4436708323/ flickr.com/photos/jeremybrooks/4104176629/ flickr.com/photos/aquilaonline/2055376852/ flickr.com/photos/gi/117771718/ flickr.com/photos/vlastula/300102949/ flickr.com/photos/electrichamster/3160580687/ flickr.com/photos/docman/36125185/ flickr.com/photos/thomashawk/3162497239/ WebDU 2010 / 6-7 May 2010 Websites on Overdrive