Performance Improvements
This release delivers significant performance improvements for all end users, regardless of operating system or browser. Widget load times have been reduced by up to ~7x on average across the board through a combination of load batching, event batching, caching, bundle size reductions, runtime optimizations, and internal tooling and Node.js runtime updates.
In addition to the general speed improvements, we identified that end users on Windows machines were experiencing an extra level of degraded performance compared to other operating systems. This was caused by CPU throttling triggered by the way Windows handles concurrent iframe loading. The changes in this release also level the Windows experience so that it matches the performance of macOS and Linux.
Performance differences between incognito and non-incognito browser modes were also observed. Browser extensions such as password and secret managers that inject themselves into each iframe cause slight degradation compared to users who do not have such extensions or who use incognito mode.
We identified several areas across the application that contributed to these issues and made targeted changes to address them. All changes in this release are part of this effort:
- Event Batching
- Iframe Load Batching
- Widget Iframe Page Caching
- Lazily Loaded Stripe
- Iframe Loading UI
- UI Submodule Improvements
- UI Service Functions Spam Call Detection
- Improper Widget Placement Detection Warnings
- Internal Tool Updates
- Documentation Playground Code Jumping
The core logic inside widget iframes has been rewritten -- the state management and dependency injection layers were replaced, removing the external state management library in favor of the built-in state management features provided by the client-side framework. This, combined with further optimizations to prevent unnecessary rerenders, significantly reduces the CPU bottleneck at runtime.
Performance is also affected by how the integrating partner places widgets on the page and how they interact with the SDK. To help surface these issues, this release introduces Improper Widget Placement Detection Warnings that alert developers when widgets are mounted inside hidden or non-visible containers, and UI Service Functions Spam Call Detection that warns when the same UI function is called repeatedly in a short window -- a common pitfall caused by component re-renders in client-side frameworks. Additionally, the new plural UI Submodule functions allow integrators to batch multiple UI operations into a single call, reducing the number of cross-iframe messages and improving runtime performance.
Methodology
A stress test of 100 iframes on a single page was created to establish baseline metrics and compare them against the optimized version. Custom debugging and performance tracking tools were implemented to gather accurate measurements.
Metrics were collected from a varying number of Windows, macOS, and Linux users using both the Demo ATS and partner ATS sites integrated with HAPI Elements. Tests were run in both incognito and non-incognito browser modes, and each test was executed three times to calculate an average.
Load Time Metrics
The following table shows the before and after comparison from the 100-iframe stress test in non-incognito mode. Element creation time remained unchanged at 0.10 ms in both cases.
| Metric | Before | After | Improvement | Speed Factor |
|---|---|---|---|---|
| Average frame load time | 21,822.00 ms | 3,156.15 ms | 85.54% reduction | 6.91x faster |
| Max frame load time | 22,277.30 ms | 5,663.20 ms | 74.58% reduction | 3.93x faster |
| Min frame load time | 16,699.80 ms | 599.90 ms | 96.41% reduction | 27.84x faster |
| Total time until all frames loaded | 22,277.40 ms | 5,663.30 ms | 74.58% reduction | 3.93x faster |
Perceived Speed
In addition to the raw load time gains, the Iframe Loading UI (skeleton loaders) and Iframe Load Batching also improve perceived speed. Skeleton loaders provide immediate visual feedback while content loads, and batched loading ensures that the first widgets appear quickly rather than all competing for resources simultaneously.
Real-World Impact
The stress test uses 100 iframes to amplify performance differences, but ATS sites typically have 4--10 widgets on a single page. With the optimizations in this release, all end users -- on every operating system and browser -- will experience near-instant load times. Subsequent page loads will be even faster due to widget iframe page caching.
Future Work
Several areas have been identified for further optimization. These have been deprioritized as the current state of the application is already highly performant, but they remain on the roadmap for future releases.
All changes in this release are backwards compatible. No changes are needed in existing integrations.