Stape
Search
Try for free

How to reduce JavaScript files of GTM in PageSpeed Insights

Updated
Aug 22, 2024
Published
Jul 25, 2024

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.

Why you should decrease JavaScript files of GTM

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.

How to reduce JavaScript files of GTM

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

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

Reduce the impact of third-party code

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.

Reduce the impact of third-party code

To fix GTM files, we advise the following solutions:

Solution 1. Audit the Tags.

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.

GTM tools workspace

Solution 2. Reduce the number of Custom HTML Tags.

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.

Custom HTLM tag

Solution 3. Use a Content Delivery Network (CDN).

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

When you host on Stape and add a custom domain for server-side tracking, you have the option to use Global CDN or Own CDN, which has benefits for precise tracking.

Solution 4. Delay firing low-priority tags.

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.

Tag sequencing

Solution 5. Switch to server-side tracking.

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.

How server-side tracking works
Faster website load is one benefit of server-side tracking, check our blog post to see more advantages.

Reduce unused JavaScript of Google Tag Manager

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.

Reduce unused JavaScript files

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.

Take control of JavaScript files of GTM

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:

Using extension

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.

Container size extension

Get a response from GTM

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).

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.

GTM container size
❗Note: The number will be higher with this method than with the extension, as it includes 33 KB of the GTM library. The extension counts only the container’s contents (tags, triggers, variables). The difference between the extension’s and GTM’s response can be even higher than 33 KB because the GTM’s response decompressed container size, making it heavier than 33 KB.

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.

Conclusion

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.

Tagged with:gtm server

Try Stape for all things server-sideright now!