Talk from The Web Is in Cardiff, October 2014 exploring the business case for web performance, and some of the underlying factors that can make sites slow

1. https://www.flickr.com/photos/sharynmorrow/643126727
The Web Is… Too Slow
@AndyDavies
#TheWebIs, Oct 2014

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”!
Tim Kadlec
https://www.flickr.com/photos/lukew/7382528728

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%
Shaved 1 second off median home page time!
6 seconds off 98th percentile
http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds

13. We’re more tolerant as we get further into purchase funnels
Less Tolerant
More Tolerant

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

15. and sometimes we get suspicious if something’s too fast

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

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

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

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

20. “SpeedIndex under 1000”!
Paul Irish

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

22. …how well would they work here?

23. Make them visible
Lara Hogan, Etsy

24. !

25. Lara Hogan, Etsy

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

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

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

31. Build it into build processes

32. Commercial services based on WebPagetest

33. Performance budgets coming to them too

35. We know how to make fast sites, there are plenty of recipes out there

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

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

38. Which will be faster?
1Mbps 10Mbps

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

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

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

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

43. “More Bandwidth Doesn’t Matter (much)”!
Mike Belshe
Page Load Time
1.41s 1.39s 1.38s 1.37s 1.36s 1.50s 1.44s
1 2 3 4 5 6 7 8 9 10
Bandwidth (Mbps)
1.63s
1.95s
3.11s

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

46. Latency increases with distance
http://BT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml www.vectortemplates.com

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

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

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

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

52. User gets
feedback

53. Network request
still in progress
User gets
feedback

54. ???

55. 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
titleHTML Example/title
/head
body
h1Title/h1
pSome introductory text and picture! img src=image.jpg//p
/body
/html

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

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

58. … 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

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

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

61. But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!
Tree
JavaScript Layout Paint

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

63. HTML
CSS
DOM
CSSOM
Render!
Tree
JavaScript Layout Paint

64. HTML
CSS
DOM
CSSOM
Render!
Tree
Fonts and background
images discovered
when render tree builds
JavaScript Layout Paint

65. And we all hate this… right?

66. Use font foundries that prioritise your visitor’s experience
http://www.flickr.com/photos/splorp/4951916342

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

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

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

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

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

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

73. http://www.flickr.com/photos/nzbuu/4093456029
Thank You!
@andydavies
andy.davies@nccgroup.com
http://slideshare.net/andydavies