shares
It is easier to optimize correct code than to correct optimized code.
Donald Knuth
The core methods for deferring JavaScript execution using Google Tag Manager (GTM) involve controlling the tag’s firing trigger or utilizing GTM’s Custom Templates API for programmatic script injection. Deferring non-critical scripts is vital for improving page load speed and metrics like Largest Contentful Paint (LCP) and First Input Delay (FID).
Deferring via Trigger Control
The simplest way to defer a script is by preventing its tag from firing on the initial page load and delaying it until later.
How to Implement (The Delay)
Identify Non-Critical Tags: Determine which of your current GTM tags (e.g., non-essential analytics, third-party marketing pixels, chat widgets) can afford to load after the main page content.
Change the Trigger Type:
For the identified non-critical tags, change the primary trigger from the default “All Pages” or “Page View” to a later-loading trigger.
Recommended Later Triggers:
- Window Loaded: Fires after all initial content, images, and third-party resources have finished loading (often a good balance for analytics).
- DOM Ready: Fires once the HTML is parsed and the Document Object Model (DOM) is built, but before all external resources (like images) have loaded.
- Timer: Set a trigger that fires after a specified delay (e.g., 2000 milliseconds or 2 seconds) after the page loads. This explicitly delays execution.
- Custom Event: Create a Custom Event trigger that fires only after a user interaction (like a scroll, mouse movement, or click), signaling that the user is actively engaged. This is the most aggressive deferral.
Configure the New Trigger:
Go to Triggers > New.
Select the appropriate type (e.g., Timer or Custom Event).
For a Timer trigger, set the Interval (e.g., $1500$ milliseconds).
Save the trigger and apply it to your non-critical tags.
What to Look For (Drawbacks)
Data Loss: If you delay a tag based on a user interaction or a long timer, you risk losing data from users who navigate away from the page before the tag fires. This is particularly concerning for crucial Pageview tags.
Sequential Loading: GTM tags generally execute in order. While delaying a tag helps, it doesn’t utilize the browser’s native defer attribute for parallel, non-blocking downloads.
Key Things to Look for & Pay Attention To
GTM Container Snippet – Asynchronous Load: the main GTM container snippet placed on your site must be loaded asynchronously (async). This is the default recommendation.
Critical Scripts – Avoid Deferring: scripts that are critical for the main visible content or core site functionality (e.g., a critical component’s JavaScript) should NOT be deferred.
Data Integrity – Initial Pageview: for analytics (GA4, UA), avoid excessively delaying the initial pageview tag, as this can affect the accuracy of the referrer and initial session data.
Testing – Preview Mode & Speed Tools: always use GTM’s Preview Mode to verify that your deferred tags are firing when and only when they should. Use tools like Google PageSpeed Insights and Lighthouse to confirm a positive impact on performance metrics (LCP, FID, Total Blocking Time).
