[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.

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

8. £ 6 1 3 , 4 7 0 , 3 3 6
   2 0 1 4
   

   View Slide

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
   

   View Slide

10. £ 9 . 5 9 P E R U K C I T I Z E N
    2 0 1 4
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

16. G Q
    CC-BY 2.0: BIAU Guillaume
    

    View Slide

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/
    

    View Slide

18. M O R E
    

    View Slide

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
    

    View Slide

20. CO N C LUS I O N
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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%
    

    View Slide

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%
    

    View Slide

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%
    

    View Slide

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

    View Slide

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

    View Slide

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 ! )
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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)
    

    View Slide

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);
    }
    });
    });
    }
    

    View Slide

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);
    

    View Slide

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);
    

    View Slide

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);
    

    View Slide

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);
    

    View Slide

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);
    }
    });
    });
    }
    

    View Slide

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);
    }
    });
    });
    }
    

    View Slide

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);
    }
    });
    });
    }
    

    View Slide

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);
    }
    });
    });
    }
    

    View Slide

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);
    }
    });
    });
    }
    

    View Slide

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);
    }
    });
    });
    }
    

    View Slide

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);
    }
    });
    });
    }
    

    View Slide

55. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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 Fallback
    include('view/esi/login.fallback.phtml');
    ?>
    
    

    View Slide

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 Fallback
    include('view/esi/login.fallback.phtml');
    ?>
    
    

    View Slide

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 Fallback
    include('view/esi/login.fallback.phtml');
    ?>
    
    

    View Slide

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 Fallback
    include('view/esi/login.fallback.phtml');
    ?>
    
    

    View Slide

68. I M AG E CO M P R E SS I O N
    

    View Slide

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

    View Slide

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

    View Slide

71. CO M P R E SS I O N
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

75. View Slide

76. View Slide

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

    View Slide

78. 9 0 : 5 . 8 M B
    

    View Slide

79. 8 0 : 4 . 2 M B
    

    View Slide

80. 7 0 : 3 . 2 M B
    

    View Slide

81. 6 0 : 2 . 5 M B
    

    View Slide

82. 5 0 : 1 . 9 M B
    

    View Slide

83. 4 0 : 1 . 4 M B
    

    View Slide

84. 3 0 : 1 . 2 M B
    

    View Slide

85. 2 0 : 9 5 0 K B
    

    View Slide

86. 1 0 : 5 9 4 K B
    

    View Slide

87. 0 : 3 9 3 K B
    

    View Slide

88. O R I G I N A L
    

    View Slide

89. View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

94. 9 0 : 0 . 0 0 9 2 7 3 5 . 8 M B
    

    View Slide

95. 8 0 : 0 . 0 0 8 1 3 6 4 . 2 M B
    

    View Slide

96. 7 0 : 0 . 0 0 9 0 0 7 3 . 2 M B
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

101. 2 0 : 0 . 0 2 0 7 1 2 9 4 8 K B
     

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

107. -91.4%
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

112. Ɇ
     ɂ
     

     View Slide

113. D N S P R E F E TC H
     ɐ
     Ɇ
     ɂ
     10.0.0.1
     127.0.0.1
     

     View Slide

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

     View Slide

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

     View Slide

116. P R E R E N D E R
     ɐ
     Ɇ Ȑ
     
     ɂ
     10.0.0.1
     127.0.0.1
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

121. P R E CO N N E CT
     

     View Slide

122. 
     
     
     P R E CO N N E CT
     

     View Slide

123. P R E F E TC H
     

     View Slide

124. 
     
     
     P R E CO N N E CT
     

     View Slide

125. P R E R E N D E R
     

     View Slide

126. 
     
     
     P R E CO N N E CT
     

     View Slide

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

     View Slide

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 !
     

     View Slide

129. R E L = P R E LOA D
     

     View Slide

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

     View Slide

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 tag
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

140. PAG E A SS E TS
     Ɇ
     ɂ
     Ȑ
     

     View Slide

141. PAG E A SS E TS
     Ɇ
     ɂ
     Ȑ
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

150. I N S U M M A R Y
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide