This document discusses the importance of website speed and performance. It notes that most top retail sites take over 3 seconds to load critical content, and median page load times have slowed by 23% year-over-year. Faster sites see benefits like 10% higher conversions. Network latency has a greater impact on performance than bandwidth. Techniques like preloading fonts and images can help mitigate latency. Frameworks and features like service workers may also help if designed deliberately for performance. Regular measurement and setting performance budgets are recommended to build fast user experiences.

1. https://www.flickr.com/photos/aukirk/9233111519
Speed Matters!
@AndyDavies
JS Oxford, Jan 2015

2. https://www.flickr.com/photos/dullhunk/3930915541

3. But I’m frustrated…
http://www.flickr.com/photos/sybrenstuvel/2468506922

4. The Web is Too Slow
http://www.flickr.com/photos/the_justified_sinner/3507390621

6. Too many sites are too slow
http://www.flickr.com/photos/the_justified_sinner/3507390621

7. and it’s getting worse!
Only 12% of the top 100 (US) retail sites
rendered feature content in less than 3
seconds. !
!
Year-on-year the median page has
slowed down by 23%
Tammy Everts - Radware State of the Union Fall 2014

8. “We’re not being deliberate about performance”!
https://www.flickr.com/photos/lukew/7382528728
Tim Kadlec

9. But only if we build it that way…
http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg

10. Reader panel (3,000 people) rated speed
(fast page load time) as their second most
important driver!
!
Speed had the highest percentage of people
saying it was VERY important to them

11. Speed matters!
Walmart 2012

12. increased conversions by 10%
http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds
Shaved 1 second off median home page time!
6 seconds off 98th percentile

13. More tolerant as we get further in purchase funnels
Less Tolerant
More Tolerant

14. sometimes we get suspicious if something’s too fast

15. Design is all about finding solutions within constraints,!
if there were no constraints, it’s not design — it’s art.!
Matias Duarte
“
”

16. http://www.flickr.com/photos/communityfriend/2342578485
Embrace those constraints… set a performance budget

17. Setting a budget
An event that matters to the visitor!
within a set time!
under defined network conditions

18. “Usable within 10 seconds on GPRS connection”!
BBC News

19. “SpeedIndex under 1000”!
Paul Irish

20. Could use page size or number of objects but…

21. …how well would they work here?

22. Make them visible
Lara Hogan, Etsy

23. Lara Hogan, Etsy

24. http://lafikl.github.io/perfBar

25. Test with a slower network connection
Network Link Conditioner
(or http://slowyapp.com/)
http://jagt.github.io/clumsy/

27. It’s great for comparisons… set a budget based on competitors

28. Build it into build processes

29. Commercial services based on WebPagetest

30. Performance budgets coming to them too

32. We know how to make fast sites… plenty of recipes

33. How well do we understand our medium?
https://www.flickr.com/photos/37873897@N06/6924775578

34. Do we understand our fundamental building blocks?
https://www.flickr.com/photos/ogimogi/2253657555

35. Which will be faster?
1Mbps 10Mbps/ 28ms RTT / 280ms RTT

36. We often think of the network as a pipe
https://www.flickr.com/photos/63567936@N00/4181042889

37. that’s sometimes really bad
https://www.flickr.com/photos/chesh2000/4487000196

38. but the reality is closer to
http://1m0esx2939yhjwld8419obqhyb.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/DSC_0492.jpg

39. “More Bandwidth Doesn’t Matter (much)”
Mike Belshe
PageLoadTime
Bandwidth (Mbps)
1 2 3 4 5 6 7 8 9 10
1.36s1.37s1.38s1.39s1.41s1.44s1.50s
1.63s
1.95s
3.11s

40. But latency has a linear impactPageLoadTime(s)
1
2
3
4
Round Trip Time (ms)
0 20 40 60 80 100 120 140 160 180 200 220 240

42. http://www.vectortemplates.com
BT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml
Latency increases with distance
81ms
201ms
156ms
266ms
232ms
28ms

43. There’s the last mile latency too
(and routers, other networking kit, mobile latencies too)
https://www.flickr.com/photos/kiwanja/3170292282

44. TCP Handshake
Client Server
Round
Trip
Time
SYN
GET / HTTP 1.1
SYN-ACK
ACK

45. TCP Slow Start
Client Server
Round
Trip
Time
GET / HTTP 1.1

46. TCP and the Lower Bound of Web Performance
John Rauser
Larger downloads == more round trips
71kB
143kB
214kB
285kB
1 2 3 4 5 6 7 8 9 10 11
(TCP Segments)
Round Trips
Size

47. We can cheat the latency penalty
(sometimes)
https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design

48. User gets
feedback
Network
request

50. Covert HTML …
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<script src="script.js"></script>
<title>HTML Example</title>
</head>
<body>
<h1>Title</h1>
<p>Some introductory text and picture! <img src="image.jpg"/></p>
</body>
</html>

51. … into Document Object Model (DOM)
html
head body
meta link script title h1 p
img

52. Convert CSS …
body { font-size: 16px }
h1 { text-decoration: underline}
p { font-weight: bold }
p > span { color: #000 }
img { border: 1px solid #ccc }

53. … into CSS Object Model (CSSOM)
body
h1 p
span
font-size: 16px
font-size: 16px
text-decoration: underline
font-size: 16px
font-weight: bold
font-size: 16px
font-weight: bold
color: #000
img
font-size: 16px
border: 1px solid #ccc

54. Combine DOM and CSSOM to build Render Tree
body
h1 p
img
font-size: 16px
text-decoration: underline
font-size: 16px
font-weight: bold
border: 1px solid #ccc
font-size: 16px
font-weight: bold

55. Render the Page
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout Paint

56. But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript

57. But what about JavaScript?
JavaScript blocks DOM construction!
CSSOM construction blocks JavaScript execution
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript

58. Fonts and background
images discovered
when render tree buildsHTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript

59. And we all hate this… right?

60. Use font foundries that prioritise visitor experience
http://www.flickr.com/photos/splorp/4951916342

61. Some interesting ideas that may help
font-timeout: <time>;!
font-desirability: [ optional | mandatory ];
https://github.com/igrigorik/css-font-timeout

62. https://www.flickr.com/photos/christian_bachellier/582457911
Server push in HTTP/2 might help too

63. Watch your framework

65. http://www.filamentgroup.com/lab/mv-initial-load-times.html

66. How could features like ServiceWorker help?
https://github.com/slightlyoff/ServiceWorker

67. Be deliberate, design for performance
https://www.flickr.com/photos/9760699@N08/3748770917

68. Measure frequently - during build and in live
http://www.flickr.com/photos/chandramarsono/4324373384

69. Remember the constraints of our medium
https://www.flickr.com/photos/33649815@N03/3367739514

70. https://www.flickr.com/photos/basheertome/4762529213

71. http://www.flickr.com/photos/nzbuu/4093456029
ThankYou!
@andydavies
andy.davies@nccgroup.com
http://slideshare.net/andydavies