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:

Table of Contents Placeholder

What is Page Performance?

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.

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. Everything from network latency, file compression, and browser caching to CSS, fonts, and inline JavaScript have an impact on performance. Tagging (loading JavaScript files) is just one of the factors of this complex process and will be the focus of this article. More specifically, we will explore the contributing factors to perceived page performance and what controls can be used within the iQ Tag Management console. Specifically, the focus is on two concepts that are most relevant to tagging and performance:

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.

This topic of what to measure is quite technical and can be researched via industry experts such as WebPagetest, Google's PageSpeed Tools, and Yahoo's YSlow.

The iQ Tag Management JavaScript library (utag.js) is designed to have little or no impact on the perceived load time of a page.

Tealium Files vs. Third-Party Files

At the foundation of the Tealium solution is our file serving framework, the Multi-CDN. This global and real-time solution ensures that Tealium's files are delivered to your visitors' browser at the quickest speed possible. The JavaScript loader (or wrapper) files contain the logic and configuration from your iQ Tag Management account and can be identified in your browser's network console by the names "utag.js" and "utag.#.js". These are the files served by Tealium from the "tags.tiqcdn.com" domain.

Example browser network log of Tealium files:

tealium-network-utag-files.jpg

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.

Asynchronous JavaScript

Asynchronous JavaScript is a method for delaying the loading of non-essential elements to prioritize page rendering to the user. You can think of asynchronous requests in a page like a "To Do" list for the browser: when the browser doesn't have other, higher priority elements to render, it will process the items in its asynchronous "To Do" list. The opposite effect is achieved when using synchronous JavaScript, which behaves like a "Must Do" list for the browser: the browser must block the rendering of the page in order to process items in its synchronous "Must Do" list.

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.

Additional reading:

DOM-Ready Event

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.

Additional reading:

iQ Tag Management Settings and Best Practices

There are several options in iQ Tag Management to help you control how JavaScript is loaded on your pages. Every website is different so there isn't a single optimal solution for everyone.  The default settings in iQ are balanced to have minimal impact on perceived load time and provide the greatest compatibility with the largest number of vendor tags.

Code Placement

Code placement refers to where in the HTML document the utag.js code snippet appears. There are two main locations where you might load JavaScript in your HTML: inside the <head> tag or inside the <body> tag. The Tealium utag.js file must be loaded inside the <body> tag.

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

File Compression and Minification

The files delivered from the Mult-CDN are compressed using the GZip industry standard.  This ensures the JavaScript files (text files) are as small as possible upon delivery to the browser. This behavior cannot be changed. The code within those JavaScript files is also minified by default. Minification adds another step of compressing the code files to only their essential text by removing comment lines and white space. You can turn this setting off if needed (eg. for debugging purposes).

Read more about the Minify Tag Templates setting.

Bundling

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.

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)

tlc-network-utag.jpg

Two vendor tags bundled

  • Number of files: 1 (utag.js)
  • Total Size: 17 KB
  • Total Time: 19 ms

tlc-network-utag-bundle.jpg

Read more about bundling individual tags or bundling any tag using the "All Pages" load rule.

Wait Flag (Tags)

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.

Tag Ordering

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.