Third-party resources (such as embeds and scripts) are heavily used across the web today. They provide out-of-the-box solutions for embedding social media, videos, analytics, live chat, advertising, A/B testing, personalization, and others. Third-party embeds are a necessary part of modern websites that allow site owners to focus on their core competencies, while offloading standard but critical functions to external providers.
When both first party and third parties on a web page work in harmony, it is possible for a page to deliver a great user-experience. However, this requires significant effort from both engineering and business teams and is often overlooked, resulting in less than performant web pages and a negative impact to user-centric metrics such as the Core Web Vitals. This is detrimental to both parties and creates missed opportunities in businesses. Could we do better here?
We have a future vision of the web where third-party scripts and resources provide the intended business value with minimal regression to the performance or user experience of websites that use them in the browser. This would allow users to ideally experience faster page loads.
Over the last year, we have considered, discussed, and experimented with many possibilities that can potentially protect the user experience from the detrimental impact of third-party scripts without reducing their business value to site owners.
Through this post, we wish to share information about some of our experiments. We hope this is the beginning of a process that will encourage transparency and visibility between user agents, businesses, and third-party providers and pave the path to a faster web.
A deeper look at third-parties
A third-party is a resource served by a provider external to the site. They are not directly within the site owners' control, but present with their approval. Third-party resources are:
- Hosted on a shared and public origin different from the primary site origin.
- Not authored or influenced by an individual site owner.
- Widely used by a variety of sites.
From helping to generate revenue (via ads) to providing better marketing opportunities (social media embeds), third-parties serve a wide variety of business objectives. Common categories of third-parties include the following:
Source: Third-parties by category.
| Category | Definition |
|---|---|
| Advertising | Scripts used for serving ads or measuring ad performance. |
| Video | Scripts that enable video player and streaming functionality. |
| Hosted libraries | A mixture of publicly hosted open source libraries. |
| Content | Scripts from content providers or publishing-specific affiliate tracking. |
| Customer Success | Scripts from customer support/marketing providers that offer chat and contact solutions. |
| Hosting | Scripts from web hosting platforms. |
| Marketing | Scripts from marketing tools that add popups, newsletters, and others. |
| Social | Scripts that enable social features. |
| Tag Manager | Scripts that load many other scripts and initiate many tasks. |
| Analytics | Scripts that measure or track users and their actions. |
| Cookie Consent Platform | Scripts that allow sites to obtain the user consent (GDPR, ePR, CCPA) in an informed and transparent way. |
| Utility | Scripts that are developer utilities (API clients, site monitoring, fraud detection, and others. |
| Other | Miscellaneous scripts delivered via a shared origin with no precise category or attribution. |
These third-party scripts and libraries allow web developers to leverage tried and tested solutions to implement standard features instead of re-inventing the wheel. Thus, third-parties reduce development time and help businesses launch or upgrade their products faster. It is no wonder then that more than 94% of all websites on desktop and mobile use third-parties.
How do third-parties impact performance?
Ideally, developers of third-parties are subject matter experts for the specific features they provide. Most popular third-parties have undergone several iterations, and one can expect their code to be optimized for their own business goals, which may or may not include the performance of pages using them. However, we do know that even the most well-optimized third-parties affect performance. Here are the main reasons for this impact:
Size and Script Execution Costs: Third-parties often aim to provide significant functionality "just" by dropping in a
<script>or<iframe>element into your page. These elements then pull in scripts and resources that are significant in size and take longer to download and execute. Too much JavaScript keeps the main thread busy longer, blocks rendering, and delays user interactions. Some of the top third-parties have been known to block the main thread from 42 ms to 1.6 s for more than 50% of the sites analysed. A blocked main thread results in a high Total Blocking Time (TBT) which is one of the metrics that affects the performance score for the site. Additionally, it also delays response to user interactions and degrades the Interaction to Next Paint (INP) metric used to measure the responsiveness of websites. Thus, script execution costs have a significant impact on performance.Number: On average, websites use around 21 different third-parties on mobile and web. Often, third-party tags are added by tag management tools that are not directly controlled by the technical/development teams. Tags which are not required may be added by other teams without a review process and never get removed. These can significantly impact user experience, page weight, or CPU utilisation. Establishing a governance process can address such situations and allow developers to audit each provider's impact. It would help if developers had ready data available for all third-parties that provide a specific function with their performance impact, benefits, and trade-offs for comparison. Another challenge teams face is that for many sites, their third-party tags only run in production but not in their development environments, making it more challenging for developers to test them.
Network: Since third-parties are hosted on different origins, browsers have to make a larger number of connections to download content from them. The different connections cannot coordinate download based on priority, resulting in network contention. This can further delay the page load if the proper optimizations are not considered.
Sequencing: Third-parties can block the main thread and contend with bandwidth for more critical resources. That said, in some cases, third-parties are the critical resources required for rendering the page. Optimal sequencing of the first and third party resources becomes necessary when websites use multiple third-parties. Web developers should be aware of the different options available to optimize sequencing.
As a consequence of the above, third-parties can affect any or all components of Core Web Vitals. A majority of third-parties negatively impact Largest Contentful Paint (LCP) and First Input Delay (FID). YouTube embeds block the main thread for 4.5 seconds for 10% of the websites on mobile, and at least 1.6 seconds for 50% of the websites studied. Imagine a user's frustration if they came across a page with 20 such scripts on a slow connection. The following visualization from thirdpartyweb.today shows third-parties with the largest performance impact at present.