It’s My (Third) Party, and I’ll Cry if I Want To

Like it or not, a huge part of modern web development involves the use of third-party providers: fonts, analytics, ads, tracking, and more all have an impact of performance, and can leave us (or, more worryingly, our visitors) susceptible to performance degradation.

In this talk, we’ll take a look at unruly or uninvited (third-)party guests: how to detect them, how to audit them, and how to manage them. We’ll also look at the different tools available to help us stress-test and quantify the overhead these third parties bring, and what that means for users and businesses alike.

Transcript

1. It’s My (Third) Party, and I’ll Cry if I Want To Harry Roberts • @csswizardry
2. Hi! I’m Harry Consultant Performance Engineer Leeds, UK @csswizardry
8. This is your website… …this is your website on tag managers.
9. Third Party Performance 1.Understand 2.Audit 3.Discuss 4.Mitigate
10. Understand
11. Security
12. Security Insecure origins; mixed content warnings MitM attacks Compromised third parties Bad actors running amok
15. “ “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
16. At a minimum, pull everything from secure origins.
17. TLS Everywhere ✔ HTTP/2 ✔ ServiceWorker ✔ Brotli
18. Delays
19. Delays On the network between first- and third-parties On third-party infrastructure ⏱ Third-party runtime
20. “ “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)
21. “ “The Trainline reduced latency by 0.3 seconds across their funnel and customers spent an extra £8.1 million a year.”
22. “ “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.”
23. “ “[Walmart] Every 100ms improvement also resulted in up to a 1% increase in revenue.”
24. Single Points of Failure (SPoF)
25. SPoF Worst case scenario What happens when a third party is critical… …and it’s down?
28. Audit
29. Overhead and Impact
30. requestmap.webperf.tools
32. requestmap.webperf.tools /render/[ID]
35. $ 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)
38. 0s 2.5s 5s 7.5s 10s Load Start Render SpeedIndex Before After
39. 0 75 150 225 300 Requests Before After
40. 0KB 1,000KB 2,000KB 3,000KB 4,000KB Weight Before After
41. ! This is very extreme and non-scientific
42. Slow Origins
43. “ “What happens if X is running slowly?”
44. charlesproxy.com
46. Outages
47. “ “What happens if X is missing entirely?!”
48. ## # 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
50. Missing Files
51. “ “All your users are non-JS while they’re downloading your JS.” —Jake Archibald (csswz.it/2FGKrpW)
52. ! Don’t optimise for users with
 JavaScript disabled…
53. i …instead, consider how well your JavaScript fails.
54. “ “In this particular instance, the T-Mobile JavaScript comment stripper appears to be searching for ‘/*’ and ‘*/’ and removing everything in-between. ” — csswz.it/2KE2lNQ
57. Runtime Cost
58. Runtime Cost 1.Run a Performance profile 2.Summary 3.Bottom-Up 4.Group by Domain
62. Discuss
63. Necessary Evil
64. Necessary Evil
65. 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?
66. Vendors
67. Vendors 1.Form hypotheses 2.Gather data 3.Let them know
68. Let Them Know 1.Support tickets 2.Account Managers 3.Issues/pull requests 4.Tweets…
73. Internal Teams
74. Remember our
 CSV file from before?
80. ! Ask, don’t tell.
81. Arrange a Meeting 1.Gather the data 2.Organise a meeting 3.Ask questions 4.Learn
82. “ “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?”
83. csswz.it/2rm29JY
84. Mitigate
85. Self-Host
86. Self-Hosting Third-party assets from a first-party origin Controlled infrastructure Reduced network negotiation (DNS, TCP, TLS) Dictate your own caching strategy Preload!
87. Where possible, self- host any critical assets.
88. Load Asynchronously
89. 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.
92. Resource Hints
93. 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.
94. Font Provider Social Widget Ad Network
95. {% if page.layout != "feature" %} <link rel="preconnect" href="//cdn.carbonads.com"> <link rel="preconnect" href="//srv.carbonads.net"> <link rel="preconnect" href="https://cdn.speedcurve.com"> <link rel="preconnect" href="https://cdn.syndication.twimg.com"> <link rel="preconnect" href="https://platform.twitter.com"> <link rel="preconnect" href="https://syndication.twitter.com"> {% endif %} {% if page.page-class == "page--services page--workshops" %} <link rel="preconnect" href="https://gumroad.com"> {% endif %} <link rel="preconnect" href="https://www.google-analytics.com">
98. ! Only warm up
 frequent, significant,
 and known origins.
99. Content Security Policy (CSP)
100. Content-Security-Policy: default-src 'self'; img-src imgix.com; script-src www.google-analytics.com
102. Feature Policy
103. Feature-Policy: autoplay 'none'; geolocation 'self'; camera 'none'; microphone 'none'
105. Subresource Integrity (SRI)
106. <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/⮐
 NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script>
108. Priority Hints
109. <script
 src="https://third-party.com/ads.js"
 importance="low">
 </script>
110. Restraint
111. Use as little as possible for as long as possible.
112. Thank You! @csswizardry csswizardry@gmail.com speakerdeck.com/csswizardry harry.is/for-hire