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.

F085bf2092cb300bac787cc5bc65d301?s=128

Ryan Townsend

April 03, 2019
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.

    • What are third parties? • Why are they problematic?

    • Why use them at all? • What can I do to mitigate against their impact?
  4. 10.
  5. 11.
  6. 14.

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

    “There is zero performance overhead to using our synchronous script

    […] our typical response time is around 200ms” – Popular Third Party Provider
  8. 24.

    “Third party script execution is the majority chunk of the

    web today” – Patrick Hulce, Lighthouse
  9. 28.

    • Inaccurate development & QA experience • Unable to perform

    commit/build-time linting • Governance processes in the hands of the 3rd party
  10. 30.
  11. 31.
  12. 32.
  13. 33.

    • 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
  14. 38.
  15. 39.

    • 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)
  16. 45.
  17. 46.

    • Check for GZIP/Brotli compression • Subset fonts • Centralise

    data capture (e.g. Segment) • Disable loading libraries
  18. 52.
  19. 54.
  20. 57.
  21. 58.
  22. 59.
  23. 60.

    <head> <script> function showBody() { document.body.style.display = 'block'; } setTimeout(showBody,

    3000) </script> <script src="https://myadprovider.com/" onload="showBody()" onerror="showBody()" importance="high" async> </script> </head> <body style="display:none"> ... </body> when the script loads/fails: show the body hide the whole body after 3 seconds: show the body regardless
  24. 61.
  25. 62.

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

    • 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 *
  27. 66.
  28. 72.
  29. 73.
  30. 75.
  31. 77.
  32. 84.

    • Embed manually and maintain a clear release runway •

    Migrate long-term scripts to core site • Server-side tag management
  33. 86.
  34. 87.
  35. 90.

    “Huge props to WordAds for reducing their impact from ~2.5s

    to ~200ms on average!” – Patrick Hulce, Lighthouse
  36. 92.

    • 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