A presentation at Smashing Conference in in New York, NY, USA by Andy Hume
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
"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, 14Optimizing: 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, 14Optimizing: 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 ) {
'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
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 PERFORMANCE AND RESILIENCE The case for fast loading websites has been made. We can point to case studies from companies like Amazon, Google, and Yahoo, linking page speed to increased revenue and profit (although it never hurts to remind ourselves!). Businesses understand this, and orders are coming from the top of the organization to speed up the site. So now we've decided to prioritize performance, what should we actually do? What should we be measuring? How should we be measuring it? And where do we start improving things?
This talk will focus on architecting high performance, resilient front-ends. It will look end-to-end at how web pages get from a server to the screen on a user's device. It will cover how to prioritize and optimize that process, and look at tools for measuring and monitoring the right performance metrics over time, as well as other lessons from Andy's recent work on large scale sites like the Guardian and Twitter.
for free. You
can too.