How to reduce JavaScript files of GTM in PageSpeed Insights

Google Tag Manager (GTM) JavaScript (JS) files are beneficial for tracking and analyzing website visitors' behavior. However, an excess of JS files can significantly impact your website's performance and functionality.

These JS codes make your website load slower, which worsens customers’ experience. Moreover, did you know that Amazon’s study shows that every 100ms page loading time costs 1% in revenue? So reducing JS files is crucial for your website.

In this article, we will show the solutions to reduce the number of GTM JS files, from auditing containers to switching to server tracking.

The primary advantage of optimizing JS files in GTM is the significant improvement in the website's loading speed.

Each JS file needs a separate HTTP request to load, and more such files mean more requests. For users, this leads to delays in website content loading that may result in a higher bounce rate. For your website directly, it can lead to worse SEO ranking and lower website traffic.

Decreasing JS files will reduce the number of HTTP requests, which will make your website load faster.

GTM files are usually found in the following sections of PageSpeed Insights reports:

• Reduce the impact of third-party code
• Reduce unused JavaScript of Google Tag Manager

Click on the section you’ve got problems with and jump directly to it.

Third-party JS code allows setting up tracking for different user actions (clicking, scrolling, sharing content, etc.). However, it impacts the website speed and often becomes one of the biggest loads on the web page.

To fix GTM files, we advise the following solutions:

Review all the tags in your GTM container, as some may no longer be needed for website performance analysis. This simple step will help reduce the number of third-party codes and the load on your website.

To complete this task, we suggest using GTM.Tools. Here you can inspect your container, edit, and mass-update Workspace contents.

Custom HTML Tags are helpful for some personalized tracking setups; however, they are often too bulky and, when fired, affect the website's load time. Review the custom tags you have and try to switch to GTM’s templates, as they are more optimized.

CDN caches your website data and delivers certain pages from a server closer to your visitors. This results in faster JS file serving.

Some tags don’t need to be fired once the page is loading. Set up tag sequencing for tags that can be delayed. Tag sequencing lets you specify tags to fire immediately before or after a given "primary" tag is fired. To find this option go to the “Advanced Settings” of tags you want to delay.

If reducing Custom HTML Tags and/or deleting some tags doesn’t work for you. We advise trying server-side tracking. 

How does it work? When switching to server-side, you move all the GTM tags from the web to the server container. These tags will be loaded into the server container instead of inside the user browsers. This will result in a faster website load.

Unused JS code is the code that isn’t required to render the page (to load and display the content of the page). This code increases the size of your JavaScript bundle resulting in slower website loading.

The most effective way to address this problem is to audit your GTM container and delete unnecessary tags.

However, keep in mind that, most likely, you won’t be able to exclude such JS files completely from this section in PageSpeed Insights. 

Some variable types can be part of GTM itself, and they are required to make GTM work in general. Such variables include Auto Event Variable, DOM Element, Element Visibility, etc. You may not even add these variables in your container, but you see them as “unused JS code” in PageSpeed Insights.

They are part of the GTM library, and deleting them can break the code and result in improper or non-working GTM.

Why does it appear in “unused JS code” if it is part of the GTM library and is essential for GTM to work? PageSpeed Insights marks it as unused code because you don’t have such a type of variable in your container. It is placed in the GTM library only.

As you can see, the fundamental problem you may face with GTM JS files is connected to unordered, overloaded containers. The critical solution is to monitor container size and delete unnecessary tags in time.

There are two ways to monitor the GTM container size:

Add the Get Google Tag Manager Size extension to your browser and just use it on your website when you want to check it.

The extension will show you the size of the container and provide details on the number of variables, tags, and triggers.

Use the link below to check the size of your GTM container. Instead of the “YOUR_ID” part in the URL, add the ID of your container (click on “Workspace” in GTM, and you’ll see the ID).

https://www.googletagmanager.com/gtag/js?id=YOUR_ID

When you get the result page, copy and paste it to TextEdit (for Mac OS) or Notepad (for Windows OS). Then, you can see the size of this file - that’s the size of your GTM container.

When to check GTM container size?

The limit container size is 200 KB, but GTM will warn you if you reach 140 KB. Of course, keeping containers far smaller than this is highly recommended so as not to impact the website's performance.

We suggest monitoring container size from time to time, especially after massive changes and tracking setups, so that you can control the impact of GTM code on your website performance.

The excess of GTM JS files can significantly impair the performance score of your website in PageSpeed Insights. These codes make it load slower, causing a higher bounce rate and worse SEO ranking.

The most effective ways to reduce the number of GTM JS files are to control their size, audit GTM containers, and delete unnecessary tags. However, if decreasing the number of tags doesn’t work, we advise considering server-side tracking instead of client-side. With the server side, all the GTM tags will be loaded into the server container instead of the browser, resulting in a faster website load.