Fix Slow Page Speed on Shopify

Critical Priority

Direct Answer

Slow page speed on Shopify is most commonly caused by too many apps injecting JavaScript, large unoptimised images, and render-blocking CSS from unused theme sections. The fastest wins are: audit and remove unused apps, compress images to under 200KB, use Shopify's native lazy loading (loading="lazy"), and switch to a lightweight theme. Target an LCP under 2.5 seconds and TBT under 200ms.

The Problem

A slow Shopify store hurts both conversions and search rankings. Page speed is a confirmed Google ranking factor, and Core Web Vitals (LCP, CLS, TBT) are measured by real users via the Chrome User Experience Report. Shopify stores are particularly vulnerable to speed issues because each installed app adds JavaScript to the storefront.

Impact: Google uses Core Web Vitals as a ranking signal via the Page Experience update. Stores failing LCP thresholds (above 4 seconds) are ranked below comparable stores that pass. Additionally, a 1-second load time delay reduces e-commerce conversion rates by approximately 7%.

How to Fix It (Step-by-Step)

Measure your current performance baseline

Run your store through PageSpeed Insights (pagespeed.web.dev) and record your LCP, CLS, TBT, and overall Performance score. Also run Chrome DevTools → Performance tab to see the specific bottlenecks. Document these numbers before making changes so you can measure improvement.

Audit and remove unused apps

In Shopify Admin → Apps, list every app installed. For each app ask: is it actively used? Even deactivated or unused apps can still inject JavaScript. Remove apps you do not use. To check what scripts each app adds, use Chrome DevTools → Network tab → filter by JS and look for third-party domains.

Optimise and compress all product images

Product images are the largest files on most Shopify pages. Before uploading, compress images using TinyPNG (free) or Squoosh. Target JPEG quality 80-85% for photos and under 200KB file size. Shopify automatically serves WebP to supporting browsers via its CDN - you do not need to convert manually.

Implement lazy loading on below-fold images

Any product image not visible in the first viewport should use loading="lazy". This defers image loading until the user scrolls toward it, reducing initial page load time. Check your theme's image Liquid tags.

liquid

{%- comment -%} Lazy loading with image_url filter (not deprecated img_url) {%- endcomment -%}
<img
  src="{{ image | image_url: width: 800 }}"
  alt="{{ image.alt | escape }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
  loading="lazy"
  decoding="async"
>

Use Shopify's image_url filter with width parameters

Shopify's CDN resizes images on-demand using the image_url filter. Always specify a width appropriate to the display size. A 3000px image displayed at 400px still loads the full 3000px version unless you specify width in the filter. Use srcset for responsive images.

Defer or async non-critical scripts

Add the defer or async attribute to any <script> tags that are not required for initial page render. In your theme.liquid, look for <script src="..."> tags without these attributes. Custom JavaScript added via the theme code editor is a common culprit.

liquid

{%- comment -%} Defer non-critical scripts - place in theme.liquid before </body> {%- endcomment -%}
<script defer src="{{ 'your-script.js' | asset_url }}"></script>

{%- comment -%} For inline scripts, use requestIdleCallback to defer execution {%- endcomment -%}
<script>
  if ('requestIdleCallback' in window) {
    requestIdleCallback(function() {
      // your non-critical code here
    });
  }
</script>

Reduce render-blocking CSS

In PageSpeed Insights, look for "Eliminate render-blocking resources" warnings. These are usually large CSS files loaded in the <head>. For critical CSS (above-fold styles), consider inlining it. For non-critical CSS, use media="print" with an onload swap pattern to load it asynchronously.

Test after each change and re-benchmark

Make changes one at a time and re-run PageSpeed Insights after each. This lets you quantify the impact of each optimisation. Once done, submit your key product and collection URLs for re-indexing in Google Search Console.

Common Mistakes to Avoid

Only testing speed on desktop

Google uses mobile-first indexing - it primarily evaluates and ranks your site based on the mobile version. Desktop scores are typically 20-40 points higher than mobile. Always test mobile scores in PageSpeed Insights when evaluating Shopify speed. Many stores with "good" desktop scores fail Core Web Vitals on mobile.

Installing a speed or caching app to fix performance

Ironically, many "speed optimisation" apps on the Shopify App Store add more JavaScript to fix the JavaScript problem. Shopify is already served via a CDN - there is no server-side caching to configure. The most effective speed improvements come from removing code and assets, not adding a new app.

Keeping apps installed "just in case"

Every installed Shopify app - even if disabled or not actively used - may still inject its scripts into your storefront depending on how it was built. Always fully uninstall (not just disable) apps you no longer use, then verify their scripts are no longer loading in Chrome DevTools → Network.

Complete Code Example

{%- comment -%} Performant image with lazy loading and responsive srcset {%- endcomment -%}
<img
  src="{{ image | image_url: width: 800 }}"
  srcset="{{ image | image_url: width: 400 }} 400w,
          {{ image | image_url: width: 800 }} 800w,
          {{ image | image_url: width: 1600 }} 1600w"
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1600px"
  alt="{{ image.alt | escape }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
  loading="lazy"
  decoding="async"
>

{%- comment -%} Defer non-critical app scripts in theme.liquid {%- endcomment -%}
<script defer src="{{ 'non-critical.js' | asset_url }}"></script>

Frequently Asked Questions

Q: What is a good PageSpeed score for a Shopify store?

A good Shopify store should score 70+ on mobile PageSpeed Insights, with an LCP under 2.5 seconds, CLS under 0.1, and TBT under 200ms. The average Shopify store scores around 30-45 on mobile due to app bloat. Scores above 80 on mobile are excellent for Shopify. Do not compare your score to non-Shopify sites - the platform has inherent overhead.

Q: Does page speed directly affect my Shopify store's Google rankings?

Yes, but the signal is nuanced. Google uses Core Web Vitals data from real Chrome users (CrUX data) as a ranking tiebreaker. If two pages are equally relevant for a query, the faster one has an advantage. However, relevance and authority (content quality, backlinks) have much greater weight. Fix speed issues to avoid a disadvantage, not expecting it to transform rankings alone.

Q: Should I change my Shopify theme to improve speed?

Theme choice significantly affects speed. Dawn, Shopify's free reference theme, scores 90+ on mobile PageSpeed out of the box. Many premium themes score 40-60 due to heavy animations and scripts. If your theme scores below 50 on mobile even after image optimisation and app removal, switching to a lighter theme (Dawn, Craft, Sense) is worth the migration effort.

Not Sure If You Have This Issue?

Run a free scan to detect this and other SEO problems on your Shopify store instantly.

Free SEO Scan

Other Common Shopify SEO Issues

Missing Meta Description Images Missing Alt Text Missing Product Schema Duplicate Title Tags

Go Deeper

Deep Dive: Slow Page Speed

Detailed technical documentation - seoscan.dev/shopify/render-blocking-scripts