Slide 1
Slide 1 text
It’s My (Third) Party,
and I’ll Cry if I Want To
Harry Roberts • @csswizardry
Slide 2
Slide 2 text
Hi! I’m Harry
Consultant Performance Engineer
Leeds, UK
@csswizardry
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
This is your website…
…this is your website
on tag managers.
Slide 9
Slide 9 text
Third Party Performance
1.Understand
2.Audit
3.Discuss
4.Mitigate
Slide 10
Slide 10 text
Understand
Slide 11
Slide 11 text
Security
Slide 12
Slide 12 text
Security
Insecure origins; mixed content warnings
MitM attacks
Compromised third parties
Bad actors running amok
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
“
“YouTube was recently caught displaying ads
that covertly leach off visitors’ CPUs and
electricity to generate digital currency on
behalf of anonymous attackers…”
— csswz.it/2ruKhN0
Slide 16
Slide 16 text
At a minimum, pull everything
from secure origins.
Slide 17
Slide 17 text
TLS Everywhere
✔ HTTP/2
✔ ServiceWorker
✔ Brotli
Slide 18
Slide 18 text
Delays
Slide 19
Slide 19 text
Delays
On the network between first- and third-parties
On third-party infrastructure
⏱ Third-party runtime
Slide 20
Slide 20 text
“
“There is zero performance overhead to using
our synchronous script [...] our typical response
time is around 200 milliseconds”
— Third-Party Provider
— Ryan Townsend (csswz.it/2K4w2GB)
Slide 21
Slide 21 text
“
“The Trainline reduced latency by 0.3 seconds
across their funnel and customers spent an
extra £8.1 million a year.”
Slide 22
Slide 22 text
“
“For every 100ms decrease in homepage load
speed, Mobify’s customer base saw a 1.11% lift in
session based conversion, amounting to an
average annual revenue increase of $376,789.”
Slide 23
Slide 23 text
“
“[Walmart] Every 100ms improvement also
resulted in up to a 1% increase in revenue.”
Slide 24
Slide 24 text
Single Points of Failure (SPoF)
Slide 25
Slide 25 text
SPoF
Worst case scenario
What happens when a third party is critical…
…and it’s down?
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Audit
Slide 29
Slide 29 text
Overhead and Impact
Slide 30
Slide 30 text
requestmap.webperf.tools
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
requestmap.webperf.tools
/render/[ID]
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
$ awk -F',' '$2 != "Target Site" { print $1 }' cnn.csv
Field Separator
is a comma
If the second entry
is not ‘Target Site’
Print the first entry
(Domain)
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
0s
2.5s
5s
7.5s
10s
Load Start Render SpeedIndex
Before After
Slide 39
Slide 39 text
0
75
150
225
300
Requests
Before After
Slide 40
Slide 40 text
0KB
1,000KB
2,000KB
3,000KB
4,000KB
Weight
Before After
Slide 41
Slide 41 text
!
This is very extreme
and non-scientific
Slide 42
Slide 42 text
Slow Origins
Slide 43
Slide 43 text
“
“What happens if X is running slowly?”
Slide 44
Slide 44 text
charlesproxy.com
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Outages
Slide 47
Slide 47 text
“
“What happens if X is missing entirely?!”
Slide 48
Slide 48 text
##
# Point third-party domains at WPT’s blackhole server.
##
72.66.115.13 platform.twitter.com
72.66.115.13 connect.facebook.net
72.66.115.13 fonts.googleapis.com
Blackhole
Server
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Missing Files
Slide 51
Slide 51 text
“
“All your users are non-JS while they’re
downloading your JS.”
—Jake Archibald (csswz.it/2FGKrpW)
Slide 52
Slide 52 text
!
Don’t optimise for
users with
JavaScript disabled…
Slide 53
Slide 53 text
i
…instead, consider
how well your
JavaScript fails.
Slide 54
Slide 54 text
“
“In this particular instance, the T-Mobile
JavaScript comment stripper appears to be
searching for ‘/*’ and ‘*/’ and removing
everything in-between. ”
— csswz.it/2KE2lNQ
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
Runtime Cost
Slide 58
Slide 58 text
Runtime Cost
1.Run a Performance profile
2.Summary
3.Bottom-Up
4.Group by Domain
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Discuss
Slide 63
Slide 63 text
Necessary Evil
Slide 64
Slide 64 text
Necessary Evil
Slide 65
Slide 65 text
Necessary
Evil
Is it?
Really?
Might it add
real value?
They can’t
All be evil!
Tracking scripts
Are pretty icky
Does it help
users?
Would we
even miss it?
What are the
chances of something
going wrong?
Is the benefit
greater than the cost?
Slide 66
Slide 66 text
Vendors
Slide 67
Slide 67 text
Vendors
1.Form hypotheses
2.Gather data
3.Let them know
Slide 68
Slide 68 text
Let Them Know
1.Support tickets
2.Account Managers
3.Issues/pull requests
4.Tweets…
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
Internal Teams
Slide 74
Slide 74 text
Remember our
CSV file from before?
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
!
Ask, don’t tell.
Slide 81
Slide 81 text
Arrange a Meeting
1.Gather the data
2.Organise a meeting
3.Ask questions
4.Learn
Slide 82
Slide 82 text
“
“Can you talk me through Google Tag Manager?
What does this particular third-party do for us?
Who is responsible for this service?
Which services do we use daily?
Are there any services in here that we don’t recognise?”
Slide 83
Slide 83 text
csswz.it/2rm29JY
Slide 84
Slide 84 text
Mitigate
Slide 85
Slide 85 text
Self-Host
Slide 86
Slide 86 text
Self-Hosting
Third-party assets from a first-party origin
Controlled infrastructure
Reduced network negotiation (DNS, TCP, TLS)
Dictate your own caching strategy
Preload!
Slide 87
Slide 87 text
Where possible, self-
host any critical assets.
Slide 88
Slide 88 text
Load Asynchronously
Slide 89
Slide 89 text
Load Asynchronously
Synchronous (blocking) third parties create a SPoF
Use any provided async method
Most providers give an async loader…
…be suspicious of any who don’t.
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
Resource Hints
Slide 93
Slide 93 text
Resource Hints
Every trip to a new origin carries overhead (DNS, TCP, TLS)
Deal with this ahead of time for known third-party origins
Analytics services, font providers, ad networks, etc.
Slide 94
Slide 94 text
Font Provider
Social Widget
Ad Network
Slide 95
Slide 95 text
{% if page.layout != "feature" %}
{% endif %}
{% if page.page-class == "page--services page--workshops" %}
{% endif %}
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
!
Only warm up
frequent, significant,
and known origins.
Slide 99
Slide 99 text
Content Security Policy (CSP)
Slide 100
Slide 100 text
Content-Security-Policy: default-src 'self'; img-src
imgix.com; script-src www.google-analytics.com
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
Feature Policy
Slide 103
Slide 103 text
Feature-Policy: autoplay 'none'; geolocation 'self';
camera 'none'; microphone 'none'
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
Subresource Integrity (SRI)
Slide 106
Slide 106 text
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
Priority Hints
Slide 109
Slide 109 text
Slide 110
Slide 110 text
Restraint
Slide 111
Slide 111 text
Use as little as possible
for as long as possible.
Slide 112
Slide 112 text
Thank You!
@csswizardry
[email protected]
speakerdeck.com/csswizardry
harry.is/for-hire