Shopify CWV Case Study: +17% Conversions, $1.2M Mobile Revenue

A Shopify Plus fashion brand cut mobile LCP from 4.7s to 1.9s, INP from 312ms to 124ms, and CLS from 0.27 to 0.04 over a 12-week project. The result: a 17% lift in mobile conversion rate, a 24% drop in bounce, and an additional $1.2M in annual mobile revenue on a $28M base. This is the full breakdown -- the diagnosis, the six fixes that moved the numbers, the A/B test methodology that proved causation rather than correlation, and the dashboard the team uses now to keep CWV from regressing. If you run a Shopify Plus store and your mobile conversion rate sits below half your desktop rate, the playbook below is the one we would run again.

This case study documents the full process: baseline measurement, the specific optimizations we made, the performance results, and -- most importantly -- the measurable business impact on conversion rates, bounce rates, and revenue over 90 days.

Baseline: the performance and business problem

The store had approximately 8,500 product pages, 120 collection pages, and a heavily customized Shopify Plus theme. Mobile traffic represented 72% of all sessions but only 48% of revenue -- a clear signal that mobile users were converting at a much lower rate. The performance data explained why.

The problems were widespread: unoptimized images served as JPEGs without responsive sizing, 23 installed Shopify apps injecting JavaScript into every page (total: 1.2MB of app-injected JS), a heavily customized theme with 450KB of CSS, web fonts loading without font-display: swap, and product variant selectors causing layout shifts when switching sizes.

Quantifying the CWV-to-revenue correlation

Before making changes, we analyzed three months of Google Analytics 4 data alongside CrUX field data to establish a correlation between page speed and business metrics. We segmented sessions by LCP into three buckets: fast (under 2.5s), moderate (2.5-4s), and slow (over 4s).

The data was striking: sessions with fast LCP (under 2.5s) converted at 2.8% -- four times higher than sessions with slow LCP (over 4s), which converted at just 0.7%. The moderate bucket sat at 1.6%. This meant that moving the majority of traffic from the slow bucket into the fast bucket could potentially double the site-wide conversion rate.

We also found that CLS had an outsized impact on mobile bounce rates. Sessions experiencing high CLS (above 0.25) had a 67% bounce rate on product pages, compared to 38% for sessions with low CLS. Users were tapping "Add to Cart" only to have the page shift and send them to a different product or trigger an unintended navigation.

The optimizations: what we changed

We organized the work into four phases over six weeks. Each phase targeted specific metrics and was measured independently to attribute impact accurately.

Phase 1: Image pipeline overhaul (Week 1-2)

The store's product images were the primary LCP bottleneck. Every product had 4-6 images uploaded as high-resolution JPEGs (average 1.8MB each). Shopify automatically serves WebP when the browser supports it, but the original dimensions were not responsive -- a 3000x3000 pixel image was served to mobile devices with 390px-wide screens.

We implemented Shopify's image_url filter with width parameters and added srcset and sizes attributes to all product images in the Liquid templates. The hero product image received fetchpriority="high" and a preload link. Gallery thumbnails used loading="lazy".

{%- comment -%} Hero product image with responsive sizes {%- endcomment -%}
<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  srcset="
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 600 }} 600w,
    {{ product.featured_image | image_url: width: 800 }} 800w,
    {{ product.featured_image | image_url: width: 1200 }} 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="{{ product.featured_image.alt | escape }}"
  width="{{ product.featured_image.width }}"
  height="{{ product.featured_image.height }}"
  fetchpriority="high"
  class="product__hero-image"
>

Result: LCP on product pages dropped from 4.1s to 2.4s. The image payload for mobile users decreased by 78% (from 1.8MB to 390KB average). See our LCP in Shopify guide for the complete Liquid template patterns.

Phase 2: App audit and JavaScript cleanup (Week 2-3)

The 23 installed Shopify apps were the second largest performance drain. We used Chrome DevTools Network panel to audit every third-party script and categorize apps by their JavaScript footprint and business value.

We removed 10 apps that were either unused or redundant. For the remaining 13 apps, we consolidated overlapping analytics tools (keeping only GA4), deferred review widget loading to after the main content was visible, lazy-loaded all marketing popups, and applied facade patterns to chat widgets. Total JavaScript on initial load dropped from 1.2MB to 340KB.

Result: INP improved from 520ms to 190ms on collection pages (where infinite scroll and filtering were the main interactions), and overall page weight dropped by 860KB. See our third-party scripts guide for facade pattern implementation details.

Phase 3: CLS fixes on product pages (Week 3-4)

Product pages had a CLS of 0.28, primarily from three sources: product images loading without explicit dimensions, variant selectors reshuffling the layout when switching sizes (available sizes vs. sold-out sizes changed the button row height), and the reviews widget injecting content below the fold that pushed the page down.

For images, we added explicit width and height attributes and CSS aspect-ratio to reserve space before load. For variant selectors, we used CSS min-height to ensure the button grid maintained consistent height regardless of which variants were available. For reviews, we added a placeholder container with a fixed minimum height matching the typical reviews section.

/* Reserve consistent space for variant buttons */
.product__variants {
  min-height: 52px; /* Height of one row of variant buttons */
  contain: layout; /* Prevent layout shifts from affecting parent */
}

.product__variant-button {
  width: 48px;
  height: 40px;
  /* Fixed dimensions prevent reflow when availability changes */
}

/* Reserve space for product images with aspect ratio */
.product__image-container {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-skeleton); /* Skeleton loading color */
}

/* Reserve space for reviews section */
.product__reviews-container {
  min-height: 400px;
  contain: layout style;
}

Result: CLS dropped from 0.28 to 0.04 on product pages. The mobile bounce rate on product pages decreased by 31% (from 52% to 36%). For more CLS fixes on Shopify, see our CLS in Shopify guide.

Phase 4: Theme and font optimization (Week 4-6)

The final phase addressed the theme CSS and font loading. The custom theme had 450KB of CSS, much of it unused legacy styles from previous redesigns. We audited the CSS with Chrome Coverage tool, found that only 38% was used on any given page, and restructured the stylesheets to split by page type (global, product, collection, cart).

For fonts, the theme loaded five custom font files from Google Fonts without font-display: swap. We reduced to two font weights (regular and bold), self-hosted the files, added font-display: swap, and configured size-adjusted fallback fonts to minimize CLS during the swap.

Result: Render-blocking CSS dropped from 450KB to 85KB (the global stylesheet). LCP on the homepage dropped from 5.2s to 2.1s. CLS from font loading was eliminated. See our font loading CLS fix guide for the complete approach.

Full results: performance metrics

All four page types moved from "Poor" to "Good" on all three Core Web Vitals. The CWV pass rate in Google Search Console went from 11% to 96% of URLs rated "Good" for mobile.

Business results: the revenue impact

We tracked business metrics over 90 days post-deployment, compared against the same period the previous year (seasonally adjusted) and the 90 days pre-deployment. The results were consistent across all measurement windows.

Conversion rate: Mobile conversion rate increased from 1.4% to 1.64% -- a 17% lift. Desktop conversion rate also improved slightly (3.1% to 3.3%), likely due to the JavaScript and CSS optimizations benefiting all devices. The product page had the largest individual improvement: its add-to-cart rate jumped 22% after the image and CLS fixes.

Bounce rate: Overall mobile bounce rate decreased from 58% to 44% (a 24% reduction). Product page bounce rate dropped the most dramatically, from 52% to 36%, largely attributable to the CLS fixes preventing accidental navigations and the faster LCP keeping users on the page.

Revenue impact: Based on the 17% mobile conversion lift applied to the store's mobile traffic volume and average order value ($85), the annualized revenue increase was approximately $1.2M. The total project cost was $35,000, yielding a 34x return on investment.

Organic traffic: Organic search traffic grew 31% over 90 days. While not all of this can be attributed to CWV alone (the store also made content improvements during this period), the timing closely correlated with the CWV improvements showing in CrUX data. Google Search Console showed average position improving from 18.4 to 12.7 for the store's top 100 keywords.

Lessons for e-commerce teams

Frequently asked questions