This article is an introduction to page performance and how it relates to tagging. It covers the basics of the browser load process, defines some important terms, and summarizes the available performance options in iQ Tag Management.
In this article:
Page performance is the measure of how quickly a web page loads and renders in the browser. The primary interest in 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.
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.
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 "utag".
Tealium does not host nor control the performance of third-party files.
All modern tag vendors have switched to the asynchronous method, which is one of the most common ways to improve page load speed.
What does iQ Tag Management do?
The utag.js loader file and all subsequently loaded tag files use the asynchronous method.
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 (i.e. percieved load time).
What does iQ Tag Management do?
Vendor tracking is delayed until the DOM-Ready event to minimize the impact on page rendering.
<head> tag or inside the
<body> tag. The Tealium utag.js file must be loaded inside the <body> tag.
Base HTML structure:
<!-- Script Files here -->
<!-- Tealium utag.js asynchronous script here -->
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.
The Ready Wait Flag found in the Publish Configuration area controls when utag.js will begin executing. By default, this flag is "Off" and utag.js begins executing as soon as it's loaded 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.
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 (eg. utag.4.js) into the page. This is done to minimize the risk of introducing a code error into the main utag.js file i.e. 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.
As mentioned, the default behavior in utag.js is to wait for the DOM-Ready event before firing the vendor tags. The Wait Flag is a tag-level setting that controls this logic for individual tags. The default setting is "Yes", which means "wait for DOM-Ready". When this flag is set to "No", the individual tag will run as soon as possible (usually prior to DOM-Ready).
Read more about the Wait Flag 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.