Slide 1

Slide 1 text

E V E R Y M I L L I S E CO N D CO U N TS P E R F O R M A N C E A N D U S E R E X P E R I E N C E

Slide 2

Slide 2 text

D AV E Y S H A F I K • Developer • Author • Open Source Contributor • Release Manager for PHP 7.1 • @dshafik

Slide 3

Slide 3 text

h tt p : / /d e v e l o p e r. a ka m a i .co m

Slide 4

Slide 4 text

Let’s start a conversation about mental health in tech mhprompt.org

Slide 5

Slide 5 text

W H Y P E R FO R M A N C E M AT T E RS CC-BY-ND 2.0: Raymond June

Slide 6

Slide 6 text

A M A ZO N CC-BY 2.0: Thomas Shahan

Slide 7

Slide 7 text

LO S E S 1 % O F R E V E N U E P E R 1 0 0 M S S O U R C E : H T T P : / / R A D A R . O R E I L LY. C O M / 2 0 0 8 / 0 8 / R A D A R - T H E M E - W E B - O P S . H T M L

Slide 8

Slide 8 text

$ 8 8 9 , 9 0 0 , 0 0 0 2 0 1 4

Slide 9

Slide 9 text

1 2 . 5 ¢ FO R E V E R Y S I N G L E P E RS O N O N E A RT H 2 0 1 4

Slide 10

Slide 10 text

$ 2 . 7 9 P E R US C I T I Z E N 2 0 1 4

Slide 11

Slide 11 text

R E M I N D E R : P E R 1 0 0 M S S LO W E R !

Slide 12

Slide 12 text

G O O G L E CC-BY: Robert Scoble

Slide 13

Slide 13 text

0 . 5 S S LO W E R = 2 0 % L E SS S E A R C H E S S O U R C E : H T T P : / / G L I N D E N . B L O G S P O T. C O M / 2 0 0 6 / 1 1 / M A R I S S A - M AY E R - AT- W E B - 2 0 . H T M L

Slide 14

Slide 14 text

B I N G CC-BY-SA 2.0: badgreeb RECORDS

Slide 15

Slide 15 text

2 S S LO W E R = - 4 . 3 % R E V E N U E / U S E R S O U R C E : H T T P : / / V E L O C I T Y C O N F. C O M / V E L O C I T Y 2 0 0 9 / P U B L I C / S C H E D U L E / D E TA I L / 8 5 2 3

Slide 16

Slide 16 text

G Q CC-BY 2.0: BIAU Guillaume

Slide 17

Slide 17 text

CU T LOA D T I M E BY 8 0 % : T R A F F I C + 8 0 % & T I M E S P E N T + 3 2 % S O U R C E : H T T P : / / D I G I D AY. CO M / P U B L I S H E RS /G Q - CO M - CU T- PA G E - LOA D -T I M E - 8 0 - P E R C E N T/

Slide 18

Slide 18 text

M O R E

Slide 19

Slide 19 text

• WALMART: 1s improvement = 2% increase in conversions • ETSY: +160KB of images mobile site = 12% increase in bounce rate • STAPLES: 1s improvement = 10% increase in conversions S O U R C E : H T T P : / / W W W. S L I D E S H A R E . N E T/C L I F FC R O C K E R / V E LO C I TY- N Y- H O W-TO - M E A S U R E - R E V E N U E - I N - M I L L I S E CO N D S S O U R C E : H T T P : / / R A D A R . O R E I L LY. CO M / 2 0 1 4 / 0 1 / W E B - P E R FO R M A N C E - I S - US E R- E X P E R I E N C E . H T M L S O U R C E : H T T P : / / W W W. S L I D E S H A R E . N E T/ D E VO N AU E RS W A L D/ W A L M A RT- PA G E S P E E D S L I D E

Slide 20

Slide 20 text

CO N C LUS I O N

Slide 21

Slide 21 text

US E RS C A N P E R C E I V E T I N Y C H A N G E S I N P E R F O R M A N C E A S L I T T L E A S 1 4 M S

Slide 22

Slide 22 text

S LO W E R S I T E S M A K E CUSTO M E RS L E SS H A P P Y

Slide 23

Slide 23 text

L E SS H A P PY = P O O R US E R E X P E R I E N C E

Slide 24

Slide 24 text

YO U P R O B A B LY N OT I C E D I T YO U RS E L F…

Slide 25

Slide 25 text

1 0 S E CO N D S I S A N E T E R N I TY

Slide 26

Slide 26 text

M O B I L E : 5 3 % B O U N C E A F T E R 3 S S O U R C E : H T T P S : / / W W W. S OA STA . CO M / B LO G /G O O G L E - M O B I L E -W E B - P E R F O R M A N C E -ST U DY/

Slide 27

Slide 27 text

W H O I S R E S P O N S I B L E FO R P E R FO R M A N C E ? CC-BY 2.0: davetoaster

Slide 28

Slide 28 text

E V E R YO N E ! CC-BY 2.0: James Cridland

Slide 29

Slide 29 text

E V E R YO N E ! • Designers • Sysadmins/Devops • Backend Developers • Frontend Developers • Browser Vendors

Slide 30

Slide 30 text

W H AT M A K E S A W E B PA G E ? CC-BY-SA 2.0: Susanne Nilsson

Slide 31

Slide 31 text

TOTA L PA G E W E I G H T D I ST R I B U T I O N HTTP Archive – September 2015 http://httparchive.org/trends.php Fonts 5% CSS 3% JS 17% HTML 3% Images 63% Other 9%

Slide 32

Slide 32 text

TOTA L PA G E W E I G H T ( M B ) 0-1MB 1-2MB 2-3MB 3-4MB 4-5MB 5-6MB 6-8MB 3% 2% 4% 8% 15% 28% 36%

Slide 33

Slide 33 text

TOTA L R E Q U E STS P E R PA G E 1-25 26-50 51-75 76-100 101-125 126-150 > 150 15% 8% 12% 16% 18% 16% 11%

Slide 34

Slide 34 text

D E S I G N E RS CC-BY 2.0: Cliff Hutson

Slide 35

Slide 35 text

CO M P R E SS YO U R I M AG E S ( O R D E V E LO P E RS W I L L D O I T FO R YO U ! )

Slide 36

Slide 36 text

SYS A D M I N S / D E V O P S CC-BY-SA 2.0: Bjorn Watland

Slide 37

Slide 37 text

E N A B L E H T T P/ 2

Slide 38

Slide 38 text

L E T ’ S E N C R Y PT ! CC-BY: Jason Baker

Slide 39

Slide 39 text

L E TS E N C R Y PT. O R G Attribution

Slide 40

Slide 40 text

L E TS E N C R Y PT. O R G • Free (as in beer) • Automatic • Secure • Transparent • Open • Cooperative

Slide 41

Slide 41 text

U S E T H E C LO U D TO S C A L E B A S E D 
 O N P E R C E I V E D P E R F O R M A N C E CC-BY 2.0: Steve Jurvetson

Slide 42

Slide 42 text

S C A L E D B A S E D O N P E R C E I V E D P E R F O R M A N C E • Resource usage doesn’t tell you the whole story • Use SpeedIndex scores as an additional metric to determine scaling thresholds • Use marcelduran / webpagetest-api (node)

Slide 43

Slide 43 text

var WebPageTest = require('webpagetest'); var http = require('http'); var wpt = new WebPageTest('www.webpagetest.org', ‘KEY HERE'); wpt.runTest('https://daveyshafik.com', {pageSpeed: true}, function(err, data) { console.log("Test results at: " + data.data.jsonUrl); checkResponse(data.data.jsonUrl); }); function checkResponse(reportUrl) { http.get(reportUrl, function(response) { var responseData = ''; response.on('data', function(data) { responseData += data; }); response.on('end', function() { var data = JSON.parse(responseData); if (data.statusCode == 200) { console.log("First view: " + data.data.average.firstView.SpeedIndex); console.log("Repeat view: " + data.data.average.repeatView.SpeedIndex); } else { console.log(data.statusText); setTimeout(function () { checkResponse(reportUrl); }, 5000); } }); }); }

Slide 44

Slide 44 text

var WebPageTest = require('webpagetest'); var http = require('http'); var wpt = new WebPageTest('www.webpagetest.org', ‘KEY HERE'); wpt.runTest('https://daveyshafik.com', {pageSpeed: true}, function(err, data) { console.log("Test results at: " + data.data.jsonUrl); checkResponse(data.data.jsonUrl); }); function checkResponse(reportUrl) { http.get(reportUrl, function(response) { var responseData = ''; response.on('data', function(data) { responseData += data; }); response.on('end', function() { var data = JSON.parse(responseData);

Slide 45

Slide 45 text

var WebPageTest = require('webpagetest'); var http = require('http'); var wpt = new WebPageTest('www.webpagetest.org', ‘KEY HERE'); wpt.runTest('https://daveyshafik.com', {pageSpeed: true}, function(err, data) { console.log("Test results at: " + data.data.jsonUrl); checkResponse(data.data.jsonUrl); }); function checkResponse(reportUrl) { http.get(reportUrl, function(response) { var responseData = ''; response.on('data', function(data) { responseData += data; }); response.on('end', function() { var data = JSON.parse(responseData);

Slide 46

Slide 46 text

var WebPageTest = require('webpagetest'); var http = require('http'); var wpt = new WebPageTest('www.webpagetest.org', ‘KEY HERE'); wpt.runTest('https://daveyshafik.com', {pageSpeed: true}, function(err, data) { console.log("Test results at: " + data.data.jsonUrl); checkResponse(data.data.jsonUrl); }); function checkResponse(reportUrl) { http.get(reportUrl, function(response) { var responseData = ''; response.on('data', function(data) { responseData += data; }); response.on('end', function() { var data = JSON.parse(responseData);

Slide 47

Slide 47 text

function checkResponse(reportUrl) { http.get(reportUrl, function(response) { var responseData = ''; response.on('data', function(data) { responseData += data; }); response.on('end', function() { var data = JSON.parse(responseData); if (data.statusCode == 200) { console.log("First view: " + data.data.average.firstView.SpeedIndex); console.log("Repeat view: " + data.data.average.repeatView.SpeedIndex); } else { console.log(data.statusText); setTimeout(function () { checkResponse(reportUrl); }, 5000); } }); }); }

Slide 48

Slide 48 text

function checkResponse(reportUrl) { http.get(reportUrl, function(response) { var responseData = ''; response.on('data', function(data) { responseData += data; }); response.on('end', function() { var data = JSON.parse(responseData); if (data.statusCode == 200) { console.log("First view: " + data.data.average.firstView.SpeedIndex); console.log("Repeat view: " + data.data.average.repeatView.SpeedIndex); } else { console.log(data.statusText); setTimeout(function () { checkResponse(reportUrl); }, 5000); } }); }); }

Slide 49

Slide 49 text

function checkResponse(reportUrl) { http.get(reportUrl, function(response) { var responseData = ''; response.on('data', function(data) { responseData += data; }); response.on('end', function() { var data = JSON.parse(responseData); if (data.statusCode == 200) { console.log("First view: " + data.data.average.firstView.SpeedIndex); console.log("Repeat view: " + data.data.average.repeatView.SpeedIndex); } else { console.log(data.statusText); setTimeout(function () { checkResponse(reportUrl); }, 5000); } }); }); }

Slide 50

Slide 50 text

function checkResponse(reportUrl) { http.get(reportUrl, function(response) { var responseData = ''; response.on('data', function(data) { responseData += data; }); response.on('end', function() { var data = JSON.parse(responseData); if (data.statusCode == 200) { console.log("First view: " + data.data.average.firstView.SpeedIndex); console.log("Repeat view: " + data.data.average.repeatView.SpeedIndex); } else { console.log(data.statusText); setTimeout(function () { checkResponse(reportUrl); }, 5000); } }); }); }

Slide 51

Slide 51 text

function checkResponse(reportUrl) { http.get(reportUrl, function(response) { var responseData = ''; response.on('data', function(data) { responseData += data; }); response.on('end', function() { var data = JSON.parse(responseData); if (data.statusCode == 200) { console.log("First view: " + data.data.average.firstView.SpeedIndex); console.log("Repeat view: " + data.data.average.repeatView.SpeedIndex); } else { console.log(data.statusText); setTimeout(function () { checkResponse(reportUrl); }, 5000); } }); }); }

Slide 52

Slide 52 text

function checkResponse(reportUrl) { http.get(reportUrl, function(response) { var responseData = ''; response.on('data', function(data) { responseData += data; }); response.on('end', function() { var data = JSON.parse(responseData); if (data.statusCode == 200) { console.log("First view: " + data.data.average.firstView.SpeedIndex); console.log("Repeat view: " + data.data.average.repeatView.SpeedIndex); } else { console.log(data.statusText); setTimeout(function () { checkResponse(reportUrl); }, 5000); } }); }); }

Slide 53

Slide 53 text

function checkResponse(reportUrl) { http.get(reportUrl, function(response) { var responseData = ''; response.on('data', function(data) { responseData += data; }); response.on('end', function() { var data = JSON.parse(responseData); if (data.statusCode == 200) { console.log("First view: " + data.data.average.firstView.SpeedIndex); console.log("Repeat view: " + data.data.average.repeatView.SpeedIndex); } else { console.log(data.statusText); setTimeout(function () { checkResponse(reportUrl); }, 5000); } }); }); }

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

B A C K E N D D E V E LO P E RS CC-BY 2.0: Bobo Boom

Slide 56

Slide 56 text

C A C H E A G G R E S S I V E LY CC-BY: Travis Wise

Slide 57

Slide 57 text

D ATA B A S E C AC H I N G

Slide 58

Slide 58 text

D ATA B A S E C AC H I N G • Memcache • Cassandra

Slide 59

Slide 59 text

F U L L PAG E C AC H I N G

Slide 60

Slide 60 text

F U L L PA G E C A C H I N G • Memcache • Cassandra • Varnish • Squid

Slide 61

Slide 61 text

E D G E S I D E I N C LU D E S ( E S I )

Slide 62

Slide 62 text

E D G E S I D E I N C LU D E S • Created by Akamai (and some other companies) • Partially supported by Varnish, Squid, and others • Uses special HTML tags to cache fragments of pages differently than rest of the page • e.g. no caching, different TTL, per user session, or per geographic area

Slide 63

Slide 63 text

E X A M P L E E D G E S I D E I N C LU D E : LO G I N Hello!

Slide 64

Slide 64 text

E X A M P L E E D G E S I D E I N C LU D E : LO G I N Hello!

Slide 65

Slide 65 text

E X A M P L E E D G E S I D E I N C LU D E : LO G I N Hello!

Slide 66

Slide 66 text

I M AG E S

Slide 67

Slide 67 text

F O R M AT N E G OT I AT I O N

Slide 68

Slide 68 text

J P E G X R W E B P ɂ Ʌɚ

Slide 69

Slide 69 text

CO M P R E SS I O N

Slide 70

Slide 70 text

J P E G L E V E LS : 0 - 1 0 0 T H E Y ’ R E W H AT E V E R T H E E N CO D E R W A N TS T H E M TO M E A N

Slide 71

Slide 71 text

P E R C E I V E D Q UA L I TY

Slide 72

Slide 72 text

Q UA L I TY H U M A N S C A N S E E P E R C E I V E D Q UA L I TY

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

O R I G I N A L : 1 6 . 8 M B

Slide 75

Slide 75 text

9 0 : 5 . 8 M B

Slide 76

Slide 76 text

8 0 : 4 . 2 M B

Slide 77

Slide 77 text

7 0 : 3 . 2 M B

Slide 78

Slide 78 text

6 0 : 2 . 5 M B

Slide 79

Slide 79 text

5 0 : 1 . 9 M B

Slide 80

Slide 80 text

4 0 : 1 . 4 M B

Slide 81

Slide 81 text

3 0 : 1 . 2 M B

Slide 82

Slide 82 text

2 0 : 9 5 0 K B

Slide 83

Slide 83 text

1 0 : 5 9 4 K B

Slide 84

Slide 84 text

0 : 3 9 3 K B

Slide 85

Slide 85 text

O R I G I N A L

Slide 86

Slide 86 text

0

Slide 87

Slide 87 text

SS I M S T R U CT U R A L S I M I L A R I TY I M AG E

Slide 88

Slide 88 text

E M M Y A W A R D W I N N I N G A LG O R I T H M Zhou Wang, Alan C. Bovik, Hamid R. Sheikh, and Eero P. Simoncelli

Slide 89

Slide 89 text

SS I M A LG O R I T H M • Brightness • Contrast • Structure • Fast

Slide 90

Slide 90 text

D SS I M ST R U CT U R A L D I SS I M I L A R I TY: D I STA N C E M E T R I C D E R I V E D F R O M SS I M

Slide 91

Slide 91 text

AUTOPLAY

Slide 92

Slide 92 text

0.009273 /images/90.png 0.008136 /images/80.png 0.009007 /images/70.png 0.010287 /images/60.png 0.012078 /images/50.png 0.014768 /images/40.png 0.017413 /images/30.png 0.020712 /images/20.png 0.028642 /images/10.png 0.038585 /images/0.png

Slide 93

Slide 93 text

P E R C E PT I V E Q UA L I TY T H R E S H O L D

Slide 94

Slide 94 text

Original: 14.1MB 80: 0.008136 4.6MB 30: 0.017413 1.2MB 50: 0.012078 1.9MB

Slide 95

Slide 95 text

-91.4%

Slide 96

Slide 96 text

F R O N T E N D D E V E LO P E RS CC-BY 2.0: Bill Jacobus

Slide 97

Slide 97 text

P R E D I CT I V E B R O W S I N G

Slide 98

Slide 98 text

P R E B R O W S I N G

Slide 99

Slide 99 text

P R E B R O W S I N G 1. DNS Prefetch 2. TCP Preconnect 3. Prefetch 4. Prerender

Slide 100

Slide 100 text

D N S P R E F E TC H TC P P R E CO N N E CT P R E LOA D P R E R E N D E R ɐ Ɇ Ȑ  ɂ 10.0.0.1 127.0.0.1

Slide 101

Slide 101 text

D N S P R E F E TC H

Slide 102

Slide 102 text

D N S P R E F E TC H

Slide 103

Slide 103 text

D N S P R E F E TC H

Slide 104

Slide 104 text

D N S P R E F E TC H

Slide 105

Slide 105 text

P R E CO N N E CT

Slide 106

Slide 106 text

P R E F E TC H

Slide 107

Slide 107 text

P R E F E TC H

Slide 108

Slide 108 text

P R E R E N D E R

Slide 109

Slide 109 text

W A R N I N G ! CC-BY 2.0: Robert Couse-Baker

Slide 110

Slide 110 text

1-25 26-50 51-75 76-100 101-125 126-150 > 150 15% 8% 12% 16% 18% 16% 11% 0-1MB 1-2MB 2-3MB 3-4MB 4-5MB 5-6MB 6-8MB 3% 2% 4% 8% 15% 28% 36% Fonts 5% CSS 3% JS 17% HTML 3% Images 63% Other 9% YO U H AV E TO R E N D E R T H E E N T I R E PAG E !

Slide 111

Slide 111 text

R E L = P R E LOA D

Slide 112

Slide 112 text

P R E F E TC H VS P R E LO A D

Slide 113

Slide 113 text

P R E LOA D V S P R E F E TC H • prefetch is an optional and low-priority fetch for a resource that might be used by a subsequent navigation • preload is a mandatory and high-priority fetch for a resource that is necessary for the current navigation • preload is typically sent as a header, rather than a tag

Slide 114

Slide 114 text

L I N K H E A D E R Link: /resource; rel=preload

Slide 115

Slide 115 text

N E W A R C H I T E CT U R E S

Slide 116

Slide 116 text

H T T P/ 1 . X S U C K S CC-BY: Flóra Soós

Slide 117

Slide 117 text

H T T P/ 1 . X S U C K S • Minify + Concat JavaScript and CSS • Inlining small JavaScript and CSS • Using image sprites • Using data: URIs • Domain sharding

Slide 118

Slide 118 text

T H E S E T H I N G S A R E A L L " C L E V E R " H AC K S CC-BY: Matt Biddulph

Slide 119

Slide 119 text

M U LT I P L E X I N G CC-BY: Alosh Bennett C A N U S E O N E C O N N E C T I O N F O R P A R A L L E L R E Q U E S T S

Slide 120

Slide 120 text

S E R V E R P US H CC-BY: Steven Depolo

Slide 121

Slide 121 text

D E P E N D E N C I E S CC-BY-SA 2.0: David Gamez

Slide 122

Slide 122 text

W E I G H TS CC-BY 2.0: Tri Vu Dao

Slide 123

Slide 123 text

D E L I V E R I N G A PAG E

Slide 124

Slide 124 text

PAG E A SS E TS GET /index.html 200 OK text/html Ɇ ɂ Ȑ

Slide 125

Slide 125 text

PAG E A SS E TS Ɇ Ȑ ɂ GET /index.html 200 OK text/html critical-path.css critical-path.js logo.svg font.eot styles.css main.js

Slide 126

Slide 126 text

I N S U M M A R Y

Slide 127

Slide 127 text

P E R F O R M A N C E M AT T E RS

Slide 128

Slide 128 text

T I M E = M O N E Y

Slide 129

Slide 129 text

T I M E = U S E R S AT I S FA CT I O N = M O N E Y

Slide 130

Slide 130 text

P E R F O R M A N C E = US E R E X P E R I E N C E

Slide 131

Slide 131 text

F E E D B AC K & Q U E ST I O N S Feedback: Twitter: Email: Slides: https://joind.in/talk/ @dshafik [email protected] http://daveyshafik.com/slides ed949