Third Party Woes

Third-party scripts represent one of the most vexing challenges in web performance. In this talk, we’ll look at how to identify third-party script issues, some potential ways to mitigate their impact, and what the larger performance community needs to do to tackle these problems.

Transcript

1. Third Party Woes Jason Grigsby @gri.gs @grigs@front-end.social https://www.linkedin.com/in/grigs/ https://cloudfour.com Photo by Pixabay: https://www.pexels.com/photo/sad-clown-doll-in-basket-208087/
7. Photo by Denitsa Kireva: https://www.pexels.com/photo/tortoise-in-grass-14594704/
9. Photo by Magda Ehlers: https://www.pexels.com/photo/closeup-photo-of-galapagos-tortoise-1201431/
10. Photo by zhang kaiyv: https://www.pexels.com/photo/time-lapse-photography-of-brown-concrete- building-842654/
11. Photo by Min An: https://www.pexels.com/photo/person-in-beige-top-on-mountain-cli ff -1134188/
12. Photo by Yan Krukau: https://www.pexels.com/photo/high-angle-photo-of- woman-looking-upset-in-front-of-silver-laptop-4458425/
13. THIRD-PARTY SCRIPTS
14. Photo by Daniel Reche: https://www.pexels.com/photo/eggs-in-tray-on-white-surface-1556707/
15. Images have always been di ff icult
16. Images are straightforward to solve
17. 1. Identify the problem
18. https://cloudfour.com/thinks/stop-lazy- loading-product-and-hero-images/
19. 1. Identify the problem 2. Talk about solutions 3. Teach any concepts or syntax 4. Implement the fix 5. Done
20. Third-party scripts are much more complex
21. Third-party scripts are JS files provided by websites or services other than the main site.
22. Businesses rely on third-parties for critical web site functionality
26. Do you need Bolt? Yes. It powers our entire checkout experience and abandoned cart functionality. Plus, we're approaching our holiday code freeze. We can't consider this until next year.
27. Do you need Bolt? We like it, but we're not wedded to it. What can we use to do the same thing that would be faster? Uh…
29. The web performance community tends to hate third-party scripts.
30. Photo by Hsing Wei: https://flickr.com/photos/hsing/6128750857/ Tag Managers
31. Photo by Andre Mouton: https://www.pexels.com/photo/closeup-photo-of-primate-1207875/
32. Despite our warnings, third-party scripts continue to plague websites
33. 0% 25% 50% 75% 100% 2019 2020 2021 2022 94% 94.4% 94.1% 88.5% Percentage of mobile websites with at least 1 third-party resource Source: HTTP Archive Web Almanac, https://almanac.httparchive.org/
34. Source: HTTP Archive Web Almanac, https://almanac.httparchive.org/
35. 45% of all requests Source: HTTP Archive Web Almanac, https://almanac.httparchive.org/
36. 34% of all scripts Source: HTTP Archive Web Almanac, https://almanac.httparchive.org/
37. Photo by Pixabay: https://www.pexels.com/photo/black-white-and- brown-chess-board-game-139392/
38. Our goals for today: 1. How to analyze third-party script performance 2. What you can do with this information 3. Some newer options? 4. A call to action
39. Our goals for today: 1. How to analyze third-party script performance 2. What you can do with this information 3. Some newer options? 4. A call to action 1. How to analyze third-party script performance
40. 1. How to analyze third-party script performance
41. Third-party Audit
43. Which third-parties are being used?
44. Request Map Generator https://requestmap.herokuapp.com/
48. requestmap.herokuapp.com /render/[WPT_ID]
51. Current Request Map Version
52. ☹
53. Current Request Map Version
54. Old Request Map Version
56. Current Request Map Version
57. Beta Request Map Version
60. Third Party Audit Spreadsheet Updated for use with Request Map Beta Domain Summary CSV https://bit.ly/3rdpartyaudit
65. What is the overall impact of third- parties on the website?
75. [A brief aside] What are we going to do about CatchPoint’s apparent neglect of WebPageTest?
82. ["'].*?(www\.example\.org| ads\.example\.org)[^"']*["']
85. ☹
88. ☹
90. 😀
92. Which third-party scripts are causing the biggest problems?
95. ["'].*?(www\.example\.org)[^"']*["']
99. Our goals for today: 1. How to analyze third-party script performance 2. What you can do with this information 3. Some newer options? 4. A call to action 2. What you can do with this information
100. Photo by Andrea Piacquadio: https://www.pexels.com/ photo/a-man-in-red-shirt-covering-his-face-3760043/
101. Photo by Miguel Á. Padriñán: https://www.pexels.com/ photo/two-white-message-balloons-1111368/
102. Is it necessary? Is it duplicative of another script?
104. Is it necessary? Is it duplicative of another script? Is it needed on every page?
105. Source: HTTP Archive Web Almanac, https://almanac.httparchive.org/
106. Is it necessary? Is it duplicative of another script? Is it needed on every page? Can the script provider improve performance? Can we self-host it? Can we execute the script on the server or edge? Can we use defer or async for loading?
107. Source: HTTP Archive Web Almanac, https://almanac.httparchive.org/
108. Is it necessary? Is it duplicative of another script? Is it needed on every page? Can the script provider improve performance? Can we self-host it? Can we execute the script on the server or edge? Can we use defer or async for loading? Can we use facade to only load when necessary?
110. Source: HTTP Archive Web Almanac, https://almanac.httparchive.org/
111. Is it necessary? Is it duplicative of another script? Is it needed on every page? Can the script provider improve performance? Can we self-host it? Can we execute the script on the server or edge? Can we use defer or async for loading? Can we use facade to only load when necessary?
112. Photo by Gratisography: https://www.pexels.com/photo/man-person-street-shoes-2882/
114. “In the last 10 years, there has been an increasing pressure for brands that already had relationships with bigger retailers like Home Depot and Costco to start syndicating additional review content to their sites. And since most of those bigger retailers already had relationships with BazaarVoice, there was a little to no choice for brands.”
115. Our goals for today: 1. How to analyze third-party script performance 2. What you can do with this information 3. Some newer options? 4. A call to action
119. Photo by Pixabay: https://www.pexels.com/photo/blue-tape- measuring-on-clear-glass-square-weighing-scale-53404/
120. Photo by Markus Winkler: https://www.pexels.com/photo/ozempic-18512879/
121. Photo by cottonbro studio: https://www.pexels.com/photo/woman-in-white-long- sleeve-shirt-lying-on-bed-4690701/
124. B A
127. Running scripts on the edge would also increase privacy and reduce impact of content blockers.
131. Some other options to consider
134. FID INP?
138. There are no miracle diets for web performance
139. Most website owners have no idea that adding a third-party script will impact their site performance, their customer experience, and their revenue.
140. Photo by Andres Ayrton: https://www.pexels.com/photo/ woman-showing-apple-and-bitten-doughnut-6551415/
145. Most of the time, you don’t know the performance impact until a ft er…
146. You’ve signed a contract…
147. Spent time and money on implementation…
148. If you’re not monitoring performance, you may not even know a ft er it goes live…
149. By the time you figure it out, you may be too reliant on the third-party to change.
150. And that’s assuming you had a choice in the first place.
151. I have a little confession to make…
153. What’s this?
156. A new report?
162. Our goals for today: 1. How to analyze third-party script performance 2. What you can do with this information 3. Some newer options? 4. A call to action
164. Photo by Je ff Stapleton: https:// www.pexels.com/photo/hands-holding- banner-with-question-4220084/
165. Encourage third-parties to prioritize performance
166. Praise third-parties that are fast (and shame the ones that aren't?)
167. How can browsers help?
169. Require timing-allow-origin headers for any third-party scripts
170. Make it easier for site owners to compare the performance of third-party scripts
171. Coordinate on solutions to get more third-parties o ff the main thread or onto the server and the edge
172. Share tips on how to make third-parties more performant
176. Photo by Pixabay: https://www.pexels.com/ photo/question-mark-on-chalk-board-356079/
178. Photo by Pixabay: https://www.pexels.com/ photo/question-mark-on-chalk-board-356079/
179. Thank You!
180. Thank You! @gri.gs @grigs@front-end.social https://www.linkedin.com/in/grigs/ https://cloudfour.com
181. Thank You! @gri.gs @grigs@front-end.social https://www.linkedin.com/in/grigs/ https://cloudfour.com