Websites on overdrive

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

http://www.webdu.com.au/



LatencyTools

$ finger philip

Philip [email protected]

@bluesmoonyahoogeekhttp://bluesmoon.info/


http://twitter.com/bluesmoon

http://bluesmoon.info/



LatencyTools

Seeing is believingThe cost of performanceWhere should we concentrate?

Magic, Illusion and other Performances




LatencyTools


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?




LatencyTools


User perception






LatencyTools


User perception






LatencyTools


Blink

How many blinks between click andonload?

The average human eye takes300-400ms to blinkWeb search results (Google & Yahoo!)load in about 3 blinks




LatencyTools


Blink






LatencyTools


Blink






LatencyTools


Games

Double-buffering and the VBLANK




LatencyTools


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


http://www.slideshare.net/stoyan/the-business-of-performance



LatencyTools


... and conversely

Shopzilla – 6s→ 1.2s resulted in 7-12% increase inconversion rateNetflix – 43% decrease in bandwidth bill after enablingcompressionWhat about You?






LatencyTools


... and conversely

Shopzilla – 6s→ 1.2s resulted in 7-12% increase inconversion rateNetflix – 43% decrease in bandwidth bill after enablingcompressionWhat about You?






LatencyTools


The wheels behind the screen

Performance improvement boils down to two thingsBandwidthLatency

Do you need to take the bus or a motorcycle?




LatencyTools








LatencyTools








LatencyTools








LatencyTools


Not just the network

Not just the network, but also within the browser process




LatencyTools

The easier of the twoState of the internetHow do we fix it?

Bandwidth




LatencyTools


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


http://www.inf.fu-berlin.de/lehre/WS01/19548-U/shannon.html



LatencyTools









LatencyTools









LatencyTools









LatencyTools


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




LatencyTools


Bandwidth can be bought

Bandwidth has increased steadily over timeNetworks, hard drives, memory, CPU, system bus,everything.Bandwidth can be parallelised




LatencyTools


Bandwidth sells

Marketing loves a fat pipe




LatencyTools


How fast is the internet?

YUI Blog measured bandwidth at 1Mbps and latency of 262ms

Ref: Analysing Bandwidth & Latency – YUI Blog


http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/



LatencyTools


How fast is the internet?

Akamai measured average global bandwidth at 1.7Mbps

Ref: State of the Internet – Akamai


http://www.akamai.com/stateoftheinternet/



LatencyTools


ISPs




LatencyTools


Australian ISPs

Keep in mind that the Internet latency from Australia to the US is about 280ms




LatencyTools


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




LatencyTools


Measure your user’s bandwidth

Javascript code to measure your user’s bandwidth & latencybw-test v1.3


http://bluesmoon.info/perf-tests/bw/bw-test-1.3.zip



LatencyTools


Make more efficient use of bandwidth

gzip all text over the networkminify your HTML, Javascript and CSSsmush your images


http://articles.sitepoint.com/article/web-output-mod_gzip-apache

http://developer.yahoo.com/yui/compressor/

http://www.smushit.com/



LatencyTools


Caveat about gzipping

15% of users still get uncompressed responses

Ref: Beyond Gzipping – Tony Gentilcore, Google


http://en.oreilly.com/velocity2009/public/schedule/detail/9072



LatencyTools


In the DOM

Use fewer elements and assetsUse more specific elements




LatencyTools

What’s the problem?State of the internetHow do we fix it?

Latency




LatencyTools


How fast can you drive?

Latency deals with how long it takes to get a response aftermaking a request




LatencyTools


Speed Limits

3× 108 m/s – in vacuum2× 108 m/s – in fibre=⇒ 21ms × 2(roundtrip from Boston to SanFrancisco)




LatencyTools


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


http://www.stuartcheshire.org/rants/Latency.html



LatencyTools


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


http://www.stuartcheshire.org/rants/Latency.html



LatencyTools


Latency isn’t sexy

When was the last time you saw a TV commercial mentionlatency?




LatencyTools


ISPs




LatencyTools


Australian ISPs

Keep in mind that the Internet latency from Australia to the US is about 280ms




LatencyTools


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




LatencyTools


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


http://search.yahoo.com/



LatencyTools


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




LatencyTools


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




LatencyTools


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




LatencyTools


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


http://www.phpied.com/preload-cssjavascript-without-execution/



LatencyTools


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




LatencyTools

Tools




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


http://developer.yahoo.com/yslow/

http://code.google.com/speed/page-speed/

http://www.webpagetest.org/

http://www.showslow.org/

http://www.fiddler2.com/fiddler2/



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


http://developer.yahoo.com/performance

http://code.google.com/speed/page-speed/docs/rules_intro.html

http://stevesouders.com/blog/

http://phpied.com/



LatencyTools

Contact Me

Philip [email protected]

@bluesmoonyahoogeekhttp://bluesmoon.info/slideshare.net/bluesmoon


http://twitter.com/bluesmoon

http://bluesmoon.info/

http://www.slideshare.net/bluesmoon



LatencyTools

Thank you




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/


http://www.flickr.com/photos/ktylerconk/3154161850/

http://www.flickr.com/photos/lwr/3631563009/

http://www.flickr.com/photos/siennaisalive/4436708323/

http://www.flickr.com/photos/jeremybrooks/4104176629/

http://www.flickr.com/photos/aquilaonline/2055376852/

http://www.flickr.com/photos/gi/117771718/

http://www.flickr.com/photos/vlastula/300102949/

http://www.flickr.com/photos/electrichamster/3160580687/

http://www.flickr.com/photos/docman/36125185/

http://www.flickr.com/photos/thomashawk/3162497239/


Date post:	18-May-2015
Category:	Technology
Upload:	philip-tellis
View:	909 times
Download:	3 times

Websites on overdrive

Technology