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

Chaperones and Curfews: Minimising 3rd Party Impact

Chaperones and Curfews: Minimising 3rd Party Impact

Talk given at PerfMatters 2019 – https://perfmattersconf.com

Every year websites get heavier – but the majority of growth isn’t coming from code written at the organisations running them... it’s coming from 3rd parties.

Long gone are the days when it was viable to build everything internally, but their impact on performance is already getting a little out-of-hand. We don’t want to be the fun police throwing everyone out, but we can start to moderate the party.

In this talk we won’t be looking to remove 3rd parties altogether – nobody likes having their toys taken away; instead we’ll be taking the practical approach of accepting that 3rd parties aren’t going anywhere and look at what strategies we can employ for maintaining performance and safeguarding against slowdowns, outages and abuse.

Ryan Townsend

April 03, 2019
Tweet

More Decks by Ryan Townsend

Other Decks in Programming

Transcript

  1. Chaperones and curfews
    Minimising 3rd party impact
    Photo by Spenser on Unsplash

    View full-size slide

  2. Who am I?
    Ryan Townsend
    @ryantownsend

    View full-size slide

  3. • What are third parties?
    • Why are they problematic?
    • Why use them at all?
    • What can I do to mitigate against their impact?

    View full-size slide

  4. What are third parties?

    View full-size slide

  5. Any infrastructure or service on a
    separate origin that you don’t control

    View full-size slide

  6. Why are third parties a problem?

    View full-size slide

  7. Rewind back to Velocity 2011…

    View full-size slide

  8. The web lived happily ever after.

    View full-size slide

  9. Except it didn’t.

    View full-size slide

  10. • Social media buttons
    • Tag managers
    • Ads
    • A/B testing tools
    • Personalisation
    • Analytics & Event Capture
    • Independent Customer Reviews
    • Retargeting
    • Affiliate trackers
    • Live chat
    • Hosted webfonts
    • Comment platforms
    • Videos
    • Developer Utilities

    View full-size slide

  11. Source: Steve Souders / HTTP Archive

    View full-size slide

  12. Source: Yottaa
    Average # of 3rd Parties
    2015 2016 2017 2018
    85
    60
    37
    15

    View full-size slide

  13. “Can I bring a +1?”

    View full-size slide

  14. requestmap.webperf.tools

    View full-size slide

  15. But it’s not just the volume…

    View full-size slide

  16. “There is zero performance overhead to
    using our synchronous script […] our
    typical response time is around 200ms”
    – Popular Third Party Provider

    View full-size slide

  17. Source: Steve Souders / HTTP Archive

    View full-size slide

  18. And it’s not just the network…

    View full-size slide

  19. Continual JavaScript execution
    1 second

    View full-size slide

  20. “Third party script execution is the
    majority chunk of the web today”
    – Patrick Hulce, Lighthouse

    View full-size slide

  21. The average execution time per
    third-party is 225ms

    View full-size slide

  22. 85 third-parties x 225ms = 19s

    View full-size slide

  23. It’s not even just the visitors
    who are affected…

    View full-size slide

  24. • Inaccurate development & QA experience
    • Unable to perform commit/build-time linting
    • Governance processes in the hands of the 3rd party

    View full-size slide

  25. Why use third parties?

    View full-size slide

  26. • You can’t build it all yourself
    • You shouldn’t build it all yourself
    • You’re hacking around technical limitations
    • You’re hacking around organisational limitations

    View full-size slide

  27. So, what can we do?

    View full-size slide

  28. Identify your third parties

    View full-size slide

  29. requestmap.webperf.tools

    View full-size slide

  30. Long-running JavaScript
    Large payloads
    webpagetest.org/easy

    View full-size slide

  31. • It’s My (Third) Party and I’ll Cry If I Want To

    Harry Roberts (@csswizardry)
    • AB Testing, Ads & Other 3rd Party Tags

    Andy Davies (@andydavies)
    • Performance Audit (Live)

    Tim Kadlec (@tkadlec)
    • Raiders of the Fast Start

    Katie Sylor-Miller (@ksylor)

    View full-size slide

  32. Consider your loading strategy

    View full-size slide

  33. 1. Where/when do you need to load it?

    View full-size slide

  34. 2. How critical is it?

    View full-size slide

  35. Progressive enhancement isn’t just for
    first-party JavaScript

    View full-size slide

  36. 3. Do we need ALL of it?

    View full-size slide

  37. • Check for GZIP/Brotli compression
    • Subset fonts
    • Centralise data capture (e.g. Segment)
    • Disable loading libraries

    View full-size slide

  38. You can’t all bring jQuery as your +1!

    View full-size slide

  39. Check for image transformation

    View full-size slide

  40. Avoid tech debt

    View full-size slide

  41. Optimise your 3rd party scripts

    View full-size slide

  42. 4. Can you load it asynchronously / deferred?

    View full-size slide

  43. “But what about the flicker!?”

    View full-size slide

  44. font-display: fallback

    View full-size slide

  45. Implement this one NASTY trick… you’ll never
    believe what happened next

    View full-size slide


  46. <br/>function showBody() {<br/>document.body.style.display = 'block';<br/>}<br/>setTimeout(showBody, 3000)<br/>
    onload="showBody()"
    onerror="showBody()"
    importance="high"
    async>



    ...

    when the script loads/fails: show the body
    hide the whole body
    after 3 seconds: show the body regardless

    View full-size slide

  47. 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) {
    // if the request is not for example.com, serve requests normally
    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

  48. 5. Can you self-host the resources?

    View full-size slide

  49. • No DNS lookup
    • No connection setup
    • No SSL negotiation
    • “Better” HTTP/2 prioritisation
    • You can fingerprint and use far-future expiry
    • Plays nicer with Content-Security-Policies *

    View full-size slide

  50. What about changes?

    View full-size slide

  51. Dual-phase loading

    View full-size slide

  52. https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec

    View full-size slide

  53. https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec

    View full-size slide

  54. 6. Can we preconnect or preload?

    View full-size slide

  55. Choose your friends

    View full-size slide

  56. The Windows 95 launch
    really got out of hand

    View full-size slide

  57. Protect your site from 3rd parties

    View full-size slide

  58. Feature-Policy

    View full-size slide

  59. sync-xhr, document-write, legacy-image-formats,
    max-downscaling-image, unsized-media,
    image-compression, font-display-late-swap,
    lazyload, unoptimized-images

    View full-size slide

  60. Protect your site from your company

    View full-size slide

  61. Tag Managers

    View full-size slide

  62. It’s all our fault

    View full-size slide

  63. • Embed manually and maintain a clear release runway
    • Migrate long-term scripts to core site
    • Server-side tag management

    View full-size slide

  64. TWO TAG MANAGERS?

    View full-size slide

  65. Remember you have leverage

    View full-size slide

  66. Everybody wins…

    View full-size slide

  67. “Huge props to WordAds for reducing their
    impact from ~2.5s to ~200ms on average!”
    – Patrick Hulce, Lighthouse

    View full-size slide

  68. 32,000 sites benefitted.

    View full-size slide

  69. • You don’t make friends taking toys away
    • Understand really how your third parties are used
    • Work with what you’ve got and optimise
    • Assume third parties will burn you
    • Protect yourself
    • Work with them for the better of the whole web

    View full-size slide

  70. Thank you!
    Ryan Townsend
    CTO, SHIFT – @ryantownsend
    twnsnd.com/perfmatters

    View full-size slide