Why is Web Performance Important?And why you should care about it

flickr.com/photos/10947307@N02/1812302205

First lets define performance (in terms that relate to us)

The perception of response timesJakob Nielsen

100ms 1s 10s

Insta

nt

Seam

less

Yawn!

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

And why is performance important to users of machines?

flickr.com/photos/28319663@N03/13376786064

“…participants had to concentrate up to 50% more when using badly performing websites” Foviance

flickr.com/photos/23073717@N07/5450434144

Context

flickr.com/photos/75959029@N00/3371615134

Slower web performance has a clear and measureable impact on people at a neurological levelhttp://www.radware.com/mobile-eeg2013/

Q: Given that we now know performance is valued by users of machines, how does it impact the machine owners?

A: We study it!

“The results suggest that slower page speed affects the brand on a more global level”http://www.radware.com/mobile-eeg2013/

Page speed matters for site conversion, revenue and SEOWalmart

$$$

+12% +25% -50%

Shopzilla cut load times by 5 secondshttp://velocityconf.com/velocity2009/public/schedule/detail/7709

Abandonment rate for 200+ sites / 177+ million page views over 2 weeks – Measureworks / Gomez

Amazon, bing and Google all found that as load time increased, revenue (searches) decreasedhttp://velocityconf.com/velocity2009/public/schedule/detail/8523

+s -%

= £

“85% of mobile users expect sites to load at least as fast or faster than sites on their desktop”Strangeloop Networks

Ok, so we know that there is a problem.How do we fix it?

flickr.com/photos/68661927@N00/2371313211

This man gave us a steer

In the beginning there was the rules.These were the web performance commandments.

What can we do about these issues?Fix them through better dev practices…

flickr.com/photos/84637141@N08/12285119485

Performance Workshops…

flickr.com/photos/55156621@N04/9929542584

… or automate through Open Source or COTS

http://www.slideshare.net/patrickmeenan/making-the-web-faster

And don’t forget to keep measuring

“Without data you’re just another person with an opinion.”W. Edwards Deming

http://www.slideshare.net/jonlives/bring-the-noise

Screen shots of WPT and PA

What can you use to measure performance?

</shameless plug>

Are we done?

No, there’s more to it

Nov 0

8

Apr 0

9

Nov 1

0

May

10

Nov 1

0

May

11

Nov 1

1

May

12

Nov 1

2

May

13

Nov 1

302468

101214161820

Sp

ee

d (

Mb

ps

)UK Broadband speeds are improving all the time

Ofcom

But users experiences are getting worse

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

5

10

15

20

25

30

Load Time (s)

Vis

ito

rs (

%)

But users experiences are getting worse

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

5

10

15

20

25

30

Load Time (s)

Vis

ito

rs (

%)

1 2 3 4 5 6 7 8 9 10

3.11s

1.95s1.63s 1.50s 1.44s 1.41s 1.39s 1.38s 1.37s 1.36s

Bandwidth (Mbps)

Page L

oad T

ime

More bandwidth doesn’t matter (much)Mike Belshe

Let’s get under the hood

flickr.com/photos/41308227@N00/4690943187

Read this book by @igrigorik

https://www.youtube.com/watch?v=Il4swGfTOSM

Bandwidth + Latency = Performance

1 RTT

Standard pages contain many requests

0 20 40 60 80 1001201401601802002202400

1

2

3

4

5

Round Trip Time (ms)

Page L

oad T

ime (

s)Latency has a huge impact on load times

Distance matters too

TCP and the Lower Bound of Web PerformanceJohn Rauser, 2010

Larger downloads == more trips

Remember that web browsing is latency limited and streaming is bandwidth limited

¹

But why the rush?

.flickr.com/photos/27536026@N04/2620572503

PaintRender

Tree

HTML

CSS

DOM

CSSOM

Layout

Because browsers build a page like this

Your target is 14K

But remember that JS blocks

RenderTree

HTML

CSS

DOM

CSSOM

Layout PaintJavaScript

So, got all that?

That’s what we recommend anyway, but what are people doing right now?

.flickr.com/photos/10855397@N02/2461847632

What does the future look like?

flickr.com/photos/72211182@N00/107474703/

Performance Budgets

flickr.com/photos/68751915@N05/6736170827

HTTP /2(was SPDY)

Multiplexing 1 connection per host

Header Compression

Browser hints to set priorities

… and secure by default!

Understand TCP Slow Start a little better

If we increase our initial congestion windows we can get more content down in our initial single packet!

flickr.com/photos/92849383@N02/8500134412

Image formats

Thank you for your time!

Ben DanielAlex Painter

Europe

Manchester - Head Office

Amsterdam

Cheltenham

Copenhagen

Edinburgh

Glasgow

Leatherhead

London

Milton Keynes

Munich

Zurich

North America

Atlanta

Austin

Chicago

New York

San Francisco

Seattle

Sunnyvale

Australia

Sydney