Slides from my talk at ReDevelop 2015 Covers business case for web performance, along with the fundamentals of how latency and the critical rendering path affect page load performance

1. https://www.flickr.com/photos/sharynmorrow/643126727
Speed Matters…
So why is your site so slow?
@AndyDavies
ReDevelop 2015, August 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. (it’s just) 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. http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds
Increased conversions by 10%!
!
Shaved 1 second off median home page time!
6 seconds of 98th percentile

13. Improved load time from 1.2s to 0.5s!
!
+28% page views / session!
+21% time on site / visit!
+20% conversion rate
http://blog.quanta-computing.com/etam-earns-20-of-conversion-by-optimising-its-online-store/

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

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

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

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

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

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

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

21. “SpeedIndex under 1000”!
Paul Irish

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

23. …how well would they work here?

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

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

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

27. Which will be faster?
10Mbps 1Mbps

28. Which will be faster?
10Mbps 1Mbps

29. Which will be faster?
10Mbps 1Mbps

30. Which will be faster?
10Mbps 1Mbps

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

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

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

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

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

36. Latency = time between request and response
Browser Server
Request
Response
Time

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

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

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

40. http://www.vectortemplates.com
CDN = content closer to visitor = less latency = faster

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

42. TCP and the Lower Bound of Web Performance!
John Rauser
Will probably need more than one round trip
71kB
143kB
214kB
285kB
1 2 3 4 5 6 7 8 9 10 11
(TCP Segments)
Round Trips
Size

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

45. User gets
feedback

46. User gets
feedback
Network request
still in progress

47. ???

48. Convert 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>

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

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

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

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

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

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

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

56. async attribute avoids JavaScript blocking DOM construction
!
<script async src="myscript.js"></script>
Widely supported - 89.59% (http://caniuse.com/script-async)!
!
Doesn’t incur delays of using inline script to load other scripts e.g.
Google Analytics snippet

57. HTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript Render!
Tree

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

59. And we all hate this… right?

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

61. ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q
R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦
§ ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö
× Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Ā ā Ă ă Ą ą Ć
ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ
ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ
Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙
˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ
ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ
Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б
в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ
Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҂ ҃ ҄ ҅ ҆ ҈ ҉ Ҋ ҋ Ҍ ҍ
Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ
ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ
Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ
ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ
Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ
Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ – — ― ‗ ‘ ’ ‚ ‛ “ ” „ † ‡ • … ‰ ′ ″ ‹ › ‼ ⁄ ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣
₤ ₧ ₫ € ℅ № ℠ ™ Ω ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl 
Do we need all those glyphs?
Open Sans — 22.1 kB

62. ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q
R S T U V W X Y Z [ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦
§ ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö
× Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Ā ā Ă ă Ą ą Ć
ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ
ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ
Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ ƒ Ơ ơ Ư ư ǰ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ș ș Ț ț ȷ ʼ ˆ ˇ ˉ ˘ ˙
˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ
ή ί ΰ α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϊ ϋ ό ύ ώ ϑ ϒ ϖ Ѐ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ
Њ Ћ Ќ Ѝ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б
в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ѐ ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ѝ ў џ Ѡ ѡ
Ѣ ѣ Ѥ ѥ Ѧ ѧ Ѩ ѩ Ѫ ѫ Ѭ ѭ Ѯ ѯ Ѱ ѱ Ѳ ѳ Ѵ ѵ Ѷ ѷ Ѹ ѹ Ѻ ѻ Ѽ ѽ Ѿ ѿ Ҁ ҁ ҂ ҃ ҄ ҅ ҆ ҈ ҉ Ҋ ҋ Ҍ ҍ
Ҏ ҏ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҟ ҟ Ҡ ҡ Ң ң Ҥ ҥ Ҧ ҧ Ҩ ҩ Ҫ ҫ Ҭ ҭ Ү ү Ұ ұ Ҳ ҳ Ҵ ҵ Ҷ ҷ Ҹ
ҹ Һ һ Ҽ ҽ Ҿ ҿ Ӏ Ӂ ӂ Ӄ ӄ Ӆ ӆ Ӈ ӈ Ӊ ӊ Ӌ ӌ Ӎ ӎ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӡ ӡ Ӣ ӣ
Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӭ ӭ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӷ ӷ Ӹ ӹ Ӻ ӻ Ӽ ӽ Ӿ ӿ Ԁ ԁ Ԃ ԃ Ԅ ԅ Ԇ ԇ Ԉ ԉ Ԋ ԋ Ԍ ԍ Ԏ
ԏ Ԑ ԑ Ԓ ԓ Ḁ ḁ Ḿ ḿ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ
Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ
Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ Ὅ – — ― ‗ ‘ ’ ‚ ‛ “ ” „ † ‡ • … ‰ ′ ″ ‹ › ‼ ⁄ ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁿ ₣
₤ ₧ ₫ € ℅ № ℠ ™ Ω ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl 
Just Latin glyphs… 14.9 kB — 33% saving

63. A proposal that may help…
font-display: auto | block | swap | fallback | optional;
https://tabatkins.github.io/specs/css-font-rendering/
Proposal to help control font blocking - CSS Font Rendering Controls

64. Another proposal that should help - link rel=“preload”…
https://w3c.github.io/preload/
<!-- preload a widget component -->
<link rel="preload" href="/components/widget.html" as="iframe">
!
<!-- preload an application script -->
<link rel="preload" href="/app/script.js" as="javascript">
!
<!-- preload a CSS stylesheet -->
<link rel="preload" href="/style/style.css" as="stylesheet">
!
<!-- preload a font -->
<link rel="preload" href="//example.com/font.woff2" as="font">
!
<!-- preload an image asset -->
<link rel="preload" href="//example.com/image.jpg" as="image" media="max-width: 640px">

65. Some other ways of hinting are already here
<link rel="dns-prefetch" href="other.hostname.com">
!
<link rel="subresource" href="/some_other_resource.js">
!
<link rel="prefetch" href="/some_other_resource.jpeg">
!
<link rel="prerender" href=“//domain.com/next_page.html”>

66. https://www.flickr.com/photos/christian_bachellier/582457911
And HTTP/2 server push is here now too

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