Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Who am I? Ryan Townsend @ryantownsend

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

What are third parties?

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Why are third parties a problem?

Slide 9

Slide 9 text

Rewind back to Velocity 2011…

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

The web lived happily ever after.

Slide 13

Slide 13 text

Except it didn’t.

Slide 14

Slide 14 text

• 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

Slide 15

Slide 15 text

Source: Steve Souders / HTTP Archive

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

“Can I bring a +1?”

Slide 18

Slide 18 text

requestmap.webperf.tools

Slide 19

Slide 19 text

But it’s not just the volume…

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Source: Steve Souders / HTTP Archive

Slide 22

Slide 22 text

And it’s not just the network…

Slide 23

Slide 23 text

Continual JavaScript execution 1 second

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

The average execution time per third-party is 225ms

Slide 26

Slide 26 text

85 third-parties x 225ms = 19s

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Why use third parties?

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

• 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

Slide 34

Slide 34 text

So, what can we do?

Slide 35

Slide 35 text

Identify your third parties

Slide 36

Slide 36 text

requestmap.webperf.tools

Slide 37

Slide 37 text

Long-running JavaScript Large payloads webpagetest.org/easy

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Consider your loading strategy

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

2. How critical is it?

Slide 43

Slide 43 text

Progressive enhancement isn’t just for first-party JavaScript

Slide 44

Slide 44 text

3. Do we need ALL of it?

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Check for image transformation

Slide 49

Slide 49 text

Avoid tech debt

Slide 50

Slide 50 text

Optimise your 3rd party scripts

Slide 51

Slide 51 text

4. Can you load it asynchronously / deferred?

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

“But what about the flicker!?”

Slide 54

Slide 54 text

Curfew

Slide 55

Slide 55 text

font-display: fallback

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

function showBody() { document.body.style.display = 'block'; } setTimeout(showBody, 3000) ... when the script loads/fails: show the body hide the whole body after 3 seconds: show the body regardless

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

5. Can you self-host the resources?

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

What about changes?

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

Dual-phase loading

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

6. Can we preconnect or preload?

Slide 71

Slide 71 text

Choose your friends

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

The Windows 95 launch really got out of hand

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Protect your site from 3rd parties

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

Kill Switch

Slide 79

Slide 79 text

Feature-Policy

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Protect your site from your company

Slide 82

Slide 82 text

Tag Managers

Slide 83

Slide 83 text

It’s all our fault

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

TWO TAG MANAGERS?

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

Remember you have leverage

Slide 89

Slide 89 text

Everybody wins…

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

32,000 sites benefitted.

Slide 92

Slide 92 text

• 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

Slide 93

Slide 93 text

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