Reduce the Impact of Third-party Code

Third-party code consists of any code or script that is served by another party or from another domain but can be embedded or used on your pages. Examples of third-party code include chat widgets, social buttons, video embeds, digital ads, SEO analytics scripts, etc. Since these elements are not served from your own domain, they can contain scripts that may slow the main-thread work, which as we discussed before, will delay anything else from rendering until the scripts complete. Third-party scripts, if left unchecked, can really impact how quickly your pages load. For example, they may delay when the First Contentful Paint (FCP) occurs and increase the number of HTTP requests, which means additional work for your browser.

During the Lighthouse test, if there is any third-party code that blocks the main-thread from processing for more than 250ms, a flag will be triggered. The scripts will be arranged by total time it blocked the main-thread blocking from processing and will also show the size of the script. From here, you can begin the process of reviewing which scripts are critical for your pages and which ones can be removed. If you decide that there is a need to keep some third-party scripts, you can act by deferring scripts and have only the critical scripts run during the initial download. This ensures other scripts do not get in the way and delay your page’s download and rendering time any further. The last couple of optimizations we have already discussed, and those are using preconnect or dns-prefetch and lazy loading. Again, your goal is to have content loading on your page as quickly as possible. While you may not be able to remove all third-party scripts, you can implement any or all these methods to delay and shift when the scripts run, so they do not increase the time it takes for the main-thread work to process.