Speed is Essential for a Great Web Experience (Canvas Conf Version)

Speed is Essential for a
Great Web Experience

@andydavies

#CanvasConf
Sep 2012
http://www.ﬂickr.com/photos/barkaway/342359810

But sometimes other concerns take priority...

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

“Are we there yet?”

http://www.ﬂickr.com/photos/sharynmorrow/643126727

Our perception of response time

Instant

Seamless Yawn!

100ms 1s 10s

3s - Recommended 7s - Fortune 500
Load Time Average (2010)

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

Measure Real Users’ Experience

27%

24% of visitors 24%

waited over 10s
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

Measuring Real Users - LogNormal

Measuring Real Users - Torbit Insight

Measuring Real Users - New Relic

Bigger, Faster Servers?

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

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)

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/

Get the <head> straight

<!doctype html>
<html>
<head>
CSS before JS
<meta charset="utf-8"> Ideally one ﬁle*
<title>This is my title<title>

<link rel="stylesheet" href="styles.css" type="text/css" />

<script src="script.js"></script>

.
. Only JS needed
. during page load
</head>

* Bryan and Stephanie Rieger’s major and minor breakpoint approach requires multiple CSS ﬁles

Load remaining Javascript late as possible

.
.
.

<script src="restofscript.js"></script>

</body>
</html>
One ﬁle or many?
(Depends on size)

Could you defer some JS until after onload?

Squash text based content - gzip / minify

http://www.ﬂickr.com/photos/evdg/298415813

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 - may not always be smaller than bitmap!

Re-use TCP Connections via HTTP Keep-Alive

Orange segments
are TCP connections
being (re-) opened

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

Increase number of parallel downloads

Sometimes... The Waterfall of Doom!

2 seconds! (nearly)

Reduce number of HTTP requests

Cache resources that don’t change ‘often’ forever

(use versions to replace)
http://www.ﬂickr.com/photos/sterlingely/64228609

Redirects - necessary but waste time…

Why 2 redirects?

Expensive over mobile networks due to latency

The Perils of Third Party Javascript...

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

cg-global.maxymiser.com unreachable

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

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

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 (Canvas Conf Version)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Speed is Essential for a Great Web Experience (Canvas Conf Version)

Similar a Speed is Essential for a Great Web Experience (Canvas Conf Version) (20)

Más de Andy Davies

Más de Andy Davies (20)

Último

Último (20)

Speed is Essential for a Great Web Experience (Canvas Conf Version)