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

Building Fast Websites Against All Odds - Tinel Meetup 2018

Building Fast Websites Against All Odds - Tinel Meetup 2018

Tinel Meetup 2018

Ryan Townsend

June 20, 2018
Tweet

More Decks by Ryan Townsend

Other Decks in Programming

Transcript

  1. Tinel, Croatia 2018
    Building fast websites
    against all odds
    Photo by Emil Vilsek on Unsplash

    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
    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 App
    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: 6.2s
    •SpeedIndex: 12841
    •Interactive: 6.6s
    •Bandwidth: 2,677 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, solid support

    View full-size slide

  34. Progressive-enhancement, solid 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 or uptime

    View full-size slide

  38. Inline (Critical) CSS

    View full-size slide

  39. Asynchronous below-the-fold CSS

    View full-size slide

  40. 43.5KB Individual -> 42.0 KB Combined

    View full-size slide

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

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

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

  44. font-display: swap / optional

    View full-size slide

  45. Progressive-enhancement, average 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. Latest version of all the major browsers

    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. Start Render SpeedIndex Interactive Bandwidth
    (-3.5s) (-6534) (-4.2s) (-376KB)

    View full-size slide

  76. https://is.gd/ZIVqWL

    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. Latest version of all the major browsers

    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 {
    event.respondWith(Promise.race([
    fetch(event.request),
    timeout(2000)
    ]));
    });
    attempt the request
    force a 2-second timeout

    View full-size slide

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

    View full-size slide

  84. “Can you implement AMP?”

    View full-size slide

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

    View full-size slide

  86. It’s gonna get expensive

    View full-size slide

  87. “But the carousel!”

    View full-size slide

  88. “[…] 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

    View full-size slide

  89. Why don’t we just build
    fast sites in the first place?

    View full-size slide