6. 100ms
1s
10s
Response Time in Man-computer Conversational Transactions
Robert B. Miller, 1968
Instant
Seamless
Yawn!
How we perceive response times
7. 100ms
1s
10s
Response Time in Man-computer Conversational Transactions
Robert B. Miller, 1968
Instant
Seamless
Yawn!
How we perceive response times
Only 12% of the top 100 (US) retail sites rendered
feature content in less than 3 seconds.
8. “50% more concentration when using
badly performing web sites”
Foviance
http://www.flickr.com/photos/yourdon/3366991042
9. Delay increases abandonment rate...
Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
10. …and has a negative impact on brand perception
Tesco’s ‘Fast’
Tesco’s ‘Slow’
Mobile Web Stress: Understanding the Neurological Impact of Poor Performance, Tammy Everts, Radware
11. We’re more tolerant as we get further into funnels
Less Tolerant
More Tolerant
14. 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
16. 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
21. The Web is Too Slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
22.
23.
24. Too many sites are too slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
25. 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
26. “We’re not being deliberate about performance”!
Tim Kadlec
https://www.flickr.com/photos/lukew/7382528728
27. But only if we build it that way…
http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg
28. We need to understand our fundamental building blocks
https://www.flickr.com/photos/ogimogi/2253657555
29. Everyone has fast broadband now… Right?
https://www.flickr.com/photos/98640399@N08/9287370881
30. Speed (Mbps)
18
16
14
12
10
8
6
4
2
0
Nov 08
Apr 09
May 10
Nov 10
May 11
Nov 10
May 12
Nov 11
May 13
Nov 12
Nov 13
UK Broadband speeds are rising…
Ofcom
33. and bandwidth (often) isn’t the bottleneck
0s 5s 10s
news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps
(bursts over 1.5Mbps are artefact of testing)
2.0
1.5
1.0
0.5
83. … 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
84. 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
85. Render the Page
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout Paint
86. But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!
Tree
JavaScript Layout Paint
87. But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!
Tree
JavaScript
Layout Paint
JavaScript blocks DOM construction!
CSSOM construction blocks JavaScript execution
88. Let’s pretend we’re a browser
(with the preloader switched off)
https://www.flickr.com/photos/mozillaeu/11171168996
89. Two key rules to remember
Constructing CSS Object Model (CSSOM) blocks JavaScript execution!
!
JavaScript blocks DOM construction
113. Structure pages for the browser’s critical path
HTML
CSS
DOM
CSSOM
Render!
Tree
JavaScript Layout Paint
114. 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 JS!
Ideally one file
Only JS needed
for page load
115. Load remaining JavaScript late as possible
!
.
.
.
!
<script src="restofscript.js"></script>
!
</body>
</html> One file or many?
116. Use async attribute to avoid blocking DOM
!
<script async src="myscript.js"></script>
Widely supported (82%) doesn’t incur delays of using inline
script to load other scripts e.g. Google Analytics snippet
http://caniuse.com/script-async
117. HTML
CSS
DOM
CSSOM
Render!
Tree
JavaScript Layout Paint
118. HTML
CSS
DOM
CSSOM
Render!
Tree
Fonts and background
images discovered
when render tree builds
JavaScript Layout Paint
123. Browser Server
Server
builds
page
GET index.html
<html><head>…
Loading a web page
Request other page resources
124. Browser Server
Server
builds
page
GET index.html
<html><head>…
Network
Idle
Request other page resources
Loading a web page
125. Browser Server
Server
builds
page
GET index.html
Push critical resource e .g. CSS
<html><head>…
Server Push
Request other page resources
126. Browser Server
Server
builds
page
GET index.html
Push critical resource e .g. CSS
<html><head>…
Request other page resources
Server Push
127. Browser Server
Server
builds
page
GET index.html
Push critical resource e .g. CSS
<html><head>…
Request other page resources
Server Push
Browser can reject push
128. We need to be deliberate, to design for performance
https://www.flickr.com/photos/9760699@N08/3748770917