Lighthouse: Reduce the impact of third-party code
Overview
Third-party code consists of ads, analytics services, and other elements that are served from a domain that is different from the domain of your URL.
These resources are often responsible for poor web performance, as they may contain scripts that block your main-thread and prevent other tasks from being performed.
They may also slow down your page for several other reasons, including slow server response times, slow DNS lookups, server response errors, among others, which can impact your page performance.
It is vital to review your website code for third-party scripts and reduce their impact as much as possible in the interest of web performance.
How does your site score on this audit?
How does third-party code affect page performance?
Every time a page loads, the browser needs to download and parse the HTML code line-by-line. In doing so, it may come across third-party scripts that are likely to block the main-thread.
By default, JavaScript runs on the main-thread and may take a long time to execute, preventing all other tasks from being executed.
The effect on the user experience is three-fold:
- The First Paint and the loading of other key content is often delayed.
- Your users may see a blank-page for an extended period.
- The third-party scripts prevent the browser from executing other tasks.
- Your user cannot interact with the browser until the scripts have finished executing.
- Third-party scripts often inflate the number of requests your browser must deal with.
- This means more data downloaded, more network trips, and more work for your browser, overall.
The above is further compounded if you have multiple third-party requests, which may further exacerbate your page performance.
While third-party code may be essential for your site functionality or business goals, it is a good idea to review your third-party content and ensure that they are adding value to your site.
How does GTmetrix trigger this audit?
GTmetrix identifies third-party scripts on your page and calculates how long the main-thread is being blocked by each individual script.
Clicking the audit reveals the third-party scripts that are blocking the main-thread.
This audit is usually triggered if the total blocking time from all the third-party scripts is 250 ms or longer.
How to reduce the impact of third-party code?
There are a couple of general methods to reduce the impact of third-party code, namely:
1) Reviewing your website's third-party scripts
They help you identify and evaluate scripts and services that pop up on your webpage. It is a good practice to only keep third-party scripts and services that are actually adding value to your website and to remove all others.
We will elaborate on this in a future blog article.
2) Efficiently loading third-party JavaScript
Some of the suggestions include:
a) Deferring the loading and parsing of JavaScript
Defer the parsing or loading of third-party JavaScript to reduce the initial download size, allowing other resources to be downloaded in parallel. This quickens your page's execution and rendering time.
We cover this in our how to eliminate render-blocking resources article.
b) Establishing early connections to required origins
Use preconnect
and dns-prefetch
to establish early connections to important third-party origins.
Read more about this in our documentation.
c) Lazy-loading third-party resources
Lazy-load embedded third-party resources, especially, ones that are not above-the-fold to speed up page load and improve your page's perceived performance.
d) Optimize third-party hosting
There's more than one way to optimize third-party hosting. Self-host third party scripts to reduce DNS lookup and round-trip times, improve http caching headers, and take advantages of HTTP/2 server push.
To learn more about these methods, read Google's documentation.
Note: This is an advanced-level optimization
Developer support is strongly recommended.