DEV Community

Cover image for How Website Speed Affects eCommerce Sales
SoftWin
SoftWin

Posted on

How Website Speed Affects eCommerce Sales

Website performance is often treated as a secondary concern relative to features or design, but for eCommerce specifically, published research consistently shows a direct, measurable link between load time and revenue. This article summarizes the data and outlines the technical areas SoftWin most frequently finds responsible for slow load times on eCommerce sites.

The published data

  • Google's mobile performance research (based on ~900,000 mobile ad landing pages) found bounce probability increases by 32% as load time goes from 1s to 3s, by 90% at 5s, and by 123% at 10s.
  • Google/SOASTA research found that 53% of mobile users abandon a page taking longer than 3 seconds to load.
  • Akamai's research found a 1-second delay in mobile load time can reduce conversions by up to 20%.
  • Portent's analysis of conversion rate by load time found pages loading in ~1 second converting near 39%, dropping to roughly 1.9% at 2.4 seconds and 0.6% at 5.7 seconds.
  • Amazon has publicly stated that every 100ms of added latency can cost approximately 1% in sales.

Google also incorporates page experience signals — Core Web Vitals — directly into search ranking, meaning slow eCommerce sites face a compounding disadvantage: worse conversion rates and reduced organic visibility.

Core Web Vitals relevant to eCommerce

Metric What it measures Recommended threshold
LCP (Largest Contentful Paint) Time until the largest visible element renders ≤ 2.5s
INP (Interaction to Next Paint) Responsiveness to user input ≤ 200ms
CLS (Cumulative Layout Shift) Visual stability during load ≤ 0.1

Product pages and checkout are the highest-priority pages to evaluate against these thresholds, since they sit directly on the purchase path.

Common technical bottlenecks in eCommerce codebases

1. Unoptimized product images

Product photography is frequently the largest payload on a page.

<!-- Before -->
<img src="/products/sneaker-hero.png" alt="Sneaker" />

<!-- After -->
<img
  src="/products/sneaker-hero.webp"
  srcset="/products/sneaker-hero-480.webp 480w,
          /products/sneaker-hero-960.webp 960w,
          /products/sneaker-hero-1600.webp 1600w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 960px, 1600px"
  loading="lazy"
  alt="Sneaker"
/>
Enter fullscreen mode Exit fullscreen mode

Serving modern formats (WebP/AVIF) at appropriate resolutions, with native lazy-loading for below-the-fold images, is typically the highest-impact fix on image-heavy product pages.

2. Third-party script overhead

Chat widgets, analytics, retargeting pixels, and review plugins each add their own parsing and execution cost. Non-essential scripts should be deferred until after initial render:

window.addEventListener('load', () => {
  const script = document.createElement('script');
  script.src = 'https://widget.example.com/chat.js';
  script.async = true;
  document.body.appendChild(script);
});
Enter fullscreen mode Exit fullscreen mode

3. Missing CDN coverage

Serving static assets from a single origin server adds latency for visitors outside that region. Routing static assets through a CDN (Cloudflare, Fastly, CloudFront, or equivalent) is generally a low-effort, high-impact change.

4. Render-blocking resources on checkout

Checkout is the page with the most direct connection to revenue and should be treated as a separate performance budget from marketing pages:

<link rel="preload" href="/css/checkout-critical.css" as="style">
<script src="/js/checkout.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

Inlining critical CSS for above-the-fold checkout content and deferring non-essential JS are the most common fixes at this stage.

5. Theme and plugin bloat

On Shopify, WooCommerce, and Magento stores in particular, installed apps and extensions frequently inject their own JS/CSS regardless of whether they're used on the current page. Periodic audits to remove unused plugins are often the single highest-leverage fix on platform-based stores.

Measurement tools

  • Lighthouse / PageSpeed Insights — lab data, suitable for CI integration
  • Chrome UX Report (CrUX) / Search Console — real-user field data
  • WebPageTest — detailed waterfall analysis
  • web-vitals JS library — for tracking real-user Core Web Vitals in production
import {onLCP, onINP, onCLS} from 'web-vitals';

onLCP(console.log);
onINP(console.log);
onCLS(console.log);
Enter fullscreen mode Exit fullscreen mode

Summary

The link between site speed and eCommerce conversion rate is supported by multiple independent, published studies rather than anecdote. Product pages and checkout should be the first areas evaluated against Core Web Vitals thresholds, with image optimization, third-party script auditing, CDN coverage, and checkout-specific performance budgets typically producing the largest measurable gains.


SoftWin — eCommerce development and web performance optimization.

Top comments (0)