Page performance measures how quickly a web page loads and renders in the browser. The primary purpose of page performance is to optimize the user experience.
It’s no secret that a slow-loading page is a good way to lose visitors from your site, so maximizing page performance is generally considered a worthwhile endeavor.
As you begin to evaluate page performance, one thing becomes clear: there are a wide variety of factors that affect the speed of a loading page:
- Network latency
- File compression
- Browser caching
- DOM-Ready Event
Perceived load time vs. actual load time
Before we begin, it’s worth mentioning the difference between perceived load time and actual load time. The actual load time is traditionally a measurement from the browser that indicates when all of the assets of a web page have been processed. The perceived load time, arguably the more important of the two, is a measurement of when the web page is visually rendered and available to the user.
utag.js) is designed to have little or no impact on the perceived load time of a page.
Tealium files vs. third-party files
utag.#.js. These are the files served by Tealium from the
Example browser network log of Tealium files:
As the browser loads these Tealium files there might be additional requests for files that are required by your tag vendors. These files can be identified as coming from a domain other than
tags.tiqcdn.com and with names other than
Tealium does not host or control the performance of third-party files.
Browser file cache
Browsers have their own methods of optimizing page performance, the most widely known is file caching. The browser will save a copy of a file so that it doesn’t request the same content over the network repeatedly. This reduces network traffic and allows site pages to load more quickly once the initial assets are cached in the browser.
Learn more about how Universal Tag files are cached in the browser.
All modern tag vendors have switched to the asynchronous method, which is one of the most common ways to improve page load speed.
In iQ Tag Management, the
utag.js loader file and all subsequently loaded tag files use the asynchronous method.
For more information, read:
The DOM-ready event, also known as
DOMContentLoaded, is the browser’s way of indicating when it has completed the loading of the main content in the page. This event is commonly used as the trigger for loading non-essential elements of the page to ensure that the page renders as quickly as possible, which improves the percieved load time.
In iQ Tag Management, vendor tracking is delayed until the DOM-Ready event to minimize the impact on page rendering.
For more information, read:
iQ Tag Management settings and best practices
Code placement refers to where in the HTML document the
<head> tag or inside the
<body> tag. The Tealium
utag.js file must be loaded inside the
Base HTML structure:
<html> <head> <!-- Script Files here --> </head> <body> <!-- Tealium utag.js asynchronous script here --> .... </body> </html>
The best practice is to place the
utag.js code snippet at the top of the
<body>. This position allows your tag management configuration to load asynchronously while the page continues to render so that your tags are ready to fire at the DOM-Ready event. The
utag.js file can be placed lower in the
<body> if needed. In general, this will result in delayed loading of tags and/or a slightly faster perceived load time.
Read more about utag.js code placement.
Ready Wait flag
The Ready Wait flag can be found in the Publish Configuration area. It controls when
utag.js will begin executing. By default, this flag is Off and
utag.js begins executing as soon as it loads into the page. When this flag is set to On,
utag.js will wait for the DOM-Ready event before executing. You can deprioritize your tags in favor of possible gains in page load time by turning this flag on.
Setting Ready Wait Flag to On could lead to lost tracking due to visitors navigating away from the page before the tags have loaded. Always perform thorough testing before releasing new settings to your live site.
File compression and minification
Read more about the Minify Tag Templates setting.
Bundling allows vendor tag code to be included in the main
utag.js file to eliminate additional HTTP requests from the page. By default, the vendor tags configured in iQ Tag Management are loaded as separate files (for example,
utag.4.js) into the page. This is done to minimize the risk of introducing a code error into the main
utag.js file (for example, an error in one file will not affect the others). However, using separate files increases the number of HTTP requests the page makes to load your tags. And while the delivery of these files is optimized via the Multi-CDN and browser caching, if you need to optimize further then bundling is an option to consider.
Here is a simple example where bundling tags resulted in an 80% improvement in load time for the files coming from Tealium.
Two vendor tags unbundled
- Number of files: 3 (utag.js, utag.1.js, utag.21.js)
- Total Size: 18.2 KB (9.1 + 5.0 + 4.1)
- Total Time: 100 ms (54 + 23 + 23)
Two vendor tags bundled
- Number of files: 1 (utag.js)
- Total Size: 17 KB
- Total Time: 19 ms
Tag timing (tags)
As mentioned, the default behavior in
utag.js is to wait for the DOM-Ready event before firing the vendor tags. The Tag Timing setting is a tag-level setting that controls this logic for individual tags. The default setting is DOM Ready (default), which means “wait for DOM-Ready”. When this flag is set to Prioritized, the individual tag will run as soon as possible (usually prior to DOM-Ready).
Read more about the Tag Timing for tags.
Your configured tags are loaded into the page in the same order as they appear in the iQ Tag Management console. You can drag and drop tags into the desired order of loading. The Tealium best practice is to put your analytics tag(s) and other high priority tags at the top of the list to ensure they are the first ones loaded.
Read more about Tag Ordering.
Thank you for your feedback!
This page was last updated: January 7, 2023