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

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

    Photo by Emil Vilsek on Unsplash Slides – twnsnd.com/makingsoftware2018
  2. 3.
  3. 4.
  4. 8.

    “The result of rebuilding our pages for performance led to

    [...] a 15 percent increase in SEO traffic” – Pinterest Source – https://bit.ly/2ICPv4Z
  5. 9.

    “[…] starting in July 2018, page speed will be a

    ranking factor for mobile searches.” – Google #SpeedUpdate Source – https://bit.ly/2Dt5Plz
  6. 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
  7. 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
  8. 15.
  9. 26.
  10. 29.
  11. 31.

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

    Interactive: 4.4s • Bandwidth: 2,594 KB
  12. 32.
  13. 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
  14. 37.
  15. 38.
  16. 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
  17. 40.

    Resource Hints • DNS Prefetch • Preconnect (CDN, 3rd parties)

    • Preload (CSS @imports, @font-face etc) • Prefetch (low priority preload) • Prerender (nostate prefetch + subresources)
  18. 41.
  19. 45.
  20. 46.

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

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

    CSS

  22. 51.
  23. 53.
  24. 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)
  25. 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)
  26. 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)
  27. 57.
  28. 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
  29. 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; }
  30. 66.
  31. 67.

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

    Value: $6,782,202 / year Value based on Mobify case study
  32. 75.
  33. 76.
  34. 77.
  35. 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’
  36. 91.
  37. 93.
  38. 97.
  39. 103.

    • Progressive enhancement • Network control • Offline support •

    Progressive Web Apps (PWAs) • stale-while-revalidate / stale-while-error • Protect against 3rd party slow-downs
  40. 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
  41. 105.