Clerk.js Now Reacts Faster to Dynamic Storefronts

A dynamic ecommerce storefront with recommendations and cart content updating in real time

Modern online stores rarely load everything at once. Products, carts, popups, search results and other sections often appear or change after the initial page load.

We’ve updated Clerk.js to react to these changes much faster, helping Clerk content appear when it should on modern, dynamic storefronts.

What changed?

Previously, Clerk.js checked the page for new content once every second.

That worked, but it meant content added between those checks could wait up to a second before Clerk noticed it. This could happen with single-page applications built with frameworks such as React or Vue, lazy-loaded sections, side carts, add-to-cart popups and other parts of a store that update dynamically.

Clerk.js can now watch the page for changes and react as soon as they happen.

On a live opted-in storefront, late-added content was picked up in around 250 ms instead of around 880 ms. That’s roughly 630 ms faster, or 3.5× the speed.

Faster across Clerk content

The improvement applies across Clerk content, including:

  • Recommendations
  • Popups
  • Content blocks
  • Email signup forms
  • Live Search

For shoppers, this means Clerk content can appear sooner when they navigate or interact with parts of your store that update without a full page reload.

It also reduces cases where dynamically added Clerk content appears late or doesn’t show when expected.

Less work when nothing is happening

There’s a performance benefit behind the scenes too.

Previously, Clerk.js scanned the page every second, adding up to around 60 scans per minute even when the page was completely idle.

With the new approach, Clerk.js does no scanning while the page is idle. It reacts only when something on the page actually changes.

When several changes happen together, such as a cart refresh adding multiple elements at once, Clerk.js groups them into a single pass. Full passes are capped at once every 500 ms, preventing pages with lots of activity from creating a growing queue of work.

The change also introduces no new API calls or network traffic.

Who is this for?

This update is particularly useful for stores using:

  • Single-page applications, including React and Vue storefronts
  • Lazy-loaded content
  • Dynamic carts and side carts
  • Add-to-cart popups
  • Other page elements that are added or updated after the initial page load

How to use it

You can turn the feature on in my.clerk.io by going to Settings → Features and enabling DOM monitoring.

Technically, this enables the existing observe_dom setting for your storefront.

Stores that opt in can use the new DOM monitoring behaviour immediately. Stores that don’t turn it on are completely unaffected.

If your storefront relies heavily on dynamically loaded content, enabling observe_dom can help Clerk keep pace with what’s happening on the page, with faster detection and less unnecessary work when the page is idle.

Book a FREE website review

Have one of our conversion rate experts personally assess your online store and jump on call with you to share their best advice.

You may unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

Get instant access after submitting. No credit card required.