the web is too slow
TRANSCRIPT
https://www.flickr.com/photos/sharynmorrow/643126727
The Web Is… Too Slow
@AndyDavies #TheWebIs, Oct 2014
https://www.flickr.com/photos/dullhunk/3930915541
But I’m frustrated…
http://www.flickr.com/photos/sybrenstuvel/2468506922
The Web is Too Slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
Too many sites are too slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
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
“We’re not being deliberate about performance”! Tim Kadlec
https://www.flickr.com/photos/lukew/7382528728
But only if we build it that way…
http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg
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
Speed matters!
Walmart 2012
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
We’re more tolerant as we get further into purchase funnels
Less Tolerant
More Tolerant
and sometimes we get suspicious if something’s too fast
and sometimes we get suspicious if something’s too fast
Design is all about finding solutions within constraints,!if there were no constraints, it’s not design — it’s art.!
Matias Duarte
“”
http://www.flickr.com/photos/communityfriend/2342578485
Embrace those constraints… set a performance budget
Setting a budget
An event that matters to the visitor!within a set time!under defined network conditions
“Usable within 10 seconds on GPRS connection”!BBC News
“SpeedIndex under 1000”!Paul Irish
Could use page size or number of objects but…
…how well would they work here?
Make them visible
Lara Hogan, Etsy
������ ����������������!��������� ���������������������������
Lara Hogan, Etsy
http://lafikl.github.io/perfBar
Test with a slower network connection
Network Link Conditioner (or http://slowyapp.com/)http://jagt.github.io/clumsy/
It’s great for comparisons… set a budget based on competitors
Build it into build processes
Commercial services based on WebPagetest
Performance budgets coming to them too
We know how to make fast sites, there are plenty of recipes out there
How well do we understand our medium?
https://www.flickr.com/photos/37873897@N06/6924775578
Do we understand our fundamental building blocks?
https://www.flickr.com/photos/ogimogi/2253657555
Which will be faster?
1Mbps 10Mbps
Which will be faster?
1Mbps 10Mbps/ 28ms RTT / 280ms RTT
We often think of the network as a pipe
https://www.flickr.com/photos/63567936@N00/4181042889
that’s sometimes really bad
https://www.flickr.com/photos/chesh2000/4487000196
but the reality is closer to
http://1m0esx2939yhjwld8419obqhyb.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/DSC_0492.jpg
“More Bandwidth Doesn’t Matter (much)”!Mike Belshe
Page
Loa
d T
ime
Bandwidth (Mbps)
1 2 3 4 5 6 7 8 9 10
1.36s1.37s1.38s1.39s1.41s1.44s1.50s1.63s
1.95s
3.11s
But latency has a linear impactPa
ge L
oad
Tim
e (s
)
1
2
3
4
Round Trip Time (ms)
0 20 40 60 80 100 120 140 160 180 200 220 240
http://www.vectortemplates.comBT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml
Latency increases with distance
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
There’s the last mile latency too (and routers, other networking kit, mobile latencies too)
https://www.flickr.com/photos/kiwanja/3170292282
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
We can cheat the latency penalty (sometimes)
https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
User gets feedback
User gets feedback
Network request still in progress
???
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>
… into Document Object Model (DOM)
html
head body
meta link script title h1 p
img
Convert CSS …
body { font-size: 16px } h1 { text-decoration: underline} p { font-weight: bold } p > span { color: #000 } img { border: 1px solid #ccc }
… 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
imgfont-size: 16px border: 1px solid #ccc
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
Render the Page
HTML
CSS
DOM
CSSOM
Render!Tree Layout Paint
But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!Tree Layout PaintJavaScript
But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!Tree Layout PaintJavaScript
DOM
CSSOM
JavaScript
JavaScript blocks DOM construction!CSSOM construction blocks JavaScript execution
HTML
CSS
DOM
CSSOM
Render!Tree Layout PaintJavaScript Render!Tree
HTML
CSS
DOM
CSSOM
Render!Tree Layout PaintJavaScript Render!Tree
Fonts and background images discovered
when render tree builds
And we all hate this… right?
Use font foundries that prioritise your visitor’s experience
http://www.flickr.com/photos/splorp/4951916342
Some interesting ideas that may help
font-timeout: <time>;!font-desirability: [ optional | mandatory ];
https://github.com/igrigorik/css-font-timeout
https://www.flickr.com/photos/christian_bachellier/582457911
Server push in HTTP/2 might help too
Be deliberate, design for performance
https://www.flickr.com/photos/9760699@N08/3748770917
Measure frequently - during build and in live
http://www.flickr.com/photos/chandramarsono/4324373384
Remember the constraints of our medium
https://www.flickr.com/photos/33649815@N03/3367739514
https://www.flickr.com/photos/basheertome/4762529213
http://www.flickr.com/photos/nzbuu/4093456029
Thank You!
@andydavies [email protected]
http://slideshare.net/andydavies