Chaperones and Curfews: Minimising 3rd Party Impact

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

Who am I? Ryan Townsend @ryantownsend

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

What are third parties?

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

Why are third parties a problem?

Rewind back to Velocity 2011…

The web lived happily ever after.

Except it didn’t.

• 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

Source: Steve Souders / HTTP Archive

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

“Can I bring a +1?”

requestmap.webperf.tools

But it’s not just the volume…

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

Source: Steve Souders / HTTP Archive

And it’s not just the network…

Continual JavaScript execution 1 second

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

The average execution time per third-party is 225ms

85 third-parties x 225ms = 19s

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

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

Why use third parties?

• 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

So, what can we do?

Identify your third parties

requestmap.webperf.tools

Long-running JavaScript Large payloads webpagetest.org/easy

• 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)

Consider your loading strategy

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

2. How critical is it?

Progressive enhancement isn’t just for first-party JavaScript

3. Do we need ALL of it?

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

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

Check for image transformation

Avoid tech debt

Optimise your 3rd party scripts

4. Can you load it asynchronously / deferred?

“But what about the flicker!?”

Curfew

font-display: fallback

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

<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

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

5. Can you self-host the resources?

• 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 *

What about changes?

Dual-phase loading

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

6. Can we preconnect or preload?

Choose your friends

The Windows 95 launch really got out of hand

Protect your site from 3rd parties

Kill Switch

Feature-Policy

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

Protect your site from your company

Tag Managers

It’s all our fault

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

TWO TAG MANAGERS?

Remember you have leverage

Everybody wins…

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

32,000 sites benefitted.

• 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

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

Chaperones and Curfews: Minimising 3rd Party Impact

Chaperones and Curfews: Minimising 3rd Party Impact

More Decks by Ryan Townsend

Other Decks in Programming

Featured

Transcript