Lazy Loading and Code Splitting for Magento & Shopify

Introduction

Large JavaScript bundles and heavyweight images are major culprits behind slow page loads. Lazy loading defers loading of off‑screen resources, while code splitting breaks a monolithic bundle into smaller, on‑demand chunks. Together they boost Largest Contentful Paint (LCP) and First Input Delay (FID)—critical SEO signals.

1. What Is Lazy Loading?

Lazy loading postpones the download of resources (images, iframes, videos) until they are about to enter the viewport. Modern browsers support the loading="lazy" attribute on <img> and <iframe> elements, which is the simplest way to implement it.

1.1 Image Lazy Loading Example

<img src="/media/catalog/product/hero.jpg"
     alt="Premium leather handbag"
     loading="lazy"
     width="800" height="800" />

• The image will not be requested until the user scrolls near it, reducing initial payload.

1.2 JavaScript Lazy Loading with Dynamic import()

// Product detail page – load the carousel only when the user clicks "View Gallery"
document.getElementById('view-gallery').addEventListener('click', async () => {
  const { initCarousel } = await import('./components/Carousel.js');
  initCarousel();
});

• The Carousel.js chunk is fetched only on demand, keeping the main bundle lightweight.

2. Code Splitting Fundamentals

Code splitting creates separate bundles for different parts of the application. It can be done statically (via Webpack entry points) or dynamically (via import()).

2.1 Webpack Configuration for Magento

Create webpack.config.js in the theme folder:

module.exports = {
  entry: {
    main: './src/index.js',
    product: './src/product.js',
    checkout: './src/checkout.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 5,
      minSize: 30_000
    }
  }
};

• Generates separate bundles (main, product, checkout) that browsers can cache independently.

2.2 Vite Configuration for Shopify Hydrogen

Create vite.config.js:

import { defineConfig } from 'vite';
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
          if (id.includes('src/components')) {
            return 'components';
          }
        }
      }
    }
  }
});

• Splits vendor libraries (react, react-dom) into a separate chunk.

3. SEO Implications

4. Magento Implementation Steps

1. Enable RequireJS Optimizations – Set dev/js/merge_files and dev/js/merge_script to 1 in the admin configuration.
2. Add loading="lazy" to product image templates (catalog/product/view/media.phtml).
3. Integrate Webpack via the Magento_Theme module’s requirejs-config.js to point to the generated bundles.
4. Test with Lighthouse – Ensure LCP drops below 2.5 s.

5. Shopify Implementation Steps

1. Add loading="lazy" to <img> tags in sections/product-template.liquid.
2. Leverage Hydrogen’s built‑in code splitting – The default Vite config already creates a vendor chunk.
3. Deploy to a CDN (Vercel or Cloudflare) – Enable edge caching for static chunks with a Cache‑Control: public, max-age=31536000, immutable header.
4. Run WebPageTest – Verify that the first paint occurs under 1 s.

6. Performance Validation

7. Checklist

• Add loading="lazy" to all off‑screen images and iframes.
• Implement dynamic import() for heavy UI components.
• Configure Webpack or Vite for static code splitting.
• Verify that JavaScript bundles are < 150 KB gzipped.
• Test with Lighthouse and ensure LCP < 2.5 s.
• Deploy bundles with immutable caching headers.
• Monitor Core Web Vitals after launch.

Conclusion & Call‑to‑Action

Lazy loading and code splitting are essential tools for delivering fast, SEO‑friendly e‑commerce experiences on Magento and Shopify. Ready to slim down your site and climb the rankings? Click the “Start a project” button in the MODRACX portfolio, and let’s implement a high‑performance front‑end together.

Kenneth D’Silva – Magento & Shopify specialist, MODRACX