As you can see, removing Google Tag Manager would bring a significant improvement to TBT. Would it correlate to improvements in FID? It’s likely, but not guaranteed.
Additionally, fixing FID issues is pretty much an iterative process. It can take several tries before you see the desired results.
So, implement improvements, wait for a few weeks, and see how much FID improved after collecting enough Field Data.
When deciding third-party resources, pick those that send the least amount of code while giving you the functionality you need.
Reduce script bloat
Remove redundant third-party scripts. You don’t need different vendors that offer the same functionality (e.g., two A/B testing tools or two analytics platforms).
Additionally, remove any third-party resource that you don’t really need!
Use async or defer
Avoid synchronous scripts unless a third-party script needs to run before the page renders. Instead, use async and defer attributes to tell the browser to load the script in the background while parsing the HTML. This way, users can see the page without waiting for the scripts to load fully.
Because async scripts execute immediately after loading, use it if you need the script to run earlier in the loading process. However, consider that async scripts can interrupt the DOM building. Good candidates for the async attribute are analytics and A/B testing tags.
Use defer for less critical resources since deferred scripts won’t block the parser. For example, you can generally defer sharing buttons, chat widgets, videos below the fold.
Establish early connections
Use preconnect and dns-prefetch to establish early connections with third-party origins and save a few hundred milliseconds.
Use <link rel=”preconnect”> to start a connection with another origin as early as possible. It involves the DNS lookup and TCP handshake, and TLS negotiations. Be mindful of unnecessary preconnecting because it can delay other resources. Thus, only use the preconnect hint for the most critical resources.
On the other hand, <link rel=”dns-prefetch> instructs the browser to resolve the DNS of another origin before it’s called. So, it handles a limited aspect of the connection to an external domain. The dns-prefetch hint is more suited to less critical third-party resources.
Lazy-load third-party resources
Lazy-loading can help to ease the negative performance impact of third-party resources. This is especially true for those resources that are not critical or render below the fold (e.g., ads, embedded videos, etc.).
Lazy-loading third-party scripts in a proper way will help the browser get the main content faster, and your page will deliver a better user experience.
Self-host third-party scripts
Self-hosting third-party scripts is a great way to take control over the loading process of those resources. Although self-hosting comes with some downsides (e.g., they won’t be automatically updated), it can let you take advantage of reduced DNS lookup time, improved HTTP caching, and the benefits of HTTP/2 server push.
Follow best practices for tags and tag managers
Tags are marketing and analytics snippets of code to collect data, set cookies, or integrate third-party content. Mismanaged tags can become a major cause of page performance issues.
To keep third-party tags under control, you must follow a series of best practices.
Establish a tag governance process
Implement a third-party tag vetting process, including:
- Legal vetting: whether the tag complies with all legal requirements (e.g., GDPR, CCPA, etc.)
- Need: whether a tag is required on a page.
- Ownership: who will be the person or team that will take ownership over the tag.
- Purpose: it’s essential to create cross-functional communication to understand why the tag is on the page.
- Review: tags need periodic revisions to prevent tag bloat on the site.
Not all scripts should be loaded using a tag manager
Tag managers are an excellent solution for implementing non-essential third-party resources (e.g., Facebook pixels, chat widgets below the fold, etc.). That’s because a tag manager will generally delay third-party scripts, which can positively impact FID.
However, tag managers are not great for loading resources that trigger visual or functional aspects on a page. Examples of those functionalities include GDPR notices, hero images, or anything page functionality above the fold. Using tag managers to load those resources can negatively impact LCP and CLS!
Remove duplicate and unused tags
On many occasions, the number of tags created in a tag manager can get out of hand. It can also happen that you have the same tag implemented through a tag manager and hard-coded. This can significantly impact a page’s performance in a negative way.
Audit your tag manager and remove any duplicated or unused tags. Remove or pause the affected tags, not just block them. That’s because blocking a tag through a trigger exception does not remove the tag from the container.
Use Custom Templates when possible
If you are using Google Tag Manager, consider using Custom Templates rather than Custom HTML tags when possible.
Due to greater restrictions, Custom Templates are less impactful on performance than Custom HTML tags. The downside is that Custom Templates may not work for all cases.
In some cases, you can convert a Custom HTML tag into a Custom Template using the injectScript API.
If you do have to use a Custom HTML tag, consider the following:
- Don’t copy and paste libraries or large third-party scripts into the Custom HTML tag. Instead, inject the third-party script via a script tag that downloads an external resource (for example, <script src=”external-scripts.js”>). Although this strategy adds a separate round-trip to download the script’s contents, the upside is that it decreases the container size and allows the browser to cache the script separately.
- Although some third-party vendors recommend placing their script at the top of the <head>, you may not need to do so. That’s because scripts loaded via a tag manager are generally executed once the browser has already finished parsing the <head>.
- When debugging performance issues, keep in mind that most synthetic tools will attribute the performance impact of a Custom HTML tag to the tag manager rather than to the tag itself.
Use pixels when possible
Pixels are the most performant tag type, followed by Custom Templates, and Custom HTML tags as the least performant.
The downside to using pixels is that they support less functionality. However, in some cases, third-party scripts can be replaced with pixels. Check with your third-party vendors to see if they support pixels.
Alternatively, if you are using your own beacons, consider modern pixel alternatives, such as the navigator.sendBeacon() and fetch() keepalive APIs.
Choose good triggers for individual tags
As a general rule, the earlier a tag fires, the bigger the impact on performance. Experiment with different triggers to find that that will satisfy your needs and minimize the performance impact at the same time.
Custom Events could be convenient in some cases because they will allow you to fine-tune when a tag fires.
Additionally, choose specific trigger conditions to ensure that tags fire when they are actually needed.
Load the tag manager at the right time
Choosing good triggers for tags is great, but adjusting when your tag manager loads can also positively impact performance. Experiment with the loading times of your tag manager and change it until it balances your needs with the page performance.
Optimize the tag containers
Use separate containers if needed. For example, a website and a mobile app may require different containers because they are structured differently.
However, as a general rule, try to stick to one container per page. Multiple containers on a page can trigger important FID issues and other performance problems. If you need to deploy various containers per page, follow Google’s guidance to do it the right way.
We all have been there. Your SEO agency wants to install its own Google Analytics snippet. The social media marketing team needs to enable the Facebook, Pinterest, and Twitter tracking pixels. Your customer service team wants a chat widget on the site. The CRO people demand the Google Optimize script on the page to start running experiments.
Generally, airlines marketing teams work with multiple vendors, agencies, and cross-departmental teams. When there is no tag governance process, third-party tags can quickly get out of control, and a page can end up with several tag manager containers. This is a widespread source of FID issues for airlines.