Slides from my talk on why speed matters, ways to measure it and how page load times can be improved. Talk was given at oredev in Sweden

1. Speed is Essential for a
Great Web Experience
@andydavies
#oredev
Nov 2012
http://www.flickr.com/photos/dex1138/7879381800

2. Performance isn’t always a priority
http://www.flickr.com/photos/randomidea/247994072

3. “Has it loaded yet?”
http://www.flickr.com/photos/kindofindie/4099768084

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

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

6. Effect of delay on abandonment rate...
Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez

7. Bing did some experiments
+1s
$/
- 2.8%
+

8. Wallmart made some improvements
-1s +2%

9. Shopzilla cut page load time by 5 seconds!
+12% +25% -50%
$$$
http://velocityconf.com/velocity2009/public/schedule/detail/7709

10. Measuring page load time...
http://www.flickr.com/photos/wwarby/7109538317

11. W3C Navigation Timing API
navigaAonStart,
redirectStart,
redirectEnd,
fetchStart,
domainLookupStart,
domainLookupEnd,
connectStart,
(secureConnecAonStart),
connectEnd,
requestStart,
responseStart,
responseEnd,
Prompt,
App,
for, redirect, DNS, TCP, Request, Response, Processing, onLoad,
cache,
unload,
unload,
loadEventEnd,
loadEventStart,
domComplete,
domContentLoaded,
domInteracAve,
domLoading,
unloadEnd,
unloadStart,
http://www.w3.org/TR/navigation-timing/

12. Navigation Timing Data in Google Analytics
Text
Other Real User Monitoring tools available

13. Example of 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)

14. Example of 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)

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

16. Examining the detail...
http://www.flickr.com/photos/arnybo/2679622216

17. Browser Plugins
YSlow PageSpeed

18. webpagetest.org

19. Waterfall for bbc.co.uk/news

20. mobitest.akamai.com
Alternatively, could use Chrome / Safari
remote debugging to generate HAR

21. Bigger, Faster Servers?
http://www.flickr.com/photos/getbutterfly/6317955134

22. Over 80% 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 2 3 4 5
Measured via residential ADSL line using Google Chrome

23. But don’t forget to fix slow server responses
4 seconds!

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

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

26. Visualising TCP
Carlos Bueno (@archivd) https://vimeo.com/14439742

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

28. Minimum round trips to download a file
(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

29. Latency is Our Biggest Enemy
“In 2012, the average worldwide RTT to Google is still
~100ms, and ~50-60ms within the US.”
“we are looking at 100-1000ms RTT range on mobile”
Ilya Grigorik
http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

30. 3G Radio Resource Control
Idle for 12s
IDLE CELL_FACH
1s delay
1-2s delay!
CELL_DCH Idle for 5s
Exact timings vary and depend on carrier NOT device
http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf

31. Going Faster…
http://www.flickr.com/photos/mikebaird/2464769129/

32. Speeding Things Up - Some Basics
★ Compress
★ Minify
★ Reduce Requests
★ Cache
★ HTTP Keep-Alive
★ Use a CDN?

33. What’s the web made of?
Images
Scripts
Stylesheets
HTML
Flash
Other
Composition of ‘average’ web page via httparchive.org

34. Bitmapped Images
JPEG PNG GIF
Optimise, Optimise, Optimise!
(jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)

35. New Devices, New Challenges...
2 x Resolution = 4 x Pixels!
http://www.flickr.com/photos/roopaw/6985954465

36. Some Alternatives
CSS SVG Fonts
Bitmaps still a challenge but interesting experiments around

37. It’s no longer a desktop world
http://www.flickr.com/photos/adactio/6960610178

38. Go “Mobile First” for Responsive Designs
http://seesparkbox.com

39. Use “Right-sized” Images
http://www.flickr.com/photos/emzee/139794246
Standards support (picture? srcset?) is coming but unclear when!
Meanwhile services such as sencha.io, resrc.it and JS libraries -
picturefill.js, foresight.js can help.

40. Minimise browser blocking...
http://www.flickr.com/photos/barteko/6128499314

41. Parallel Downloads
news.bbcimg.co.uk
static.bbc.co.uk
Domain Sharding increases number of parallel downloads but…
…more connections may not be a good idea on mobile
…may also interfere with multiplexing in protocols like SPDY

42. Get the <head> straight
<!doctype html>
<html>
<head>
CSS before JS
<meta charset="utf-8"> Ideally one file*
<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>
* Depends on size and whether major / minor breakpoints used

43. Load remaining Javascript late as possible
.
.
.
<script src="restofscript.js"></script>
</body>
</html>
One file or many?
(Depends on size)
Script loaders can help but scripts aren’t discoverable by pre-fetcher

44. The Script Tag
<script src=″…″></script>
Until the script has executed, the rendering of
all elements below is blocked!

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

46. Impact on The Telegraph…
Same issue affected many other sites http://bit.ly/Ncy7Rd

47. 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>
Or use a script loader - labjs, requirejs, yepnope etc.

48. Lots of factors to think about...
http://www.flickr.com/photos/corneveaux/3248566797

49. Don’t have to do it all by hand
http://www.flickr.com/photos/simeon_barkas/2557059247

50. Performance isn’t just for Christmas
Measure
Optimise Analyse

51. Measure Impact on Business Goals
http://www.flickr.com/photos/safari_vacation/5961260280

52. http://www.flickr.com/photos/jurvetson/6212582593

53. @andydavies
andy@asteno.com
http://www.slideshare.net/andydavies
http://www.flickr.com/photos/auntiep/5024494612

54. Credits
All photographs copyright original owners on flickr.com
Following pictograms courtesy of The Noun Project