Speed is Essential for a Great Web Experience (Canvas Conf Version)
46
http://www.flickr.com/photos/barkaway/342359810 Speed is Essential for a Great Web Experience @andydavies #CanvasConf Sep 2012
-
Upload
andy-davies -
Category
Technology
-
view
45.681 -
download
1
description
Slides from my Web Performance talk at Canvas Conf, Birmingham - 7 Sep 2012
Transcript of Speed is Essential for a Great Web Experience (Canvas Conf Version)
http://www.flickr.com/photos/barkaway/342359810
Speed is Essential for a Great Web Experience
@andydavies
#CanvasConf Sep 2012
http://www.flickr.com/photos/randomidea/247994072
But sometimes other concerns take priority...
http://www.flickr.com/photos/sharynmorrow/643126727
“Are we there yet?”
100ms 1s 10s
Response Time in Man-computer Conversational TransactionsRobert B. Miller, 1968
Instant
Seamless Yawn!
Our perception of response time
3s - RecommendedLoad Time
7s - Fortune 500Average (2010)
“50% more concentration when using badly performing web sites”
Foviance
http://www.flickr.com/photos/yourdon/3366991042
Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
Effect of delay on abandonment rate...
Bing did some experiments
+1s - 2.8%
+1s$/
Wallmart made some improvements
-1s +2%
Shopzilla cut page load time by 5 seconds!
http://velocityconf.com/velocity2009/public/schedule/detail/7709
$$$
+12% +25% -50%
Measuring page load time...
1 2 3 4 5 6 7 8 9 10 > 10
24%
1%3%3%
2%
6%
8%
13%
27%
8%
6%
Vis
itors
(%
)
Load Time (s)
Measure Real Users’ Experience
24% of visitors waited over 10s
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
webpagetest.org
Waterfall for bbc.co.uk/news
Bigger, Faster Servers?
http://www.flickr.com/photos/br1dotcom/4297736794
80% plus of page load time is on front-end
Measured on residential ADSL line using Chrome 19
news.bbc.co.uk
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
BackendFrontend
Fix slow server responses first
4 seconds!
Bandwidth (often) isn’t the bottleneck
news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps(bursts over 1.5Mbps are artefact of testing)
10s0s 5s
0.5
1.0
1.5
2.0
TCP and the Lower Bound of Web PerformanceJohn Rauser
Minimum round trips to download a file
71kB
143kB
214kB
285kB
1 2 3 4 5 6 7 8 9 10 11
(TCP Segments)
Round Trips
Size
Going Faster…
http://www.flickr.com/photos/mikebaird/2464769129/
Get the <head> straight
<!doctype html><html><head> <meta charset="utf-8"> <title>This is my title<title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="script.js"></script>
. . .
</head>
CSS before JSIdeally one file*
Only JS needed during page load
* Bryan and Stephanie Rieger’s major and minor breakpoint approach requires multiple CSS files
. . .
<script src="restofscript.js"></script>
</body></html> One file or many?
(Depends on size)
Load remaining Javascript late as possible
Could you defer some JS until after onload?
Squash text based content - gzip / minify
http://www.flickr.com/photos/evdg/298415813
http://www.flickr.com/photos/zaprittsky/4520788183/
Images are 64% of an ‘average’ web page
JPEG PNG GIF
Bitmapped Images
Optimise, Optimise, Optimise! (jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)
New Devices, New Challenges...
2 x Resolution = 4 x Pixels!
http://www.flickr.com/photos/roopaw/6985954465
CSS SVG Fonts
Some Alternatives
Watch SVG - may not always be smaller than bitmap!
Re-use TCP Connections via HTTP Keep-Alive
Orange segmentsare TCP connections being (re-) opened
Increase number of parallel downloads
news.bbcimg.co.uk
static.bbc.co.uk
Sometimes... The Waterfall of Doom!
2 seconds! (nearly)
Reduce number of HTTP requests
Cache resources that don’t change ‘often’ forever
http://www.flickr.com/photos/sterlingely/64228609(use versions to replace)
Redirects - necessary but waste time…
Expensive over mobile networks due to latency
Why 2 redirects?
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
http://bit.ly/Ncy7Rd
Impact on The Telegraph…
Same issue affected many other sites
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.flickr.com/photos/corneveaux/3248566797
http://www.flickr.com/photos/simeon_barkas/2557059247
Don’t have to do it all by hand
Measure
AnalyseOptimise
Performance isn’t just for Christmas
http://www.flickr.com/photos/jurvetson/6212582593
http://www.flickr.com/photos/auntiep/5024494612
@andydavies
http://www.slideshare.net/andydavies
Credits
All photographs copyright original owners on flickr.com
Following pictograms courtesy of The Noun Project
