Building Fast Websites Against All Odds – Making Software 2018

Fast website performance is essential for a great user experience, particularly in rural areas or emerging markets where poor connectivity and low-power devices can struggle with even the most optimised sites, yet it can still seem impossible to convince clients and stakeholders of the value that performance holds.

Now, I can’t promise that I can magically transform your clients’ attitudes toward performance, but what I can do show is show you how to build a fast website without even involving them. In my work delivering high-performance, high-availability websites for some of the UK’s biggest retailers, I’ve come up with a wealth of ways in which we as front-end developers can improve performance without the need for any costly rewrites, new infrastructure, or any kind of work that requires permission (and budget!).

We may not be able to make the fastest website without permission, but we can certainly make a fast one!

Transcript

1. Making Software, Kraków 2018
   Building fast websites
   against all odds
   Photo by Emil Vilsek on Unsplash
   Slides – twnsnd.com/makingsoftware2018
   

   View Slide

2. Who am I?
   Ryan Townsend
   CTO, SHIFT
   @ryantownsend
   

   View Slide

3. View Slide

4. View Slide

5. Performance is pretty important…
   ‘Why Fast Matters’ by @csswizardry – https://bit.ly/2kiVDAz
   

   View Slide

6. Traffic x Conversion Rate x AOV
   =
   

   View Slide

7. Performance = Traffic
   

   View Slide

8. “The result of rebuilding our pages for
   performance led to [...] a 15 percent
   increase in SEO traffic”
   – Pinterest
   Source – https://bit.ly/2ICPv4Z
   

   View Slide

9. “[…] starting in July 2018, page speed will
   be a ranking factor for mobile searches.”
   – Google #SpeedUpdate
   Source – https://bit.ly/2Dt5Plz
   

   View Slide

10. Performance = Conversion
    

    View Slide

11. “For every 100ms decrease in homepage load
    speed, Mobify's customer base saw a 1.11% lift in
    session based conversion, amounting to an
    average annual revenue increase of $376,789”
    – Mobify
    Source – https://bit.ly/2s0FDHS
    

    View Slide

12. “Similarly, for every 100ms decrease in checkout
    page load speed, Mobify's customers saw a 1.55%
    lift in session based conversion, amounting to an
    average annual revenue increase of $526,147”
    – Mobify
    Source – https://bit.ly/2s0FDHS
    

    View Slide

13. Performance = AOV
    

    View Slide

14. +9.6% pages/session
    

    View Slide

15. +8.7% AOV
    

    View Slide

16. Performance x Performance x
    Performance =
    

    View Slide

17. But it’s not that easy…
    

    View Slide

18. Selling performance
    can be tricky
    

    View Slide

19. twnsnd.com/performance_in_retail
    

    View Slide

20. You don’t need permission
    to build fast websites
    

    View Slide

21. Smithsonian Institution Neg. 83-14878.
    “It's easier to ask forgiveness
    than it is to get permission.”
    – Grace Hopper
    

    View Slide

22. Before we start optimising…
    

    View Slide

23. Monitor & Measure
    

    View Slide

24. SpeedCurve
    https:/
    /speedcurve.com/
    

    View Slide

25. Understand your users and
    build for the future
    

    View Slide

26. View Slide

27. The Slowest Site in the World
    

    View Slide

28. github.com/ryantownsend/slowest-site-in-the-world
    

    View Slide

29. View Slide

30. https:/
    /www.webpagetest.org/easy
    

    View Slide

31. Initial Results?
    • Start render: 6.4s
    • SpeedIndex: 12717
    • Interactive: 4.4s
    • Bandwidth: 2,594 KB
    

    View Slide

32. View Slide

33. Guide – https://is.gd/DsjOur
    

    View Slide

34. 1. Connection
    2. HTML
    3. CSS
    4. Webfonts
    5. JavaScript
    6. Images
    

    View Slide

35. Connection
    

    View Slide

36. You can’t control your infrastructure without
    permission, but you can check features are enabled:
    • GZIP / Brotli
    • OCSP Stapling for SSL
    • HTTP/2 (and HTTP/3 soon!)
    • Connection: keep-alive
    

    View Slide

37. HTML
    

    View Slide

38. 
    

    View Slide

39. Correct Order
    1. character encoding / viewport
    2.
    3. Resource hints
    4. Inline <br/>5. External stylesheet<br/>6. Inline <style><br/>7. External <script><br/>8. Anything else, e.g. other meta tags<br/>“Get Your <head> Straight” – @csswizardry<br/>

    View Slide

40. Resource Hints
    • DNS Prefetch
    • Preconnect (CDN, 3rd parties)
    • Preload (CSS @imports, @font-face etc)
    • Prefetch (low priority preload)
    • Prerender (nostate prefetch + subresources)
    

    View Slide

41. View Slide

42. Progressive-enhancement, ~80% support
    

    View Slide

43. Use as fallback for preconnect in IE & Edge
    

    View Slide

44. Progressive-enhancement, ~75% support
    

    View Slide

45. Results?
    

    View Slide

46. Start Render SpeedIndex Interactive Bandwidth
    (-1.8s) (+184) (-0.1s) (no change)
    Value: $6,782,202 / year
    Value based on Mobify case study
    

    View Slide

47. CSS
    

    View Slide

48. Remove @import
    

    View Slide

49. Don’t let third parties control your
    performance, uptime or security
    

    View Slide

50. Inline (Critical) CSS
    

    View Slide

51. View Slide

52. Load below-the-fold CSS
    asynchronously
    

    View Slide

53. Results?
    

    View Slide

54. Start Render SpeedIndex Interactive Bandwidth
    (-0.1s) (-348) (-0.2s) (no change)
    Value: $376,789 / year
    Value based on Mobify case study
    (ideal conditions)
    

    View Slide

55. Start Render SpeedIndex Interactive Bandwidth
    (-90.1s) (-∞) (-0.2s) (no change)
    Value: $339,486,889 / year
    Value based on Mobify case study
    (3rd party offline)
    

    View Slide

56. Start Render SpeedIndex Interactive Bandwidth
    (-90.1s) (-∞) (-0.2s) (no change)
    Value: $38,754 / hour
    Value based on Mobify case study
    (3rd party offline)
    

    View Slide

57. Webfonts
    

    View Slide

58. Self-host
    https://google-webfonts-helper.herokuapp.com/fonts
    

    View Slide

59. font-display:
    font-display:
    font-display:
    font-display:
    block
    swap
    fallback
    optional
    

    View Slide

60. block Short Block (3s) Infinite Swap
    swap No Block Infinite Swap
    fallback Tiny Block (100ms) Short Swap (3s)
    optional Tiny Block (100ms) No Swap
    

    View Slide

61. Progressive-enhancement, ~75% support
    

    View Slide

62. WOFF2
    (30% average size reduction)
    

    View Slide

63. >80% support (serve WOFF1 for Internet Explorer)
    

    View Slide

64. unicode-range
    (bundling for web fonts)
    https://github.com/filamentgroup/glyphhanger
    

    View Slide

65. /* latin */
    @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat Regular'), local(‘Montserrat-Regular'),
    url(/fonts/montserrat.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
    }
    

    View Slide

66. Results?
    

    View Slide

67. Start Render SpeedIndex Interactive Bandwidth
    (-1.8s) (-258) (-0.1s) (no change)
    Value: $6,782,202 / year
    Value based on Mobify case study
    

    View Slide

68. JavaScript
    

    View Slide

69. Sync vs Async vs Defer
    still valuable!
    to be avoided!
    

    View Slide

70. Source – https://is.gd/w4tCW9
    

    View Slide

71. “Use a CDN”, they said
    

    View Slide

72. https://cdnjs.cloudflare.com/ajax/
    libs/jquery/3.3.1/jquery.min.js
    (to be avoided!)
    

    View Slide

73. Source – https://bit.ly/2ij5XIt
    

    View Slide

74. Bundling & Tree-shaking
    

    View Slide

75. Results?
    

    View Slide

76. Start Render SpeedIndex Interactive Bandwidth
    (-0.1s) (-691) (-2.2s) (-5KB)
    Value: $376,789 / year
    Value based on Mobify case study
    

    View Slide

77. Images
    

    View Slide

78. Foreground vs Background
    

    View Slide

79. 
    background-image: url(image.jpg)
    vs
    

    View Slide

80. Hero loaded after lower-priority product images
    

    View Slide

81. Corrected by using a foreground
    

    View Slide

82. Serve Appropriate Sizes
    

    View Slide

83. Progressive enhancement, >88% support
    

    View Slide

84. Serve Appropriate Formats
    

    View Slide

85. Safari only
    

    View Slide

86. IE/Edge only
    

    View Slide

87. Blink only… coming in Edge 18 and Firefox 65
    

    View Slide

88. Accept: image/webp,image/*,*/*;q=0.8
    

    View Slide

89. 
    
    
    
    
    
    src='hero@400w.jpg'
    alt='Hero Image'
    />
    
    our different formats
    our different sizes
    fallback to JPEG with an old-school ‘src’
    

    View Slide

90. Lazy-load Beneath the Fold
    

    View Slide

91. View Slide

92. Source – medium.com
    Low-Quality Image Preview (LQIP)
    

    View Slide

93. Results?
    

    View Slide

94. Start Render SpeedIndex Interactive Bandwidth
    (-1.7s) (-6948) (-0.1s) (-2,224KB)
    Value: $6,405,413 / year
    Value based on Mobify case study
    

    View Slide

95. https://images.guide/
    

    View Slide

96. Show me the money…
    

    View Slide

97. Start Render SpeedIndex Interactive Bandwidth
    (-3.8s) (-8486) (-2.1s) (-2,229KB)
    Value: $14,317,982 / year
    Value based on Mobify case study
    

    View Slide

98. Original Optimised
    https://bit.ly/2IViWzf
    

    View Slide

99. Low-hanging fruit can have
    immense impact on performance
    

    View Slide

100. Bonus Point!
     

     View Slide

101. Service Workers
     

     View Slide

102. Progressive-enhancement, >80% support
     

     View Slide

103. • Progressive enhancement
     • Network control
     • Offline support
     • Progressive Web Apps (PWAs)
     • stale-while-revalidate / stale-while-error
     • Protect against 3rd party slow-downs
     

     View Slide

104. function timeout(delay){
     return new Promise(function(resolve, reject) {
     setTimeout(function() {
     resolve(new Response('', {
     status: 408,
     statusText: 'Request timed out.'
     }))
     }, delay)
     })
     }
     self.addEventListener('fetch', function(event) {
     // @paulirish fix for DevTools
     if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
     return
     // if the request is not for example.com, serve requests normally
     } else if (!event.request.url.includes('example.com')) {
     return
     }
     return event.respondWith(caches.match(event.request).then(function(response) {
     return response || Promise.race([
     timeout(2000),
     fetch(event.request)
     ])
     }))
     })
     attempt the request
     force a 2-second timeout
     service-worker-timeout.twnsnd.com
     

     View Slide

105. View Slide

106. Thank you!
     Ryan Townsend
     CTO, SHIFT – @ryantownsend
     twnsnd.com/makingsoftware2018
     

     View Slide