Bandwidth and Latency, the two faces of web performance.

1. 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

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

37. 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

38. 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

39. 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

40. 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

41. 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

42. 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

43. 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

44. 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

45. 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

46. 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

47. 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

48. 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

49. 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

50. 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

51. Magic, Illusion and other Peformances
Bandwidth
Latency
Tools
Tools
WebDU 2010 / 6-7 May 2010 Websites on Overdrive

52. 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

53. 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

54. 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

55. Magic, Illusion and other Peformances
Bandwidth
Latency
Tools
Thank you
WebDU 2010 / 6-7 May 2010 Websites on Overdrive

56. 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