Fix Yotpo Reviews Render-Blocking Latency on Shopify (Step-by-Step)

1. The Technical Problem

Yotpo loads extensive client review stylesheets, pagination templates, and Q&A bundles immediately on product page load, even though reviews sit far below the fold.

Browsers parse hundreds of lines of Yotpo CSS and JavaScript while the customer is still viewing the main product image and price, severely degrading mobile Interaction to Next Paint (INP).

2. Engineering Resolution Strategy

1. Replace synchronous star rating badges with lightweight native SVG stars. 2. Implement an IntersectionObserver to inject the full Yotpo widget only when the user scrolls within 400px of the review section. 3. Purge unused legacy Yotpo modules.

<!-- IntersectionObserver Lazy-Loader for Yotpo Reviews -->
<div id="yotpo-reviews-placeholder" style="min-height:200px;"></div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var placeholder = document.getElementById('yotpo-reviews-placeholder');
    if (!placeholder) return;
    var observer = new IntersectionObserver(function(entries) {
      if (entries[0].isIntersecting) {
        var s = document.createElement('script');
        s.src = 'https://staticw2.yotpo.com/YOUR_APP_KEY/widget.js';
        s.async = true;
        document.body.appendChild(s);
        observer.disconnect();
      }
    }, { rootMargin: '400px 0px' });
    observer.observe(placeholder);
  });
</script>

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

Frequently Asked Questions