Building for performance and resilience

A presentation at Codefront in May 2014 in Linz, Austria by Andy Hume

Slide 1

Slide 1

BUILDING FOR @andyhume PERFORMANCE ! RESILIENCE Tuesday, June 17, 14 SmashingConf, New York, 2014

Slide 2

Slide 2

WHY CARE? Tuesday, June 17, 14 http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/

Slide 3

Slide 3

WHY CARE? Tuesday, June 17, 14

http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/

Slide 4

Slide 4

WHY CARE? Tuesday, June 17, 14

http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/

Slide 5

Slide 5

WHY CARE? Tuesday, June 17, 14

http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/

Slide 6

Slide 6

WHY CARE? Tuesday, June 17, 14

http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/

Slide 7

Slide 7

WHY CARE? Tuesday, June 17, 14

http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/

Slide 8

Slide 8

Tuesday, June 17, 14

Measure http://www.flickr.com/photos/kayaker1204/4319542459/

Slide 9

Slide 9

We have a median page load ! me of seven seconds, and our primary compe ! tor has a median page load ! me of three seconds. Tuesday, June 17, 14

Measure http://www.flickr.com/photos/kayaker1204/4319542459/

Te l l a s t o r y

Slide 10

Slide 10

Page load ! mes increased by 25% when we added feature x. Tuesday, June 17, 14

Measure http://www.flickr.com/photos/kayaker1204/4319542459/

Te l l a s t o r y

Slide 11

Slide 11

Tuesday, June 17, 14

Your bosses love a story http://www.flickr.com/photos/kayaker1204/4319542459/

Slide 12

Slide 12

Tuesday, June 17, 14

Spread the word http://www.flickr.com/photos/kayaker1204/4319542459/

Slide 13

Slide 13

Tuesday, June 17, 14

What numbers?! http://www.flickr.com/photos/kayaker1204/4319542459/

Slide 14

Slide 14

Page load time? To t a l d o w n l o a d s i z e ? Start render time? Time to first byte? Response time? To t a l H T T P r e q u e s t s ? Document load time? Tuesday, June 17, 14

What numbers?! http://www.flickr.com/photos/kayaker1204/4319542459/

Slide 15

Slide 15

Tuesday, June 17, 14

Slide 16

Slide 16

Tuesday, June 17, 14

Slide 17

Slide 17

Tuesday, June 17, 14

Slide 18

Slide 18

Tuesday, June 17, 14

Slide 19

Slide 19

Tuesday, June 17, 14

Slide 20

Slide 20

Tuesday, June 17, 14

Slide 21

Slide 21

Tuesday, June 17, 14

Slide 22

Slide 22

Load Time First Byte Start Render Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

Slide 23

Slide 23

Load Time First Byte Start Render Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

Slide 24

Slide 24

Load Time First Byte Start Render Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

Slide 25

Slide 25

Tuesday, June 17, 14

Measure and tracking trends http://www.flickr.com/photos/kayaker1204/4319542459/

Slide 26

Slide 26

Tuesday, June 17, 14

SpeedCurve http://speedcurve.com

Slide 27

Slide 27

Tuesday, June 17, 14

SpeedCurve http://speedcurve.com

Slide 28

Slide 28

Tuesday, June 17, 14

How to optimize http://www.flickr.com/photos/freefoto/2231356418/

Slide 29

Slide 29

Content-Encoding: gzip Cache-Control: max-age=315360000 Tuesday, June 17, 14

Web performance 101 http://www.flickr.com/photos/freefoto/2231356418/

Slide 30

Slide 30

Load Time First Byte Start Render Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

Optimizing: First byte http://www.flickr.com/photos/freefoto/2231356418/

Slide 31

Slide 31

DNS lookup TCP connect HTTP request Server time HTTP resp Tuesday, June 17, 14

Optimizing: First byte

Slide 32

Slide 32

DNS lookup TCP connect HTTP request Server time HTTP resp Tuesday, June 17, 14

Optimizing: First byte

Slide 33

Slide 33

DNS lookup TCP connect HTTP request Server time HTTP resp Tuesday, June 17, 14

Optimizing: First byte

Slide 34

Slide 34

DNS lookup TCP connect HTTP request Server time HTTP resp Tuesday, June 17, 14

Optimizing: First byte

Slide 35

Slide 35

DNS lookup TCP connect HTTP request Server time HTTP resp SSL Handshake Tuesday, June 17, 14

Optimizing: First byte

Slide 36

Slide 36

DNS lookup TCP connect HTTP request Server time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14

Optimizing: First byte

Slide 37

Slide 37

DNS lookup TCP connect HTTP request Server time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14

Optimizing: First byte

Slide 38

Slide 38

DNS lookup TCP connect HTTP request Server time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14

Optimizing: First byte

Slide 39

Slide 39

DNS lookup TCP connect HTTP request Server time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14

Optimizing: First byte

Slide 40

Slide 40

DNS lookup TCP connect HTTP request Server time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14

Optimizing: First byte

Slide 41

Slide 41

Eliminate redirects Just eleminate redirects Flush the document early? Prefetch DNS? But really, just eleminate redirects Tuesday, June 17, 14

Optimizing: First byte

Slide 42

Slide 42

Load Time First Byte Start Render Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

Optimizing: Start render http://www.flickr.com/photos/freefoto/2231356418/

Slide 43

Slide 43

HTML parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

Optimizing: Start render

Slide 44

Slide 44

HTML parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

Optimizing: Start render

Slide 45

Slide 45

Remote JS HTML parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

Optimizing: Start render

Slide 46

Slide 46

HTML parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

Optimizing: Start render

Slide 47

Slide 47

inline script waiting on remote CSS HTML parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

Optimizing: Start render

Slide 48

Slide 48

HTML parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

Optimizing: Start render

Slide 49

Slide 49

HTML parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

Optimizing: Start render

Slide 50

Slide 50

HTML parser DOM tree Layout Paint Render tree fetching remote stylesheets Tuesday, June 17, 14

Optimizing: Start render

Slide 51

Slide 51

HTML parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

Optimizing: Start render

Slide 52

Slide 52

HTML parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

Optimizing: Start render

Slide 53

Slide 53

HTML parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

Optimizing: Start render

Slide 54

Slide 54

HTML parser DOM tree Layout Paint Render tree Tuesday, June 17, 14

Optimizing: Start render

Slide 55

Slide 55

Avoid blocking scripts Tuesday, June 17, 14

Optimizing: Start render

Slide 56

Slide 56

< script

var script = document.createElement('script'); script. src = "app.js"; document.head.appendChild(script);

</ script

Tuesday, June 17, 14

Optimizing: Start render

Slide 57

Slide 57

< script

var script = document.createElement('script'); script. src = "app.js"; document.head.appendChild(script);

</ script

BREAKS THE PRE-PARSER! Tuesday, June 17, 14

Optimizing: Start render

Slide 58

Slide 58

HTML parser DOM tree Layout Paint Render tree HTML pre- parser Tuesday, June 17, 14

Optimizing: Start render

Slide 59

Slide 59

Remote JS HTML parser DOM tree Layout Paint Render tree HTML pre- parser Tuesday, June 17, 14

Optimizing: Start render

Slide 60

Slide 60

HTML parser DOM tree Layout Paint Render tree HTML pre- parser Tuesday, June 17, 14

Optimizing: Start render

Slide 61

Slide 61

HTML parser DOM tree Layout Paint Render tree HTML pre- parser fetching remote stylesheets Tuesday, June 17, 14

Optimizing: Start render

Slide 62

Slide 62

HTML parser DOM tree Layout Paint Render tree HTML pre- parser Tuesday, June 17, 14

Optimizing: Start render

Slide 63

Slide 63

< script

var script = document.createElement('script'); script. src = "app.js"; document.head.appendChild(script);

</ script

BREAKS THE PRE-PARSER! Tuesday, June 17, 14

Optimizing: Start render

Slide 64

Slide 64

< script

src

"app.js" async defer></ script

Tuesday, June 17, 14

Optimizing: Start render

Slide 65

Slide 65

Avoid blocking scripts Move script elements to end of

<body> Or... add async attribute to script elements Inline critical CSS Tuesday, June 17, 14

Optimizing: Start render

Slide 66

Slide 66

Avoid blocking scripts Move script elements to end of

<body> Or... add async attribute to script elements Inline critical CSS https://github.com/pocketjoso/penthouse Tuesday, June 17, 14

Optimizing: Start render

Slide 67

Slide 67

Load Time First Byte Start Render Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

Optimizing: Load time ! fully loaded http://www.flickr.com/photos/freefoto/2231356418/

Slide 68

Slide 68

gzip compression (of course!) Far-future caching (of course!) Concatenate files (of course!) Tuesday, June 17, 14

Optimizing: Load time ! fully loaded

Slide 69

Slide 69

Load Time First Byte Start Render Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14

Optimizing: Speed Index http://www.flickr.com/photos/freefoto/2231356418/

Slide 70

Slide 70

Tuesday, June 17, 14

http:// www.flickr.com/photos/vpickering/6824364286/

Resilience

Slide 71

Slide 71

Tuesday, June 17, 14

http:// www.flickr.com/photos/the_jorr/325224175/

Unreliable

Slide 72

Slide 72

this Tuesday, June 17, 14

http://www.flickr.com/photos/8040811@N06/3167877765

Progressive enhancement

Slide 73

Slide 73

Tuesday, June 17, 14

The future http://www.flickr.com/photos/kayaker1204/4319542459/

Slide 74

Slide 74

Tuesday, June 17, 14

Future: HTTP/2 ! SPDY

Slide 75

Slide 75

Multiplexing Cache pushing Tuesday, June 17, 14

Future: HTTP/2 ! SPDY

Slide 76

Slide 76

Tuesday, June 17, 14

Future: ServiceWorker

Slide 77

Slide 77

this.addEventListener( 'fetch' , function ( e ) {

if (e.request.url.host

'guardian.co.uk' ) { e.forwardTo( 'http://theguardian.com' ); } } (Possibly not possible) Tuesday, June 17, 14

Future: ServiceWorker

Slide 78

Slide 78

this.addEventListener( 'fetch' , function ( e ) {

if (window.innerWidth

  1. { e.forwardTo(e.request.url
  • '?width=large' ); } } (Possibly not possible) Tuesday, June 17, 14

Future: ServiceWorker

Slide 79

Slide 79

Tuesday, June 17, 14

Experiment and measure http://www.flickr.com/photos/kayaker1204/4319542459/

Slide 80

Slide 80

Theorize Experiment, and... Measure Tuesday, June 17, 14

Experiment and measure http://www.flickr.com/photos/kayaker1204/4319542459/

Slide 81

Slide 81

Thank-you! cc Tuesday, June 17, 14

http://lanyrd.com/sdbmhb @andyhume

Creative Commons Licensed Attribution, Non-Commercial, Share Alike