Chaperones and curfews – We Love Speed 2019

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 (eComm) 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?

Can you load it on user behaviour?

Load reviews on user action -8s blocking JavaScript execution

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

A/B test implementation +20s JavaScript execution

4. Can you load it asynchronously or defer it?

“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?

• DNS Prefetch • Preconnect • Preload • Prefetch •
Prerender (Nostate Prefetch) Check out: Harry Roberts – More Than You Ever Wanted To Know About Resource Hints

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/welovespeed

Chaperones and curfews – We Love Speed 2019

Chaperones and curfews – We Love Speed 2019

More Decks by Ryan Townsend

Other Decks in Programming

Featured

Transcript