Speed Matters!

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

Transcript of Speed Matters!

https://www.flickr.com/photos/aukirk/9233111519

Speed Matters!

@AndyDavies JS Oxford, Jan 2015

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”!

https://www.flickr.com/photos/lukew/7382528728

Tim Kadlec

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

More tolerant as we get further in purchase funnels

Less Tolerant

More Tolerant

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… plenty of recipes

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

There’s the last mile latency too (and routers, other networking kit, mobile latencies too)

https://www.flickr.com/photos/kiwanja/3170292282

TCP Handshake

Client Server

Round Trip Time

SYN

GET / HTTP 1.1

SYN-ACK

ACK

TCP Slow Start

Client Server

Round Trip Time

GET / HTTP 1.1

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

Network request

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: boldfont-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?

JavaScript blocks DOM construction!CSSOM construction blocks JavaScript execution

HTML

CSS

DOM

CSSOM

Render!Tree Layout PaintJavaScript

Fonts and background images discovered

when render tree buildsHTML

CSS

DOM

CSSOM

Render!Tree Layout PaintJavaScript

And we all hate this… right?

Use font foundries that prioritise visitor 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

Watch your framework

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

How could features like ServiceWorker help?

https://github.com/slightlyoff/ServiceWorker

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