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

Chaperones and curfews – We Love Speed 2019

Ryan Townsend
September 20, 2019

Chaperones and curfews – We Love Speed 2019

Ryan Townsend

September 20, 2019
Tweet

More Decks by Ryan Townsend

Other Decks in Programming

Transcript

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

    • Why use them at all? • What can I do to mitigate against their impact?
  2. • 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
  3. “There is zero performance overhead to using our synchronous script

    […] our typical response time is around 200ms” – Popular Third Party Provider
  4. “Third party script execution is the majority chunk of the

    web today” – Patrick Hulce, Lighthouse
  5. • Inaccurate development & QA experience • Unable to perform

    commit/build-time linting • Governance processes in the hands of the 3rd party
  6. • 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
  7. • 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)
  8. • Check for GZIP/Brotli compression • Subset fonts • Centralise

    data capture (e.g. Segment) • Disable loading libraries
  9. <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
  10. 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
  11. • 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 *
  12. • DNS Prefetch • Preconnect • Preload • Prefetch •

    Prerender (Nostate Prefetch) Check out: Harry Roberts – More Than You Ever Wanted To Know About Resource Hints
  13. • Embed manually and maintain a clear release runway •

    Migrate long-term scripts to core site • Server-side tag management
  14. “Huge props to WordAds for reducing their impact from ~2.5s

    to ~200ms on average!” – Patrick Hulce, Lighthouse
  15. • 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