The adoption of third-party tags has jumped considerably in the last couple of years — with most websites now having more than 30 third-party tags adding services and functionality to their pages. This creates a better user experience, but it can also cause some issues for site performance. 

What is a tag?

A tag is a snippet of Javascript from a third party that gets added to your website. This Javascript creates the feature or functionality like chat or images that your user experiences or it may be behind the scenes like analytics. However, users aren’t aware that this functionality is from a third-party tag, they just consider it your website.

Here are some examples of third-party tags: 

Synchronous - the script interrupts the parsing of the HTML while it loads, which means other features and content waits while it loadsHow tags load on your site plays a major role in their impact on user experience. There are several ways that tags load: 

  • Asynchronous - the script does not interrupt the parsing of the HTML and loads while the HTML loads
  • Defer - the script loads asynchronously and then executes after the HTML loads

The way you set up tags to load will impact performance. Depending on when the tag call happens, it can delay critical page load events like onload or DOMContentLoaded which interrupts the user experience by making them wait for page loading. (People don’t wait, they click onto the next site that loads near-instantly.) How and when tags load are important factors to control to make sure user experience is not negatively impacted. 

4 ways to prevent third-party tags from annoying your users

  1. Move everything possible out of the <head>, and make it as late in the page load as possible. If something blocks the head from loading, the page can’t load. 
  2. Use async and defer everything possible so that tags execute after critical events. This will depend on what the script is trying to do, but generally, it’s best to move everything non-critical as far down as possible. 
  3. Combine third-party scripts into one first-party Javascript file. By putting as many third-party scripts as possible into one file, it will load faster. 
  4. Build and enforce a performance budget with data. Create criteria for how tags can and should impact performance and what action steps to take if they fail to measure up. Your performance budget should include questions such as: What is the acceptable amount of time it will take? How long to load? What is the impact on performance? If it slows things down, what action do you take? Who needs to make a decision on what tags get used and which ones don’t? Set parameters around what is acceptable for load times and measure everything based on this. 

Third-party tags are great for adding functionality quickly to your site, but they can also create additional issues with site performance if not controlled correctly.  

To learn how to identify and address these performance issues and get a deeper technical dive into how to solve them, view the on-demand webinar Unraveling the tangled web of tags.