Optimize Lucky Orange Heatmaps & Session Recording on Shopify

1. The Technical Problem

Session replay software monitors continuous micro-movements, mouse gestures, and form interactions, generating steady main thread overhead.

The script loads early in the page lifecycle, competing with critical checkout assets for thread execution.

2. Engineering Resolution Strategy

1. Delay script injection until 3.5 seconds after DOM ready. 2. Turn off live chat features if only heatmaps are needed. 3. Sample 25% of sessions instead of 100%.

<!-- Delayed Lucky Orange Execution -->
<script>
  window.addEventListener('load', function() {
    setTimeout(function() {
      var wa = document.createElement('script');
      wa.type = 'text/javascript'; wa.async = true;
      wa.src = 'https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wa, s);
    }, 3500);
  });
</script>

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

Frequently Asked Questions