Pro Yearly is on sale from $80 to $50! »

Building Fast Websites Against All Odds – Making Software 2018

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!

F085bf2092cb300bac787cc5bc65d301?s=128

Ryan Townsend

November 17, 2018
Tweet

Transcript

  1. Making Software, Kraków 2018 Building fast websites against all odds

    Photo by Emil Vilsek on Unsplash Slides – twnsnd.com/makingsoftware2018
  2. Who am I? Ryan Townsend CTO, SHIFT @ryantownsend

  3. None
  4. None
  5. Performance is pretty important… ‘Why Fast Matters’ by @csswizardry –

    https://bit.ly/2kiVDAz
  6. Traffic x Conversion Rate x AOV =

  7. Performance = Traffic

  8. “The result of rebuilding our pages for performance led to

    [...] a 15 percent increase in SEO traffic” – Pinterest Source – https://bit.ly/2ICPv4Z
  9. “[…] starting in July 2018, page speed will be a

    ranking factor for mobile searches.” – Google #SpeedUpdate Source – https://bit.ly/2Dt5Plz
  10. Performance = Conversion

  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
  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
  13. Performance = AOV

  14. +9.6% pages/session

  15. +8.7% AOV

  16. Performance x Performance x Performance =

  17. But it’s not that easy…

  18. Selling performance can be tricky

  19. twnsnd.com/performance_in_retail

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

  21. Smithsonian Institution Neg. 83-14878. “It's easier to ask forgiveness than

    it is to get permission.” – Grace Hopper
  22. Before we start optimising…

  23. Monitor & Measure

  24. SpeedCurve https:/ /speedcurve.com/

  25. Understand your users and build for the future

  26. None
  27. The Slowest Site in the World

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

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

  31. Initial Results? • Start render: 6.4s • SpeedIndex: 12717 •

    Interactive: 4.4s • Bandwidth: 2,594 KB
  32. None
  33. Guide – https://is.gd/DsjOur

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

    6. Images
  35. Connection

  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
  37. HTML

  38. <head>

  39. Correct Order 1. <meta> character encoding / viewport 2. <title>

    3. Resource hints 4. Inline <script> 5. External stylesheet 6. Inline <style> 7. External <script> 8. Anything else, e.g. other meta tags “Get Your <head> Straight” – @csswizardry
  40. Resource Hints • DNS Prefetch • Preconnect (CDN, 3rd parties)

    • Preload (CSS @imports, @font-face etc) • Prefetch (low priority preload) • Prerender (nostate prefetch + subresources)
  41. None
  42. Progressive-enhancement, ~80% support

  43. Use as fallback for preconnect in IE & Edge

  44. Progressive-enhancement, ~75% support

  45. Results?

  46. Start Render SpeedIndex Interactive Bandwidth (-1.8s) (+184) (-0.1s) (no change)

    Value: $6,782,202 / year Value based on Mobify case study
  47. CSS

  48. Remove @import

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

  50. Inline (Critical) CSS

  51. None
  52. Load below-the-fold CSS asynchronously

  53. Results?

  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)
  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)
  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)
  57. Webfonts

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

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

  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
  61. Progressive-enhancement, ~75% support

  62. WOFF2 (30% average size reduction)

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

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

  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; }
  66. Results?

  67. Start Render SpeedIndex Interactive Bandwidth (-1.8s) (-258) (-0.1s) (no change)

    Value: $6,782,202 / year Value based on Mobify case study
  68. JavaScript

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

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

  71. “Use a CDN”, they said

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

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

  74. Bundling & Tree-shaking

  75. Results?

  76. Start Render SpeedIndex Interactive Bandwidth (-0.1s) (-691) (-2.2s) (-5KB) Value:

    $376,789 / year Value based on Mobify case study
  77. Images

  78. Foreground vs Background

  79. <img src=“image.jpg” /> background-image: url(image.jpg) vs

  80. Hero loaded after lower-priority product images

  81. Corrected by using a foreground <img>

  82. Serve Appropriate Sizes

  83. Progressive enhancement, >88% support

  84. Serve Appropriate Formats

  85. Safari only

  86. IE/Edge only

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

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

  89. <picture> <!--[if IE 9]><video style="display: none;><![endif]--> <source srcset='hero@1600w.jxr 1600w, ...'

    type='image/vnd.ms-photo' /> <source srcset='hero@1600w.jp2 1600w, ...' type='image/jp2' /> <source srcset='hero@1600w.webp 1600w, ...' type='image/webp' /> <!--[if IE 9]></video><![endif]--> <img srcset=' hero@1600w.jpg 1600w, hero@1400w.jpg 1400w, hero@1200w.jpg 1200w, ...' src='hero@400w.jpg' alt='Hero Image' /> </picture> our different formats our different sizes fallback to JPEG with an old-school <img> ‘src’
  90. Lazy-load Beneath the Fold

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

  93. Results?

  94. Start Render SpeedIndex Interactive Bandwidth (-1.7s) (-6948) (-0.1s) (-2,224KB) Value:

    $6,405,413 / year Value based on Mobify case study
  95. https://images.guide/

  96. Show me the money…

  97. Start Render SpeedIndex Interactive Bandwidth (-3.8s) (-8486) (-2.1s) (-2,229KB) Value:

    $14,317,982 / year Value based on Mobify case study
  98. Original Optimised https://bit.ly/2IViWzf

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

  100. Bonus Point!

  101. Service Workers

  102. Progressive-enhancement, >80% support

  103. • Progressive enhancement • Network control • Offline support •

    Progressive Web Apps (PWAs) • stale-while-revalidate / stale-while-error • Protect against 3rd party slow-downs
  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
  105. None
  106. Thank you! Ryan Townsend CTO, SHIFT – @ryantownsend twnsnd.com/makingsoftware2018