Speed is Essential for a Great Web Experience (Digicure - Copenhagen)

Speed is Essential for a
Great Web Experience

@andydavies

Digicure
Oct 2012
http://www.ﬂickr.com/photos/ahockley/3576838608
Wednesday, 24 October 2012

Performance isn’t always a priority

http://www.ﬂickr.com/photos/randomidea/247994072

“Has it loaded yet?”

http://www.ﬂickr.com/photos/kindoﬁndie/4099768084

Our perception of response time

Instant

Seamless Yawn!

100ms 1s 10s

3s - Recommended 6.5s - Alexa 2000
Load Time Fall 2012

Response Time in Man-computer Conversational Transactions
Robert B. Miller, 1968

“50% more concentration when using
badly performing web sites”
Foviance
http://www.ﬂickr.com/photos/yourdon/3366991042

Effect of delay on abandonment rate...

Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez

Bing did some experiments

+1s
$/
- 2.8%
+


Wallmart made some improvements

-1s +2%


Shopzilla cut page load time by 5 seconds!

+12% +25% -50%

$$$

http://velocityconf.com/velocity2009/public/schedule/detail/7709

Measuring page load time...

http://www.ﬂickr.com/photos/wwarby/7109538317

Synthetic Monitoring

4

3
Response Time (s)

2

1

0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 16 27 28 29 30
September 2012

But these are not our visitors…

http://www.ﬂickr.com/photos/br1dotcom/4297736794

These are our visitors

http://www.ﬂickr.com/photos/yourdon/2681687374

Measure Real Users’ Experience

27%
Visitors (%)

13%

8% 8%
6% 6%

3% 3%
2%
1%

1 2 3 4 5 6 7 8 9 10
Load Time (s)

Measure Real Users’ Experience

27%

24%
Visitors (%)

13%

8% 8%
6% 6%

3% 3%
2%
1%

1 2 3 4 5 6 7 8 9 10 > 10
Load Time (s)

Measuring Real Users - Google Analytics

Relies on Navigation Timing API, can add extra timing calls to page

Looking Deeper

http://www.ﬂickr.com/photos/ohhector/3149051855

webpagetest.org


Waterfall for bbc.co.uk/news


mobitest.akamai.com


Bigger, Faster Servers?

http://www.ﬂickr.com/photos/getbutterﬂy/6317955134

80% plus of page load time is on front-end

Backend
news.bbc.co.uk
Frontend
ebay.co.uk

debenhams.co.uk

direct.gov.uk

amazon.co.uk

mumsnet.com

guardian.co.uk

0 1.25 2.5 3.75 5

Measured on residential ADSL line using Chrome 19

Fix slow server responses ﬁrst

4 seconds!


Bandwidth (often) isn’t the bottleneck

2.0

1.5

1.0

0.5

0s 5s 10s

news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps
(bursts over 1.5Mbps are artefact of testing)

“More Bandwidth Doesn’t Matter (much)”
Mike Belshe

3.11s
Page Load Time

1.95s
1.63s
1.50s 1.44s 1.41s 1.39s 1.38s 1.37s 1.36s

1 2 3 4 5 6 7 8 9 10
Bandwidth (Mbps)


Impact of Latency

4

3
Page Load Time (s)

2

1

0 20 40 60 80 100 120 140 160 180 200 220 240
Round Trip Time (ms)

Minimum round trips to download a ﬁle

(TCP Segments)
285kB

214kB

143kB

71kB

Size
1 2 3 4 5 6 7 8 9 10 11

Round Trips TCP and the Lower Bound of Web Performance
John Rauser

Going Faster…

http://www.ﬂickr.com/photos/mikebaird/2464769129/

Put your pages on a diet
http://www.ﬂickr.com/photos/europedistrict/4537909259

Cut down number of HTTP requests


Move the content closer

http://www.ﬂickr.com/photos/jamesjordan/2198988999

Organise content so it’s easy to load

http://www.ﬂickr.com/photos/jemsweb/4363548805

What’s the web made of?

Images
Scripts
Stylesheets
HTML
Flash
Other

Composition of ‘average’ web page via httparchive.org

Images are 64% of an ‘average’ web page

http://www.ﬂickr.com/photos/zaprittsky/4520788183/

Bitmapped Images

JPEG PNG GIF

Optimise, Optimise, Optimise!
(jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)


New Devices, New Challenges...

2 x Resolution = 4 x Pixels!

http://www.ﬂickr.com/photos/roopaw/6985954465

Some Alternatives

CSS SVG Fonts

Watch SVG sizes not always smaller than bitmap!

Don’t block the browser...

http://www.ﬂickr.com/photos/barteko/6128499314

news.bbcimg.co.uk
static.bbc.co.uk

Browsers can download resources in parallel


But Sometimes... The Waterfall of Doom!

2 seconds! (nearly)


The Script Tag

<script src=″…″></script>

Until the script has executed, the rendering of
all elements below is blocked!


“Virgin Media Broadband ISP Users
Affected by Website Routing Woes”
ISP Review, May 26, 2012

Customer jcmm33 said:
“Same issue here as well, been like this all day. Sites like
autotrader.co.uk don’t appear to be accessible, others like
the telegraph.co.uk are waiting on other components to
download (content from sites like cg-global.maxymiser.com,
pixel.quantserve.com).”

http://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.html

Impact on The Telegraph…

Same issue affected many other sites http://bit.ly/Ncy7Rd

Load Third Party scripts asynchronously

<script type="text/javascript">
function() {
var js = document.createElement('script');
js.async = true;
js.src = 'myscript.js';
var e = document.getElementsByTagName('script')[0];
e.parentNode.insertBefore(js, first);
})();
</script>

async attribute may be option but not supported by IE & Opera

The Challenge of Mobile

http://www.ﬂickr.com/photos/cubicgarden/3281555681

Argh... My brain hurts!

http://www.ﬂickr.com/photos/corneveaux/3248566797

Don’t have to do it all by hand

http://www.ﬂickr.com/photos/simeon_barkas/2557059247

Performance isn’t just for Christmas

Measure

Optimise Analyse


Measure Impact on Business Goals

http://www.ﬂickr.com/photos/safari_vacation/5961260280

http://www.ﬂickr.com/photos/jurvetson/6212582593

@andydavies
andy@asteno.com
http://www.slideshare.net/andydavies

http://www.ﬂickr.com/photos/auntiep/5024494612

Credits

All photographs copyright original owners on ﬂickr.com

Following pictograms courtesy of The Noun Project


Speed is Essential for a Great Web Experience (Digicure - Copenhagen)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Speed is Essential for a Great Web Experience (Digicure - Copenhagen)

Similar to Speed is Essential for a Great Web Experience (Digicure - Copenhagen) (19)

More from Andy Davies

More from Andy Davies (19)

Recently uploaded

Recently uploaded (20)

Speed is Essential for a Great Web Experience (Digicure - Copenhagen)