Fix Hotjar Speed Penalty on Shopify: Optimize Session Recording Latency

1. The Technical Problem

Hotjar observes all DOM mutations, CSS style changes, and pointer events in real time to generate session recordings and heatmaps.

Continuous DOM mutation observers cause severe frame drops and Interaction to Next Paint (INP) failures during scrolling and cart additions on budget mobile devices.

2. Engineering Resolution Strategy

1. Remove Hotjar from checkout funnels. 2. Initialize Hotjar only after page interactive state (`window.onload` + idle timeout). 3. Restrict sampling rates to 20% of traffic.

<!-- Delayed Hotjar Tracking Snippet -->
<script>
  window.addEventListener('load', function() {
    setTimeout(function() {
      (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
      })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    }, 3000);
  });
</script>

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

Frequently Asked Questions