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

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

WHY CARE? Tuesday, June 17, 14

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

WHY CARE? Tuesday, June 17, 14

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

WHY CARE? Tuesday, June 17, 14

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

WHY CARE? Tuesday, June 17, 14

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

WHY CARE? Tuesday, June 17, 14

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

Tuesday, June 17, 14

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

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

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

Tuesday, June 17, 14

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

Tuesday, June 17, 14

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

Tuesday, June 17, 14

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

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/

Tuesday, June 17, 14

Tuesday, June 17, 14

Tuesday, June 17, 14

Tuesday, June 17, 14

Tuesday, June 17, 14

Tuesday, June 17, 14

Tuesday, June 17, 14

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

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

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

Tuesday, June 17, 14

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

Tuesday, June 17, 14

SpeedCurve http://speedcurve.com

Tuesday, June 17, 14

SpeedCurve http://speedcurve.com

Tuesday, June 17, 14

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

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

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

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/

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

Optimizing: First byte

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

Optimizing: First byte

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

Optimizing: First byte

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

Optimizing: First byte

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

Optimizing: First byte

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

Optimizing: First byte

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

Optimizing: First byte

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

Optimizing: First byte

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

Optimizing: First byte

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

Optimizing: First byte

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

Optimizing: First byte

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/

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

Avoid blocking scripts Tuesday, June 17, 14

Optimizing: Start render

< script

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

</ script

Tuesday, June 17, 14

Optimizing: Start render

< 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

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

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

Optimizing: Start render

< 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

< script

src

"app.js" async defer></ script

Tuesday, June 17, 14

Optimizing: Start render

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

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

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/

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

Optimizing: Load time ! fully loaded

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/

Tuesday, June 17, 14

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

Resilience

Tuesday, June 17, 14

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

Unreliable

this Tuesday, June 17, 14

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

Progressive enhancement

Tuesday, June 17, 14

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

Tuesday, June 17, 14

Future: HTTP/2 ! SPDY

Multiplexing Cache pushing Tuesday, June 17, 14

Future: HTTP/2 ! SPDY

Tuesday, June 17, 14

Future: ServiceWorker

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

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

if (window.innerWidth

{ e.forwardTo(e.request.url

'?width=large' ); } } (Possibly not possible) Tuesday, June 17, 14

Future: ServiceWorker

Tuesday, June 17, 14

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

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

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

Thank-you! cc Tuesday, June 17, 14

http://lanyrd.com/sdbmhb @andyhume

Creative Commons Licensed Attribution, Non-Commercial, Share Alike

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