speed matters - measuring front-end web performance

63
SPEED MATTERS

Upload: mark-zeman

Post on 17-Aug-2014

2.318 views

Category:

Design


1 download

DESCRIPTION

Why speed matters, examples of the impact saving a few seconds of load time has had on revenue and engagement. The network constraints and what makes the web slow? Bandwidth, latency and it's fundamental impact on the speed of the web. An overview of tools for measuring performance, uptime monitoring, real user monitoring and performance benchmarking. How to make your website faster. Optimization tools and techniques. Muti-device challenges. Responsive vs Adaptive and delivering to mobile within a second. Drop that donut superman! Learn more on the SpeedCurve blog http://speedcurve.com/blog/

TRANSCRIPT

Page 1: Speed matters - measuring front-end web performance

SPEEDMATTERS

Page 2: Speed matters - measuring front-end web performance

100ms 1s 10s

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

Instant

Seamless Yawn!

Our perception of response time

3s - RecommendedLoad Time

6.5s - Alexa 2000Fall 2012

Miller Response Time 1968

Page 3: Speed matters - measuring front-end web performance

Bing did some experiments

+1s - 2.8%

+1s$/ Time to click +2s

Bing

Page 4: Speed matters - measuring front-end web performance
Page 5: Speed matters - measuring front-end web performance

WalmartWallmart made some improvements

-1s +2%

Page 6: Speed matters - measuring front-end web performance

Shopzilla

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

$$$

+12% +25% -50%

From 6-9s down to 1.2s

Page 7: Speed matters - measuring front-end web performance

Strangeloop Networks

Page 8: Speed matters - measuring front-end web performance

Strangeloop Networks

Page 9: Speed matters - measuring front-end web performance

Strangeloop Networks

Page 10: Speed matters - measuring front-end web performance

The network

Page 11: Speed matters - measuring front-end web performance

1 2 3 4 5 6 7 8 9 10

1.36s1.37s1.38s1.39s1.41s1.44s1.50s1.63s

1.95s

3.11s

Page

Loa

d T

ime

Bandwidth (Mbps)

Bandwidth doesn’t matter(much)

Page 12: Speed matters - measuring front-end web performance

300k image downloading slowed 40x

Browser Server

Page 13: Speed matters - measuring front-end web performance

Minimum round trips to download a file

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size

Page 14: Speed matters - measuring front-end web performance

Impact of latency

1

2

3

4

0 20 40 60 80 100 120 140 160 180 200 220 240

Page

Loa

d T

ime

(s)

Round Trip Time (ms)

Page 15: Speed matters - measuring front-end web performance
Page 16: Speed matters - measuring front-end web performance

The front-endreally matters

Page 17: Speed matters - measuring front-end web performance

80% of time is front-end

Measured via residential ADSL line using Google Chrome

news.bbc.co.uk

ebay.co.uk

debenhams.co.uk

direct.gov.uk

amazon.co.uk

mumsnet.com

guardian.co.uk

0 1 2 3 4 5

BackendFrontend

Page 18: Speed matters - measuring front-end web performance

Still got to fix the backend!

Page 19: Speed matters - measuring front-end web performance

327k (32%) bigger in one year

Page 20: Speed matters - measuring front-end web performance

Onload ≠ User perception

2.0s 88% rendered 5.2s window.onload

Page 21: Speed matters - measuring front-end web performance

So how do wemeasure speed?

Page 22: Speed matters - measuring front-end web performance

Uptime monitoring (Pingdom)

Page 23: Speed matters - measuring front-end web performance

Synthetic testing

Page 24: Speed matters - measuring front-end web performance

Only the HTML request measured

Page 25: Speed matters - measuring front-end web performance

Real user monitoring (RUM)

Page 26: Speed matters - measuring front-end web performance

New Relic RUM

Page 27: Speed matters - measuring front-end web performance
Page 28: Speed matters - measuring front-end web performance

APDEX

Page 29: Speed matters - measuring front-end web performance

GA site speed

Page 30: Speed matters - measuring front-end web performance

GA site speed

Page 31: Speed matters - measuring front-end web performance

GA site speed

Page 32: Speed matters - measuring front-end web performance

GA Site speed sample rate

var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-XX']); _gaq.push(['_setSiteSpeedSampleRate', 100]); _gaq.push(['_trackPageview']);

Page 33: Speed matters - measuring front-end web performance
Page 34: Speed matters - measuring front-end web performance
Page 35: Speed matters - measuring front-end web performance
Page 36: Speed matters - measuring front-end web performance

1

2 3

4

5 6

10

8

9

4

11

13

12

7

14

7

Page 37: Speed matters - measuring front-end web performance
Page 38: Speed matters - measuring front-end web performance

GA User timing

_gaq.push([‘_trackTiming’, ‘jQuery’,‘Load Library’, 20, ‘Google CDN’,50]);

Page 39: Speed matters - measuring front-end web performance

GA User timing

Page 40: Speed matters - measuring front-end web performance

GA User timing

Page 41: Speed matters - measuring front-end web performance

Performance benchmarking

Page 42: Speed matters - measuring front-end web performance

How do I make it faster?

Page 43: Speed matters - measuring front-end web performance

Google PageSpeed Insight

Page 44: Speed matters - measuring front-end web performance

WebPagetest

Page 45: Speed matters - measuring front-end web performance

stevesouders.com/hpws/

Page 46: Speed matters - measuring front-end web performance

browserdiet.com

Page 47: Speed matters - measuring front-end web performance

How do I make it faster acrossall those devices?

Page 48: Speed matters - measuring front-end web performance
Page 49: Speed matters - measuring front-end web performance

Responsive Design

Page 50: Speed matters - measuring front-end web performance
Page 51: Speed matters - measuring front-end web performance

1. Build mobile first responsive designs

2. Keep CSS background images in scoped media queries

3. Conditionally load JavaScript and even HTML fragments based on screen size and capabilities

4. Implement a responsive images solution

5. Handle retina images very carefully and err on the side of performance

Jason Grigsby

Page 52: Speed matters - measuring front-end web performance

Responsive Images using Picturefill & WebP

Page 53: Speed matters - measuring front-end web performance

Dynamic image generation

Page 54: Speed matters - measuring front-end web performance

CSS focal point

Adam Bradley

Page 55: Speed matters - measuring front-end web performance

github.com/blog/

Adaptive Design

Page 56: Speed matters - measuring front-end web performance

Device detection (WURFL)

Page 57: Speed matters - measuring front-end web performance

Going mobile first is harder than you think

Page 58: Speed matters - measuring front-end web performance

igvita.com

Page 59: Speed matters - measuring front-end web performance

igvita.com

Page 60: Speed matters - measuring front-end web performance

igvita.com

Page 61: Speed matters - measuring front-end web performance
Page 62: Speed matters - measuring front-end web performance
Page 63: Speed matters - measuring front-end web performance

speedcurve.com@markzeman