Interaction to Next Paint (INP) is the latest addition to Google’s Core Web Vitals metrics in March 2024, bringing new attention to how quickly pages respond to user interactions (because now it impacts SEO).
While most Tealium iQ customers see no issues with that relatively new metric, a small number of Tealium customers with particularly heavy tag setups noticed INP performance challenges and asked us to see what we could do to avoid having Tealium iQ’s tags contribute to the problem.
To combat issues, we’ve introduced an optional setting in utag.js Version 4.52. For more on this, see our blog, utag.js Version 4.52 Offers Better Reliability, Performance, and SPA Support.
utag.js Version 4.52 helps improve INP scores in extreme cases when tag complexity impacts page responsiveness. Our research shows that this approach comes with some tradeoffs (for example, exit link tracking window, due to faster navigation), which we discuss below.
What Is INP, and Why Does It Matter?
INP measures how quickly a page visually updates after a user interacts, things like clicks, taps, or key presses. Today, Google factors poor INP scores into their search rankings, which has put the metric on the radar of performance optimization and SEO teams everywhere.
For most customers, past versions of utag.js are perfectly fine, and their INP scores aren’t a problem. However, for a handful of customers with exceptionally complex tagging configurations involving many resource-heavy tags firing on most user interactions, INP performance can degrade.
We set out to reproduce the issues reported by impacted customers, to see what we could do to help.
Test Setup
To investigate customer reports, we needed a way to test the impact different levels of tag complexity had on the metric.
To give us an incremental way to simulate high tag complexity, we added ten simple tags to a Tealium iQ profile and applied a wasteful tag-scoped extension to each, making the complexity controllable via query string parameter:
// This is a very slow, heavy thing to do - we're trying to slow things down
var numberOfTimes = Number(b["qp.tag_complexity_factor"] || '0') || 0;
var wastefulString = '';
for (var i = 0; i < (numberOfTimes * 10); i++) {
for (var j = 0; j < (numberOfTimes * 10); j++) {
// this will happen a bunch of times per tag and is very silly
wastefulString += (i+j);
}
}
That lets us easily test various scenarios, using the extension described in this Google post.
The complexity increase isn’t linear, and since the strings keep getting longer, each successive iteration also gets a little bit more resource-insensitive, which isn’t reflected in the below chart. All 10 sample tags used the same complexity setting – another multiplier not reflected in the chart that adds a full order of magnitude to the loop counts.
By visiting our test page with various ‘complexity’ settings, we were able to reliably test various extreme conditions and the related trade-offs.
Please note, you can explore this report (Demo of approaches and tradeoffs, with various tag complexities and exit navigation strategies) with the test pages we used illustrating various tradeoffs in more detail. We expect some failures in the ‘Demo’ cases – those cases are meant to illustrate the tradeoffs. In contrast, the ‘Test’ cases are expected to pass reliably.
Findings
Here are some key benchmarks from our testing and development – Google wants INP below 200ms:
| Complexity | Default (ms) | 4.52 – Nonblocking (ms) |
| 50 | 48 | 32 |
| 100 | 368 | 48 |
| 150 | 944 | 112 |
| 200 | 3,496 | 160 |
In summary, at very high levels of complexity (far beyond what customers typically implement), we saw significant INP degradation when we didn’t use the nonblocking_tags setting. The example is contrived, but it proves the point – Tealium iQ tags can impact INP in extreme cases.
That let us develop the new nonblocking_tags setting, introduced in utag version 4.52. That new setting delivered dramatic improvements in those cases, ensuring responsiveness even with exceptionally heavy tag loads, at the cost of exit link tracking (which has always been a race anyway).
To round out our tests, we also introduced a relatively short navigation delay across the site to ensure complete tracking, but that’s not a new problem for anyone familiar with web tracking.
Again, you can explore this report, Demo of approaches and tradeoffs, with various tag complexities and exit navigation strategies.
New: Optional Non-Blocking Tag Execution
The new, optional nonblocking_tags setting can improve INP scores in extreme cases. It works by deferring tag execution to be nonblocking. Since tags fire asynchronously with that setting active, they don’t block the ‘next paint’, which keeps user interactions responsive.
Importantly, we retained tag load order to match what’s defined in the Tealium iQ UI.
- Default Behavior (Blocking): Tags block the page while firing to ensure all events are tracked, including critical navigation and exit links.
- Optional Behavior (Non-Blocking): Tags fire asynchronously, improving INP scores but introducing a tradeoff—navigation events may occasionally be missed if a user moves away too quickly.
Who Is This Option For?
For the vast majority of Tealium iQ customers, no changes are needed. INP concerns only emerge in rare cases of extreme tag complexity – situations where dozens of resource-heavy tags fire on user interaction.
If that doesn’t sound like your setup, or you already checked and your INP scores are fine, you don’t need to enable nonblocking_tags. Tealium iQ will continue working as expected with no performance concerns.
Testing and Next Steps
If you’re experiencing INP performance issues and want to see if this setting can help, here’s how to test the nonblocking_tags setting:
- Update to utag.js version 4.52
- Set the nonblocking_tags setting to true in a preloader extension (see doc for details).
- Publish to your ‘dev’ environment (or use a sandbox profile for more flexible testing).
- Use the Web Vitals Chrome extension or other methods to measure INP scores on your pages, making sure to test exit link tracking works as expected.
Be sure to test pages with critical navigation or exit links to confirm that tracking remains accurate for your setup under various network conditions to avoid lost data due to faster navigation.
And again, if your initial INP scores aren’t an issue, there’s no need to use this new option.
Key Takeaways
For the small minority of our customers with exceptionally heavy tagging implementations, utag.js version 4.52 introduces a way to improve INP scores without the need to overhaul their setup. The new nonblocking_tags option makes tags non-blocking without changing other behavior.
The majority of customers can stick with Tealium iQ’s default behavior, but it’s worth checking your page’s Core Web Vitals metrics if you haven’t lately, since those can impact your SEO.
When testing a new setting, make sure to test pages with critical navigation or exit links to confirm that tracking remains accurate for your setup.
If you have questions or want to explore this feature further, please reach out to your Tealium Customer Success Manager.
