websites on overdrive
DESCRIPTION
Bandwidth and Latency, the two faces of web performance.TRANSCRIPT
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Websites on Overdrive
Philip Tellis / [email protected]
WebDU 2010 / 6-7 May 2010
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
$ finger philip
Philip [email protected]
@bluesmoonyahoogeekhttp://bluesmoon.info/
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
Magic, Illusion and other Performances
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
User perception
How fast does the user think it takesyour page to load?
Do you want a really fast page thatappears to be slow?or do you want a slow page thatappears to be fast?
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
User perception
How fast does the user think it takesyour page to load?
Do you want a really fast page thatappears to be slow?or do you want a slow page thatappears to be fast?
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
User perception
How fast does the user think it takesyour page to load?
Do you want a really fast page thatappears to be slow?or do you want a slow page thatappears to be fast?
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
Blink
How many blinks between click andonload?
The average human eye takes300-400ms to blinkWeb search results (Google & Yahoo!)load in about 3 blinks
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
Blink
How many blinks between click andonload?
The average human eye takes300-400ms to blinkWeb search results (Google & Yahoo!)load in about 3 blinks
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
Blink
How many blinks between click andonload?
The average human eye takes300-400ms to blinkWeb search results (Google & Yahoo!)load in about 3 blinks
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
Games
Double-buffering and the VBLANK
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
How expensive is that blink?
Yahoo! – 400ms slower→ 5-9% drop in full page loadsGoogle – 400ms slower→ search engagement reducesover timeBing – 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 PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
... and conversely
Shopzilla – 6s→ 1.2s resulted in 7-12% increase inconversion rateNetflix – 43% decrease in bandwidth bill after enablingcompressionWhat about You?
Ref: The business of performance – Stoyan Stefanov
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
... and conversely
Shopzilla – 6s→ 1.2s resulted in 7-12% increase inconversion rateNetflix – 43% decrease in bandwidth bill after enablingcompressionWhat about You?
Ref: The business of performance – Stoyan Stefanov
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
The wheels behind the screen
Performance improvement boils down to two thingsBandwidthLatency
Do you need to take the bus or a motorcycle?
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
The wheels behind the screen
Performance improvement boils down to two thingsBandwidthLatency
Do you need to take the bus or a motorcycle?
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
The wheels behind the screen
Performance improvement boils down to two thingsBandwidthLatency
Do you need to take the bus or a motorcycle?
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
The wheels behind the screen
Performance improvement boils down to two thingsBandwidthLatency
Do you need to take the bus or a motorcycle?
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Seeing is believingThe cost of performanceWhere should we concentrate?
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 PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
Bandwidth
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
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’sbackup tapes?
Ref: Shannon’s Theorem
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
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’sbackup tapes?
Ref: Shannon’s Theorem
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
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’sbackup tapes?
Ref: Shannon’s Theorem
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
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’sbackup tapes?
Ref: Shannon’s Theorem
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
Shannon’s Theorem
C = B × log2(1 +SN
)
C – Channel capacity in bpsB – Bandwidth in HzS – Signal strengthN – Noise strength – S/N measured in dB
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
Bandwidth can be bought
Bandwidth has increased steadily over timeNetworks, hard drives, memory, CPU, system bus,everything.Bandwidth can be parallelised
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
Bandwidth sells
Marketing loves a fat pipe
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
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 PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
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 PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
ISPs
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
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 PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
Pay for infrastructure
South Korea invested in high bandwidth internetGoogle is investing in WiFi and Fibre in the USAkamai puts CDNs on high speed networks near the user
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
Measure your user’s bandwidth
Javascript code to measure your user’s bandwidth & latencybw-test v1.3
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
Make more efficient use of bandwidth
gzip all text over the networkminify your HTML, Javascript and CSSsmush your images
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
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 PeformancesBandwidth
LatencyTools
The easier of the twoState of the internetHow do we fix it?
In the DOM
Use fewer elements and assetsUse more specific elements
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
Latency
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
How fast can you drive?
Latency deals with how long it takes to get a response aftermaking a request
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
Speed Limits
3× 108 m/s – in vacuum2× 108 m/s – in fibre=⇒ 21ms × 2(roundtrip from Boston to SanFrancisco)
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
42
It should take a packet around 42ms to go from Boston toSF and backIt actually takes around 83ms for a packet to go fromBoston to SF and backThis 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 PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
42
It should take a packet around 42ms to go from Boston toSF and backIt actually takes around 83ms for a packet to go fromBoston to SF and backThis 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 PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
Latency isn’t sexy
When was the last time you saw a TV commercial mentionlatency?
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
ISPs
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
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 PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
Getting around latency
Don’t add latency – It’s bad enough without us adding to itCaching – Bring the data closer to where it’s neededParallelise – Reduce the number of serial roundtripsPredict – Get data before it’s needed
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
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 spritesIf you can, stuff everything into one callSee search.yahoo.com
Structure your page to avoid blockingDefer or post-load non-essential components
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
Don’t add latency – Be quick on the return
Keep MaxClients at a reasonable value (30’s a goodnumber)Flush your headers as soon as they’re doneFlush your page content oftenOffload static content to a separate server
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
Caching
Turn on browser based caching wherever possiblemax-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 PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
Parallelise where possible
Downloading scripts blocks page load, so do it in thebackground insteadBrowsers will download 4-8 resources from a host inparallel, take advantage of thatUse event delegation
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
Predict what’s next and fetch it
If you know what the user will do next, pre-fetch itYahoo! Search page pre-loads sprites and Javascript forthe results pageLog 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 PeformancesBandwidth
LatencyTools
What’s the problem?State of the internetHow do we fix it?
One more thing
Improving latency tends to improve bandwidthIncreasing bandwidth can potentially worsen latencyLarger 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 PeformancesBandwidth
LatencyTools
Tools
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Useful tools for performance analysis
YSlow – Firefox/Firebug plugin from Yahoo!PageSpeed – Firefox/Firebug plugin from GooglePageTest – Web page testing toolShowSlow – Automated YSlow runs against your URLFiddler – Web debugging Proxy
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Further reading
developer.yahoo.com/performance – Yahoo!code.google.com/speed/page-speed/docs/rules_intro.html– Googlestevesouders.com/blog/ – Steve Soudersphpied.com – Stoyan Stefanov
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Contact Me
Philip [email protected]
@bluesmoonyahoogeekhttp://bluesmoon.info/slideshare.net/bluesmoon
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
Thank you
WebDU 2010 / 6-7 May 2010 Websites on Overdrive
Magic, Illusion and other PeformancesBandwidth
LatencyTools
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