[PHPUK16] Every Millisecond Counts: Performance & UX

Fee39f0c0ffb29d9ac21607ed188be6b?s=47 Davey Shafik
February 18, 2016

[PHPUK16] Every Millisecond Counts: Performance & UX

How do you lose 900 million dollars in 100ms? Or 8 million visits in just 4/10 of a second?

User expectations are higher than ever when it comes to web performance, so much so that we've created an entirely new application architecture just to make it feel like our websites are faster than they actually are.

This talk will look at how we can improve our users experience at any scale through performance optimizations at every layer of the stack, from backend to browser.

Fee39f0c0ffb29d9ac21607ed188be6b?s=128

Davey Shafik

February 18, 2016
Tweet

Transcript

  1. 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
  2. D AV E Y S H A F I K

    • Author of Zend PHP 5 Certification Study Guide, O’Reillys Upgrading to PHP7, Sitepoints PHP Anthology: 101 Essential Tips, Tricks & Hacks & PHP Master: Write Cutting Edge Code • A contributor to Zend Framework 1 & 2, phpdoc, & PHP internals • Original creator of PHAR/ PHP_Archive • @dshafik
  3. h tt p : / /d e v e l

    o p e r. a ka m a i .co m
  4. Let’s start a conversation about mental health in tech mhprompt.org

  5. 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
  6. A M A ZO N CC-BY 2.0: Thomas Shahan

  7. 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
  8. £ 6 1 3 , 4 7 0 , 3

    3 6 2 0 1 4
  9. 8 P 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
  10. £ 9 . 5 9 P E R U K

    C I T I Z E N 2 0 1 4
  11. R E M I N D E R : P

    E R 1 0 0 M S S LO W E R !
  12. G O O G L E CC-BY: Robert Scoble

  13. 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 A Y E R - A T- W E B - 2 0 . H T M L
  14. B I N G CC-BY-SA 2.0: badgreeb RECORDS

  15. 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
  16. G Q CC-BY 2.0: BIAU Guillaume

  17. 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/
  18. M O R E

  19. • 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
  20. CO N C LUS I O N

  21. 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 0 0 M S
  22. 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
  23. L E SS H A P PY = P O

    O R US E R E X P E R I E N C E
  24. YO U P R O B A B LY N

    OT I C E D I T YO U RS E L F…
  25. 1 0 S E CO N D S I S

    A N E T E R N I TY
  26. 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
  27. E V E R YO N E ! CC-BY 2.0:

    James Cridland
  28. E V E R YO N E ! • Designers

    • Sysadmins/Devops • Backend Developers • Frontend Developers • Browser Vendors
  29. W H AT M A K E S A W

    E B PA G E ? CC-BY-SA 2.0: Susanne Nilsson
  30. 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%
  31. 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%
  32. 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%
  33. D E S I G N E RS CC-BY 2.0:

    Cliff Hutson
  34. CO M P R E SS YO U R I

    M AG E S
  35. CO M P R E SS YO U R I

    M AG E S ( O R W E ’ L L D O I T FO R YO U ! )
  36. SYS A D M I N S / D E

    V O P S CC-BY-SA 2.0: Bjorn Watland
  37. E N A B L E H T T P/

    2
  38. L E T ’ S E N C R Y

    PT ! CC-BY: Jason Baker
  39. L E TS E N C R Y PT. O

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

    R G • Free (as in beer) • Automatic • Secure • Transparent • Open • Cooperative
  41. 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
  42. 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)
  43. 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); } }); }); }
  44. 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);
  45. 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);
  46. 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);
  47. 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);
  48. 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); } }); }); }
  49. 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); } }); }); }
  50. 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); } }); }); }
  51. 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); } }); }); }
  52. 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); } }); }); }
  53. 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); } }); }); }
  54. 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); } }); }); }
  55. None
  56. B A C K E N D D E V

    E LO P E RS CC-BY 2.0: Bobo Boom
  57. C A C H E A G G R E

    S S I V E LY CC-BY: Travis Wise
  58. D ATA B A S E C AC H I

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

    N G • Memcache • Cassandra
  60. F U L L PAG E C AC H I

    N G
  61. F U L L PA G E C A C

    H I N G • Memcache • Cassandra • Varnish • Squid
  62. E D G E S I D E I N

    C LU D E S ( E S I )
  63. 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
  64. 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 <esi:include src="view/esi/login.phtml"/> <esi:remove> <?php // ESI Fallback include('view/esi/login.fallback.phtml'); ?> </esi:remove>
  65. 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 <esi:include src="view/esi/login.phtml"/> <esi:remove> <?php // ESI Fallback include('view/esi/login.fallback.phtml'); ?> </esi:remove>
  66. 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 <esi:include src="view/esi/login.phtml"/> <esi:remove> <?php // ESI Fallback include('view/esi/login.fallback.phtml'); ?> </esi:remove>
  67. 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 <esi:include src="view/esi/login.phtml"/> <esi:remove> <?php // ESI Fallback include('view/esi/login.fallback.phtml'); ?> </esi:remove>
  68. I M AG E CO M P R E SS

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

    AT I O N
  70. J P E G X R W E B P

    ɂ Ʌɚ
  71. CO M P R E SS I O N

  72. 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
  73. P E R C E I V E D Q

    UA L I TY
  74. 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
  75. None
  76. None
  77. O R I G I N A L : 1

    6 . 8 M B
  78. 9 0 : 5 . 8 M B

  79. 8 0 : 4 . 2 M B

  80. 7 0 : 3 . 2 M B

  81. 6 0 : 2 . 5 M B

  82. 5 0 : 1 . 9 M B

  83. 4 0 : 1 . 4 M B

  84. 3 0 : 1 . 2 M B

  85. 2 0 : 9 5 0 K B

  86. 1 0 : 5 9 4 K B

  87. 0 : 3 9 3 K B

  88. O R I G I N A L

  89. 0

  90. 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
  91. 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
  92. SS I M A LG O R I T H

    M • Brightness • Contrast • Structure • Fast
  93. 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
  94. 9 0 : 0 . 0 0 9 2 7

    3 5 . 8 M B
  95. 8 0 : 0 . 0 0 8 1 3

    6 4 . 2 M B
  96. 7 0 : 0 . 0 0 9 0 0

    7 3 . 2 M B
  97. 6 0 : 0 . 0 1 0 2 8

    7 2 . 5 M B
  98. 5 0 : 0 . 0 1 2 0 7

    8 1 . 9 M B
  99. 4 0 : 0 . 0 1 4 7 6

    8 1 . 4 M B
  100. 3 0 : 0 . 0 1 7 4 1

    3 1 . 2 M B
  101. 2 0 : 0 . 0 2 0 7 1

    2 9 4 8 K B
  102. 1 0 : 0 . 0 2 8 6 4

    2 5 9 2 K B
  103. 0 : 0 . 0 3 8 5 8 5

    3 9 2 K B
  104. 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
  105. P E R C E PT I V E Q

    UA L I TY T H R E S H O L D
  106. Original: 14.1MB 80: 0.008136 4.6MB 30: 0.017413 1.2MB 50: 0.012078

    1.9MB
  107. -91.4%

  108. F R O N T E N D D E

    V E LO P E RS CC-BY 2.0: Bill Jacobus
  109. P R E D I CT I V E B

    R O W S I N G
  110. P R E B R O W S I N

    G
  111. P R E B R O W S I N

    G 1. DNS Prefetch 2. TCP Preconnect 3. Prefetch 4. Prerender
  112. Ɇ ɂ

  113. D N S P R E F E TC H

    ɐ Ɇ ɂ 10.0.0.1 127.0.0.1
  114. TC P P R E CO N N E CT

    ɐ Ɇ Ȑ ɂ 10.0.0.1 127.0.0.1
  115. P R E LOA D ɐ Ɇ Ȑ ɂ 10.0.0.1

    127.0.0.1
  116. P R E R E N D E R ɐ

    Ɇ Ȑ  ɂ 10.0.0.1 127.0.0.1
  117. D N S P R E F E TC H

  118. <head> <link rel="dns-prefetch" href="//example.org"> </head> D N S P R

    E F E TC H
  119. <head> <link rel="dns-prefetch" href="//example.org"> </head> D N S P R

    E F E TC H
  120. <head> <link rel="dns-prefetch" href="//example.org"> </head> D N S P R

    E F E TC H
  121. P R E CO N N E CT

  122. <head> <link rel="preconnect" href="https://example.org"> </head> P R E CO N

    N E CT
  123. P R E F E TC H

  124. <head> <link rel="prefetch" href="/page/2"> </head> P R E CO N

    N E CT
  125. P R E R E N D E R

  126. <head> <link rel="prerender" href="/page/2"> </head> P R E CO N

    N E CT
  127. W A R N I N G ! CC-BY 2.0:

    Robert Couse-Baker
  128. 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 !
  129. R E L = P R E LOA D

  130. P R E F E TC H VS P R

    E LO A D
  131. 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 <link> tag
  132. L I N K H E A D E R

    Link: /resource; rel=preload
  133. N E W A R C H I T E

    CT U R E S
  134. H T T P/ 1 . X S U C

    K S CC-BY: Flóra Soós
  135. 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
  136. 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
  137. 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
  138. S E R V E R P US H CC-BY:

    Steven Depolo
  139. D E L I V E R I N G

    A PAG E
  140. PAG E A SS E TS Ɇ ɂ Ȑ

  141. PAG E A SS E TS Ɇ ɂ Ȑ

  142. PAG E A SS E TS GET /index.html Ɇ ɂ

    Ȑ
  143. PAG E A SS E TS GET /index.html 200 OK

    text/html Ɇ ɂ Ȑ
  144. PAG E A SS E TS Ɇ Ȑ ɂ GET

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

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

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

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

    /index.html 200 OK text/html critical-path.css critical-path.js logo.svg font.eot main.js splash.jpg
  149. 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 splash.jpg
  150. I N S U M M A R Y

  151. P E R F O R M A N C

    E M AT T E RS
  152. T I M E = M O N E Y

  153. T I M E = U S E R S

    AT I S FA CT I O N = M O N E Y
  154. P E R F O R M A N C

    E = US E R E X P E R I E N C E
  155. F E E D B AC K & Q U

    E ST I O N S Feedback: Twitter: Email: Slides: https://joind.in/ @dshafik dshafik@akamai.com http://daveyshafik.com/slides 16379