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

You Don't Need Permission to Build Fast Websites

You Don't Need Permission to Build Fast Websites

infoShare, Gdansk 2018

Ryan Townsend

May 23, 2018
Tweet

More Decks by Ryan Townsend

Other Decks in Programming

Transcript

  1. infoShare, Gdansk 2018
    You don’t need permission
    to build fast websites
    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. Who believes performance is important to the user
    experience?
    Who actively wants to build faster websites?
    Who feels their clients or business don’t value
    performance as much as they should?

    View full-size slide

  16. Selling performance
    can be tricky

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Before we start optimising…

    View full-size slide

  20. Monitor & Measure

    View full-size slide

  21. Understand your users and
    build for the future

    View full-size slide

  22. The Slowest Site in the World

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

  29. Foreground vs Background

    View full-size slide


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

    View full-size slide

  31. Lazy-load Beneath the Fold

    View full-size slide

  32. Source – medium.com

    View full-size slide

  33. Source – medium.com

    View full-size slide

  34. Serve Appropriate Sizes

    View full-size slide

  35. Serve Appropriate Formats

    View full-size slide

  36. https://www.xnview.com/en/

    View full-size slide







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

    View full-size slide

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

    View full-size slide

  39. https://images.guide/

    View full-size slide

  40. Remove @import

    View full-size slide

  41. Inline (Critical) CSS

    View full-size slide

  42. Asynchronous below-the-fold CSS

    View full-size slide

  43. Start Render SpeedIndex Interactive Bandwidth
    (-0.1s) (-348) (-0.2s) (no change)
    Value: $376,789 / year
    Value based on Modify case study

    View full-size slide

  44. Start Render SpeedIndex Interactive Bandwidth
    (-90.1s) (-∞) (-0.2s) (no change)
    Value: $339,486,889 / year
    Value based on Modify case study

    View full-size slide

  45. Start Render SpeedIndex Interactive Bandwidth
    (-90.1s) (-87630) (-0.2s) (no change)
    Value: $38,754 / hour
    Value based on Modify case study

    View full-size slide

  46. Sync vs Async vs Defer

    View full-size slide

  47. Don’t let third parties control
    your performance or uptime

    View full-size slide

  48. https://cdnjs.cloudflare.com/ajax/
    libs/jquery/3.3.1/jquery.min.js

    View full-size slide

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

    View full-size slide

  50. Bundling & Tree-shaking

    View full-size slide

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

    View full-size slide

  52. font-display: swap / optional

    View full-size slide

  53. unicode-range

    View full-size slide

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

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

    View full-size slide

  56. Show me the money…

    View full-size slide

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

    View full-size slide

  58. Original Optimised

    View full-size slide

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

    View full-size slide

  60. Bonus Point!

    View full-size slide

  61. Service Workers

    View full-size slide

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

    View full-size slide

  63. 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([
    timeout(2000),
    fetch(event.request)
    ]));
    });

    View full-size slide

  64. Free eBook available – https://bit.ly/2BNcPZN

    View full-size slide

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

    View full-size slide