Building Fast Websites Against All Odds - Tinel Meetup 2018

Building Fast Websites Against All Odds - Tinel Meetup 2018

Tinel Meetup 2018

F085bf2092cb300bac787cc5bc65d301?s=128

Ryan Townsend

June 20, 2018
Tweet

Transcript

  1. Tinel, Croatia 2018 Building fast websites against all odds Photo

    by Emil Vilsek on Unsplash
  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 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 App 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. None
  35. Initial Results? •Start render: 6.2s •SpeedIndex: 12841 •Interactive: 6.6s •Bandwidth:

    2,677 KB
  36. Guide – https://is.gd/DsjOur

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

    6. Images
  38. Connection

  39. 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
  40. HTML

  41. <head>

  42. 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
  43. None
  44. Resource Hints •DNS Prefetch •Preconnect (CDN, 3rd parties) •Preload (CSS

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

  46. Progressive-enhancement, solid support

  47. None
  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 or uptime

  53. Inline (Critical) CSS

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

  56. 43.5KB Individual -> 42.0 KB Combined

  57. Results?

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

    Value: $376,789 / year Value based on Mobify case study (ideal conditions)
  59. 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)
  60. Start Render SpeedIndex Interactive Bandwidth (-90.1s) (-∞) (-0.2s) (no change)

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

  62. Self-host

  63. font-display: swap / optional

  64. Progressive-enhancement, average support

  65. WOFF2

  66. Solid support, WOFF1 for IE9-IE11

  67. unicode-range (bundling for web fonts)

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

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

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

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

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

  74. “Use a CDN”, they said

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

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

  77. Bundling & Tree-shaking

  78. Results?

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

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

  81. Foreground vs Background

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

  83. Hero loaded after lower-priority product images

  84. Corrected by using a foreground <img>

  85. None
  86. None
  87. None
  88. Lazy-load Beneath the Fold

  89. None
  90. Source – medium.com Low-Quality Image Preview (LQIP)

  91. Serve Appropriate Sizes

  92. Latest version of all the major browsers

  93. Serve Appropriate Formats

  94. Blink-based browsers only

  95. Safari only

  96. IE/Edge only

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

  98. <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’
  99. Results?

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

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

  102. Show me the money…

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

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

  105. Start Render SpeedIndex Interactive Bandwidth (-3.5s) (-6534) (-4.2s) (-376KB)

  106. https://is.gd/ZIVqWL

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

  108. Bonus Point!

  109. Service Workers

  110. Latest version of all the major browsers

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

    •stale-while-revalidate / stale-while-error •Protect against 3rd party slow-downs
  112. 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
  113. Thank you! Ryan Townsend CTO, SHIFT – @ryantownsend

  114. “Can you implement AMP?”

  115. •Replica of your site •Restricted HTML: limited AMP elements •Restricted

    JS: no custom JS allowed •Restricted CSS: inlined, 50kb max •No repaint: fixed element sizing •No desktop: mobile-only •Shown within Google’s branding •Stale-while-revalidate: minimum 15 seconds refresh •Extra QA effort
  116. It’s gonna get expensive

  117. “But the carousel!”

  118. None
  119. “[…] we now feel ready to take the next step

    and work to support more instant-loading content not based on AMP technology in areas of Google Search designed for this, like the Top Stories carousel” – AMP Project @ Google Source – https://bit.ly/2JakbtC
  120. Why don’t we just build fast sites in the first

    place?