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

Building Fast Websites Against All Odds - MerseyCode 2018

Building Fast Websites Against All Odds - MerseyCode 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

July 25, 2018
Tweet

Transcript

  1. Merseycode, Liverpool 2018 Building fast websites against all odds Photo

    by Emil Vilsek on Unsplash Slides – https://bit.ly/2LlYOYv
  2. Who am I? Ryan Townsend CTO, SHIFT – @ryantownsend

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

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

  6. Performance = Traffic

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

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

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

  10. “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
  11. “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
  12. Performance = AOV

  13. +9.6% pages/session

  14. +8.7% AOV

  15. Performance x Performance x Performance =

  16. But it’s not that easy…

  17. Selling performance can be tricky

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

    it is to get permission.” – Grace Hopper
  19. You don’t need permission to build fast websites

  20. Before we start optimising…

  21. Monitor & Measure

  22. Calibre https:/ /calibreapp.com/

  23. SpeedCurve https:/ /speedcurve.com/

  24. Understand your users and build for the future

  25. None
  26. The Slowest Site in the World

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

  28. None
  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. None
  34. Initial Results? •Start render: 5.5s •SpeedIndex: 5495 •Interactive: 5.2s •Bandwidth:

    163 KB
  35. Guide – https://is.gd/DsjOur

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

    6. Images
  37. Connection

  38. You can’t control your infrastructure without permission, but you can

    check features are enabled: •GZIP / Brotli •OCSP for SSL •HTTP/2 •Connection: keep-alive
  39. HTML

  40. <head>

  41. 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 Source – @csswizardry
  42. QED Con

  43. None
  44. None
  45. Resource Hints •DNS Prefetch •Preconnect (CDN, 3rd parties) •Preload (CSS

    @imports, @font-face etc) •Prefetch (low priority preload)
  46. Progressive-enhancement, good support

  47. Progressive-enhancement, good support

  48. Results?

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

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

  51. Remove @import

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

  53. Inline (Critical) CSS

  54. None
  55. Asynchronous below-the-fold CSS

  56. Results?

  57. Start Render SpeedIndex Interactive Bandwidth (-0.1s) (-348) (-0.2s) (no change)

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

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

    Value: $38,754 / hour Value based on Mobify case study (Google Fonts offline)
  60. Webfonts

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

  62. font-display: swap / optional

  63. Progressive-enhancement, good support

  64. WOFF2

  65. Solid support, WOFF1 for IE9-IE11

  66. unicode-range (bundling for web fonts)

  67. /* 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; }
  68. Results?

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

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

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

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

  73. “Use a CDN”, they said

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

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

  76. Bundling & Tree-shaking

  77. Results?

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

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

  80. Foreground vs Background

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

  82. Hero loaded after lower-priority product images

  83. Corrected by using a foreground <img>

  84. Lazy-load Beneath the Fold

  85. None
  86. Source – medium.com Low-Quality Image Preview (LQIP)

  87. Serve Appropriate Sizes

  88. Progressive-enhancement, solid support

  89. Serve Appropriate Formats

  90. Blink-based browsers only

  91. Safari only

  92. IE/Edge only

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

  94. <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’
  95. Results?

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

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

  98. Show me the money…

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

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

  101. QEDCon Start Render SpeedIndex Interactive Bandwidth (-2.6s) (-2604) (-2.5s) (-61KB)

  102. $9,796,514 / year Value based on Mobify case study

  103. That’s a lot of tickets… Value based on Mobify case

    study
  104. https://bit.ly/2LP8FSR

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

  106. Thank you! Ryan Townsend CTO, SHIFT – @ryantownsend Slides –

    https://bit.ly/2LlYOYv
  107. Bonus Point!

  108. Service Workers

  109. Progressive-enhancement, solid support

  110. •Progressive enhancement •Network control •Offline support •Progressive Web Apps (PWAs)

    •stale-while-revalidate / stale-while-error •Protect against 3rd party slow-downs
  111. 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 { event.respondWith(Promise.race([ fetch(event.request), timeout(2000) ])); }); attempt the request force a 2-second timeout
  112. Thank you! Ryan Townsend CTO, SHIFT – @ryantownsend Slides –

    https://bit.ly/2LlYOYv