Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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!

Ryan Townsend

November 17, 2018
Tweet

More Decks by Ryan Townsend

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Traffic x Conversion Rate x AOV
    =

    View full-size slide

  5. Performance = Traffic

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Performance = Conversion

    View full-size slide

  9. “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 full-size slide

  10. “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 full-size slide

  11. Performance = AOV

    View full-size slide

  12. +9.6% pages/session

    View full-size slide

  13. Performance x Performance x
    Performance =

    View full-size slide

  14. But it’s not that easy…

    View full-size slide

  15. Selling performance
    can be tricky

    View full-size slide

  16. twnsnd.com/performance_in_retail

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Before we start optimising…

    View full-size slide

  20. Monitor & Measure

    View full-size slide

  21. SpeedCurve
    https:/
    /speedcurve.com/

    View full-size slide

  22. Understand your users and
    build for the future

    View full-size slide

  23. The Slowest Site in the World

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

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

    View full-size slide

  32. Progressive-enhancement, ~80% support

    View full-size slide

  33. Use as fallback for preconnect in IE & Edge

    View full-size slide

  34. Progressive-enhancement, ~75% support

    View full-size slide

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

    View full-size slide

  36. Remove @import

    View full-size slide

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

    View full-size slide

  38. Inline (Critical) CSS

    View full-size slide

  39. Load below-the-fold CSS
    asynchronously

    View full-size slide

  40. 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 full-size slide

  41. 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 full-size slide

  42. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 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 full-size slide

  46. Progressive-enhancement, ~75% support

    View full-size slide

  47. WOFF2
    (30% average size reduction)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. /* 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. “Use a CDN”, they said

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. Bundling & Tree-shaking

    View full-size slide

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

    View full-size slide

  59. Foreground vs Background

    View full-size slide


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

    View full-size slide

  61. Hero loaded after lower-priority product images

    View full-size slide

  62. Corrected by using a foreground

    View full-size slide

  63. Serve Appropriate Sizes

    View full-size slide

  64. Progressive enhancement, >88% support

    View full-size slide

  65. Serve Appropriate Formats

    View full-size slide

  66. IE/Edge only

    View full-size slide

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

    View full-size slide

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

    View full-size slide







  69. src='[email protected]'
    alt='Hero Image'
    />

    our different formats
    our different sizes
    fallback to JPEG with an old-school ‘src’

    View full-size slide

  70. Lazy-load Beneath the Fold

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  73. https://images.guide/

    View full-size slide

  74. Show me the money…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  78. Bonus Point!

    View full-size slide

  79. Service Workers

    View full-size slide

  80. Progressive-enhancement, >80% support

    View full-size slide

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

    View full-size slide

  82. 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 full-size slide

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

    View full-size slide