100% Working Shopify Speed Optimization Case Study (Real Shopify Store Results)

This case study walks through a complete Shopify speed optimization project on a mid-size fashion store - from a mobile PageSpeed score of 31 to 79 over three weeks. The store had 18 installed apps, uncompressed product images averaging 1.8MB each, a slider loading 5 hero images on every page visit, and third-party tracking scripts from 9 separate domains. Every fix is documented with before and after metrics, the tools used, and the specific decisions made at each stage.

The Store: Starting Point and Context

The store is a direct-to-consumer women's clothing brand that had been running for three years on Shopify Plus. The catalog contained approximately 340 active products, most with 3 to 6 color variants and 5 to 8 images per product. Monthly traffic was around 85,000 sessions, with mobile traffic at 71 percent of total sessions.

The store was running a premium third-party theme purchased two years earlier, which the team had customized heavily for seasonal promotions.

Starting baseline metrics (average of 3 PageSpeed tests):

Desktop scores were substantially better: Homepage 71, Product Page 68, Collection Page 74. This is typical - the desktop simulation does not expose the mobile-specific problems that real visitors experience. The team's stated goal was "getting above 50 on mobile." After reviewing the audit results, the revised target became 75+ on mobile with all Core Web Vitals in the Good range.

Phase 1: Full Store Audit

The audit took approximately four hours and used five tools in combination. No fixes were made during this phase - only documentation.

What the audit found - 18 installed apps:

Additional audit findings: average product image size 1.8MB (JPEG, original camera resolution), hero slider loading 5 images at 2.4MB each (12MB total on every homepage visit), 9 external domains loading scripts, and GA4 firing twice on every page (loaded both directly in theme.liquid and inside the GTM container).

Phase 2: Prioritized Fix Plan

Based on the audit, fixes were ranked by estimated score impact across three weeks of implementation organized into four phases.

Step 1: Image Optimization (Days 3 to 5)

All product images were replaced using a batch conversion script with Sharp (Node.js) to convert to WebP at 78 percent quality and resize to 1200px maximum width.

const sharp = require('sharp');

async function optimizeImage(inputPath, outputPath) {
  await sharp(inputPath)
    .resize(1200, null, { withoutEnlargement: true, fit: 'inside' })
    .webp({ quality: 78 })
    .toFile(outputPath);
}

<img
  src="{{ section.settings.hero_image | image_url: width: 1400, format: 'webp' }}"
  srcset="
    {{ section.settings.hero_image | image_url: width: 750, format: 'webp' }} 750w,
    {{ section.settings.hero_image | image_url: width: 1400, format: 'webp' }} 1400w
  "
  sizes="(max-width: 768px) 100vw, 100vw"
  fetchpriority="high"
  loading="eager"
  width="1400"
  height="600"
  alt="{{ section.settings.hero_image.alt | escape }}"
>

Collection page pagination was reduced from 48 products to 24. Lazy loading was added to all product images after the first row.

Results after Step 1 (Day 5):

Step 2: App Audit and Script Restriction (Days 8 to 13)

Three questions were applied to each app: Is it generating measurable revenue? Can it be page-restricted rather than global? Is there a lighter alternative?

Removed entirely (7 apps, saving 405KB and $87/month):

Page-restricted using Liquid conditionals (6 apps):

{% if template == 'product' %}
  {% render 'size-guide-init' %}
  {% render 'subscription-app-init' %}
  {% render 'wishlist-init' %}
{% endif %}

{% if template == 'cart' %}
  {% render 'upsell-init' %}
{% endif %}

{% if template == 'index' %}
  {% render 'instagram-init' %}
  {% render 'countdown-init' %}
  {% render 'popup-init' %}
{% endif %}

Deferred until first interaction (3 apps): Chat widget, heatmap tool, and Klaviyo delayed until first scroll interaction or 4 seconds after load, whichever came first.

var deferredLoaded = false;

function loadDeferredApps() {
  if (deferredLoaded) return;
  deferredLoaded = true;
  // Load chat widget and heatmap here
}

['scroll', 'mousemove', 'touchstart'].forEach(function(e) {
  document.addEventListener(e, loadDeferredApps, { once: true, passive: true });
});

setTimeout(loadDeferredApps, 4000);

Tracking consolidation: GA4 was loading both directly and through GTM - the direct snippet was removed. All tracking (GA4, Facebook Pixel, TikTok Pixel, Pinterest Tag) now runs through GTM. External tracking domains reduced from 9 to 3.

Results after Step 2 (Day 13):

Step 3: Liquid Template Cleanup (Days 14 to 15)

The mega menu was building by looping all 40+ collections and making metafield lookups on each iteration - 340ms render time on every page of the store.

<!-- Before: inefficient collection loop with metafield lookups -->
{% for collection in collections %}
  {% assign nav_image = collection.metafields.custom.nav_image %}
  {% if nav_image != blank %}
    <a href="{{ collection.url }}">
      <img src="{{ nav_image | image_url: width: 200 }}" alt="{{ collection.title }}">
    </a>
  {% endif %}
{% endfor %}

<!-- After: using linklist, no full collection iteration -->
{% for link in linklists['main-menu'].links %}
  {% if link.type == 'collection_link' %}
    <a href="{{ link.url }}">{{ link.title }}</a>
  {% endif %}
{% endfor %}

Navigation render time after: 28ms (down from 340ms). Six featured collection sections were each making independent collection queries - refactored to use shared section settings, eliminating 5 redundant queries per page load.

Results after Step 3 (Day 15):

Step 4: Advanced Resource Prioritization (Days 16 to 18)

Critical CSS extracted and inlined (14KB inlined, 128KB full stylesheet async):

<head>
  <style>/* 14KB of above-fold critical CSS */</style>
  <link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style"
    onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="{{ 'theme.css' | asset_url }}"></noscript>
</head>

LCP image preload with srcset-aware hint:

<link
  rel="preload"
  as="image"
  href="{{ section.settings.hero_image | image_url: width: 1400, format: 'webp' }}"
  imagesrcset="
    {{ section.settings.hero_image | image_url: width: 750, format: 'webp' }} 750w,
    {{ section.settings.hero_image | image_url: width: 1400, format: 'webp' }} 1400w
  "
  imagesizes="100vw"
>

Additional optimizations applied: Preconnects to Shopify CDN and Google Fonts, font weights reduced from 10 to 4 (2 weights each for Playfair Display and Lato), font-display: swap added with preload, and { passive: true } added to 14 scroll and touch event listeners in theme.js.

Results after Step 4 (Day 18):

Full Before vs After Comparison

Mobile PageSpeed scores:

Core Web Vitals:

Technical metrics:

Business metrics (30 days post-optimization vs 30 days prior):

Challenges Faced

Lessons Learned

Replication Strategy

For stores with a similar profile (mid-size catalog, 3+ years of app accumulation, premium theme, multiple tracking pixels), this sequence applies directly.

Summary

A mobile PageSpeed score improvement from 31 to 79, all Core Web Vitals moving from Poor to Good, 87 percent reduction in page weight, and $26,900 additional monthly mobile revenue. Achieved in 18 days, 46 developer hours, with a net reduction in monthly app spend.

The three changes that drove the most score improvement: image optimization and slider replacement (+18 points), app restriction and TBT reduction (+12 to 14 points per page), and the Liquid navigation fix combined with critical CSS (+8 to 10 points per page). Everything else - fonts, preloads, passive listeners, preconnects - contributed the final 10 points that pushed scores from the mid-60s into the upper 70s.