Shopify JavaScript Performance Guide

{% comment %} Render-blocking (avoid) {% endcomment %} <script src="theme.js"></script> {% comment %} Deferred - executes after HTML parsing {% endcomment %} <script src="theme.js" defer></script> {% comment %} Async - independent scripts {% endcomment %} <script src="analytics.js" async></script> {% comment %} Module scripts are deferred by default {% endcomment %} <script type="module" src="components.js"></script>

// Load component JS when element enters viewport const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { // Dynamic import when visible import('./product-recommendations.js') .then(module => module.init(entry.target)); observer.unobserve(entry.target); } }); }, { rootMargin: '200px' // Load 200px before visible }); document.querySelectorAll('[data-recommendations]') .forEach(el => observer.observe(el));

// Load chat widget on first interaction const loadChat = () => { import('./chat-widget.js').then(m => m.init()); document.removeEventListener('mousemove', loadChat); document.removeEventListener('touchstart', loadChat); }; document.addEventListener('mousemove', loadChat, { once: true }); document.addEventListener('touchstart', loadChat, { once: true });

// Delay third-party scripts until after page load window.addEventListener('load', () => { setTimeout(() => { // Load analytics after 2 seconds const script = document.createElement('script'); script.src = 'https://analytics.example.com/track.js'; document.head.appendChild(script); }, 2000); });

// Use native browser APIs instead of libraries // Instead of jQuery for DOM queries: const products = document.querySelectorAll('.product-card'); // Instead of lodash debounce: function debounce(fn, delay) { let timeoutId; return (...args) => { clearTimeout(timeoutId); timeoutId = setTimeout(() => fn.apply(this, args), delay); }; } // Use Fetch API instead of jQuery.ajax fetch('/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: variantId, quantity: 1 }) }).then(res => res.json());