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

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!

Ryan Townsend

July 25, 2018
Tweet

More Decks by Ryan Townsend

Other Decks in Programming

Transcript

  1. Merseycode, Liverpool 2018
    Building fast websites
    against all odds
    Photo by Emil Vilsek on Unsplash
    Slides – https://bit.ly/2LlYOYv

    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. Smithsonian Institution Neg. 83-14878.
    “It's easier to ask forgiveness
    than it is to get permission.”
    – Grace Hopper

    View full-size slide

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

    View full-size slide

  18. Before we start optimising…

    View full-size slide

  19. Monitor & Measure

    View full-size slide

  20. Calibre
    https:/
    /calibreapp.com/

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. 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/>Source – @csswizardry<br/>

    View full-size slide

  32. Resource Hints
    •DNS Prefetch
    •Preconnect (CDN, 3rd parties)
    •Preload (CSS @imports, @font-face etc)
    •Prefetch (low priority preload)

    View full-size slide

  33. Progressive-enhancement, good support

    View full-size slide

  34. Progressive-enhancement, good 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. Asynchronous below-the-fold CSS

    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
    (Google Fonts 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
    (Google Fonts offline)

    View full-size slide

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

    View full-size slide

  44. font-display: swap / optional

    View full-size slide

  45. Progressive-enhancement, good support

    View full-size slide

  46. Solid support, WOFF1 for IE9-IE11

    View full-size slide

  47. unicode-range
    (bundling for web fonts)

    View full-size slide

  48. /* 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

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

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

    View full-size slide

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

    View full-size slide

  52. “Use a CDN”, they said

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. Bundling & Tree-shaking

    View full-size slide

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

  57. Foreground vs Background

    View full-size slide


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

    View full-size slide

  59. Hero loaded after lower-priority product images

    View full-size slide

  60. Corrected by using a foreground

    View full-size slide

  61. Lazy-load Beneath the Fold

    View full-size slide

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

    View full-size slide

  63. Serve Appropriate Sizes

    View full-size slide

  64. Progressive-enhancement, solid support

    View full-size slide

  65. Serve Appropriate Formats

    View full-size slide

  66. Blink-based browsers only

    View full-size slide

  67. IE/Edge only

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

  71. https://images.guide/

    View full-size slide

  72. Show me the money…

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  78. https://bit.ly/2LP8FSR

    View full-size slide

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

    View full-size slide

  80. Thank you!
    Ryan Townsend
    CTO, SHIFT – @ryantownsend
    Slides – https://bit.ly/2LlYOYv

    View full-size slide

  81. Bonus Point!

    View full-size slide

  82. Service Workers

    View full-size slide

  83. Progressive-enhancement, solid support

    View full-size slide

  84. •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

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

    View full-size slide

  86. Thank you!
    Ryan Townsend
    CTO, SHIFT – @ryantownsend
    Slides – https://bit.ly/2LlYOYv

    View full-size slide