← Writing
By · · 2 min read

Using Third-Party Scripts Slows Down Your Website! Use This to Fix Your Performance (and Revenue)

For every 1s delay, conversions can fall by up to 20%

Traffic jam of taxis, buses and cars queued at the entrance of the Cross-Harbour Tunnel, standing in for visitors waiting on a slow site

Your clients waiting to load your website, Photo by Pixabay from Pexels

Have you ever sat in traffic? Did you enjoy the experience? Neither did I.

And neither does your client, waiting 4 or 5 seconds to get your first page loaded.

But sometimes it’s inevitable, right? For your website to get all the information needed about its users, you include some tools like Google Analytics, or maybe Facebook Pixel, or maybe just a chat widget, like Zendesk.

…Or maybe all of them!

And this is when your performance (and revenue) starts dropping!

Lighthouse report scores: Performance 1, Accessibility 73, Best Practices 62 and SEO 84

So what happened?

Websites use one of the most loved programming languages of all time, Javascript (haha). The third party scripts that you want to use, also use Javascript and they will clog up the main thread on the initial page load.

That is due to the fact that your code and the third party code compete for the main thread resources.

By having all those tools, you will increase the Total Blocking Time (TBT) of your website.

What is TBT and why you should care

TBT, simply put, is the total amount of time your webpage was blocked, preventing the user from interacting with your page.

As for the why you should care, well, Google says: “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%”.

This means you lose clients and money!

Ok cool, so is there a solution to this or do I just have to stop using those tools?

There are two solutions. Both may or may not work for you.

The first one, would be to elocate YOURSELF resource intensive scripts into a web worker, and off of the main thread. This of course, is no easy task, but it’s doable.

The second one is using a new open-source tool, called Partytown. It designates scripts that are not essential to the initial page load, such as your marketing tools, and it moves them to a web worker.

Javascript is single-threaded, so it can only do so much. Web workers ease our pain by moving some of the computation in the background, on a separate thread.

Partytown diagram: without it, your code and third-party scripts compete for the main thread; with it, third-party scripts move to a web worker thread

From their website

Of course, like anything else, it has its caveats. You can read them on their website. But this doesn’t mean you can at least try this on your website and see the performance (and revenue) gains.


You’ll probably like these, as well:

CSS vs CSS-in-JS Performance

React State Management in 2022

I wanted to create a SaaS and failed before I started

Create a Chrome Extension with React and inject it into webpages

More writing