speed is essential for a great web experience

http://www.flickr.com/photos/barkaway/342359810

Speed is Essential for a Great Web Experience

Andy Davies NCC Group

https://www.flickr.com/photos/joelhughes/8743984985

http://www.flickr.com/photos/randomidea/247994072

Performance isn’t always a priority

http://www.flickr.com/photos/randomidea/247994072

https://www.flickr.com/photos/sharynmorrow/643126727

“Has it loaded yet?”

100ms1s 10s

Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968

Instan

tSea

mless

Yawn!

How we perceive response times

100ms1s 10s

Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968

Instan

tSea

mless

Yawn!

How we perceive response times

Only 12% of the top 100 (US) retail sites rendered feature content in less than 3 seconds.

“50% more concentration when using badly performing web sites”

Foviance

http://www.flickr.com/photos/yourdon/3366991042

Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez

Delay increases abandonment rate...

http://www.measureworks.nl

…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

We’re more tolerant as we get further into funnels

Less Tolerant

More Tolerant

and suspicious if something’s too fast

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

Faster experiences improve conversion

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

Bing carried out some experiments

+1s - 2.8%

$/

Shopzilla cut page load time by 5 seconds!

http://velocityconf.com/velocity2009/public/schedule/detail/7709

$$$

+12% +25% -50%

Seatwave - below 4 secs vs. above 4 secs

http://www.slideshare.net/pdyball/velocity-eu-2013-what-is-the-velocity-of-an-unladen-swallow

✔

+28% 2x 1/6

�

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

We need to understand our fundamental building blocks

https://www.flickr.com/photos/ogimogi/2253657555

Everyone has fast broadband now… Right?

https://www.flickr.com/photos/98640399@N08/9287370881

Spee

d (M

bps)

0

2

4

6

8

10

12

14

16

18

Nov 08

Apr 09

Nov 10

May 10

Nov 10

May 11

Nov 11

May 12

Nov 12

May 13

Nov 13

UK Broadband speeds are rising…

Ofcom

Vis

itors

(%

)

Load Time (s)

1 2 3 4 5 6 7 8 9 10

1%3%3%

2%

6%

8%

13%

27%

8%

6%

But ‘Real Users’ experience varies

Vis

itors

(%

)

Load Time (s)

1 2 3 4 5 6 7 8 9 10 > 10

24%

1%3%3%

2%

6%

8%

13%

27%

8%

6%

Vis

itors

(%

)

Load Time (s)

1 2 3 4 5 6 7 8 9 10 > 10

But ‘Real Users’ experience varies

and bandwidth (often) isn’t the bottleneck

news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps (bursts over 1.5Mbps are artefact of testing)

10s0s 5s

0.5

1.0

1.5

2.0

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


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

Latency has linear impact on user experiencePa

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

Latency is one of our greatest enemies

https://www.flickr.com/photos/jjvaca/728072059

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

But there’s plenty of recipes to work around it

Some of the optimisations are hacks!

https://www.flickr.com/photos/rocketnumber9/13695281

Browsers support more parallel connections

Old browsers - 2 parallel connections

Today’s browsers - 4 plus connections

We split resources across domains

www.bbc.co.uk!static.bbci.co.uk!news.bbcimg.co.uk!node1.bbcimg.co.uk

DataURIs

url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==)

=

DataURIs

url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==)

=

Larger downloads (needs gzip)!Overrides browser priorities

Create CSS and JavaScript bundles

++++

= =


++++

= =More to download and parse


++++

= =More to download and parse x+!

!

Whole bundle is invalidated if a

single file changes

CSS Sprites

CSS Sprites

To get just one sprite …

CSS Sprites

Browser must download and decode the whole image

To get just one sprite …

There’s a tension between development and delivery

https://www.flickr.com/photos/domiriel/7376397968

Build tools and optimisation services help plug gaps

and won’t be going away…

But couldn’t we be more efficient?

https://www.flickr.com/photos/belsymington/4102783610

HTTP/2(Evolved from Google’s SPDY)

Single multiplexed connection to host

HTTP/1.1

HTTP/2

Multiplexing offers interesting possibilities

How much of an image do we need to make it usable - 5%?

Experiment by John Mellor at Google

There are some questions over the user experience with progressive images


HTTP/1.1 - browser sets priorities

HTTP/2 - browser hints priorities server can override them

Adds header compression too

Google and Mozilla will only support over HTTPS

http://www.flickr.com/photos/forsytht/4553656244

HTTP/2 rollouts will start next year - we still have a lot to learn

http://www.flickr.com/photos/atoach/6014917153

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

HTML

CSS

DOM

CSSOM

Render!Tree


DOM

CSSOM

JavaScript

JavaScript blocks DOM construction!CSSOM construction blocks JavaScript execution

But what about JavaScript?

Let’s pretend we’re a browser (with the preloader switched off)

https://www.flickr.com/photos/mozillaeu/11171168996

Two key rules to remember

Constructing CSS Object Model (CSSOM) blocks JavaScript execution!!

JavaScript blocks DOM construction

GET example.html HTTP/1.1

<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="more-styles.css" rel="stylesheet"> <script src="script.js"></script> <script src="another-script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> <p>Some more text and another picture! <img src="image-2.jpg"/></p> </body> </html>

example.html


example.html

GET /styles.css HTTP/1.1


example.html


example.html

GET /more-styles.css HTTP/1.1


example.html


example.html

GET /script.js HTTP/1.1


example.html


example.html

Must wait for:!1. CSS download and OM construction!2. JS download and execution


example.html


example.html

GET /another-script.js HTTP/1.1


example.html


example.html

Must wait for:!1. JS download and execution


example.html


example.html

GET /image.jpg HTTP/1.1


example.html


example.html

GET /image-2.jpg HTTP/1.1

http://www.flickr.com/photos/nozzer/3990622685

Pre-loader hides some of the latency penalty So our pages load 20% faster

Structure pages for the browser’s critical path

HTML

CSS

DOM

CSSOM

Render!Tree


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

!

. . . !

<script src="restofscript.js"></script> !

</body> </html> One file or many?

Load remaining JavaScript late as possible

Use async attribute to avoid blocking DOM

!

<script async src="myscript.js"></script>

http://caniuse.com/script-async

Widely supported (82%) doesn’t incur delays of using inline script to load other scripts e.g. Google Analytics snippet

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 our visitor’s experience

http://www.flickr.com/photos/splorp/4951916342

https://www.flickr.com/photos/steveweaver/2915792034

Browsers pull resources from the server but …

https://www.flickr.com/photos/christian_bachellier/582457911

What if the server could push them?

Browser Server

Server builds page

GET index.html

<html><head>…

Loading a web page

Request other page resources

Browser Server

Server builds page

GET index.html

<html><head>…

Network Idle


Loading a web page

Browser Server

Server builds page

GET index.html

<html><head>…

Server Push


Push critical resource e.g. CSS

Browser Server

Server builds page

GET index.html

<html><head>…



Server Push

Browser Server

Server builds page

GET index.html

<html><head>…



Server Push

Browser can reject push

We need to be deliberate, to design for performance


http://www.flickr.com/photos/communityfriend/2342578485

Set performance budgets

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?

Measure frequently - during build and in live

http://www.flickr.com/photos/chandramarsono/4324373384

Make performance visible

Lara Hogan, Etsy

�� !��

Lara Hogan, Etsy

http://lafikl.github.io/perfBar

Compare against competitors

The Guardian display their performance on a monitor by FD’s office

Remember the constraints of our medium


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

http://www.flickr.com/photos/nzbuu/4093456029

Thank You!

@andydavies [email protected]

speed is essential for a great web experience

Internet

load time s1

sresponse time

speed fast page load

median home page time

web sites foviance http

median page

page views

weeks http