Optimize Rebuy Smart Cart & AI Recommendations Speed on Shopify

1. The Technical Problem

Rebuy powers high-converting smart carts and cross-sells, but injecting heavy cross-sell widgets on product and cart pages can increase Total Blocking Time.

Dynamic widget injection triggers multiple re-renders and unstyled content flashes as recommendations fetch from Rebuy API endpoints.

2. Engineering Resolution Strategy

1. Reserve CSS container height to prevent CLS. 2. Load Smart Cart assets on the first 'Add to Cart' click rather than on initial page load. 3. Pre-cache product recommendations via Edge Workers.

<!-- On-Demand Rebuy Smart Cart Loading -->
<script>
  var rebuyLoaded = false;
  function initRebuy() {
    if (rebuyLoaded) return;
    rebuyLoaded = true;
    var s = document.createElement('script');
    s.src = 'https://cdn.rebuyengine.com/onsite/js/rebuy.js?shop=YOUR_SHOPIFY_DOMAIN';
    s.async = true;
    document.body.appendChild(s);
  }
  // Initialize when user clicks cart or after 3s idle
  document.querySelectorAll('a[href="/cart"], button[name="add"]').forEach(function(el) {
    el.addEventListener('click', initRebuy, { passive: true });
  });
  setTimeout(initRebuy, 3000);
</script>

💡 Pro-Tip: Always create a duplicate theme backup before editing theme.liquid or snippet files.

Frequently Asked Questions