Aarón Briceño eCommerce Consultant
Taking on projects

Notes / Performance

How to improve your Shopify store speed in 2026

By Aarón Briceño, ecommerce consultant and Shopify specialist.

A stack of paper sheets on a table with the top half lifted off and stood on edge beside it, lit by a hard light that throws a long shadow.
Performance

Your Shopify store’s speed isn’t just a technical metric — it’s a direct factor in your revenue. Every extra second of load time reduces your conversion rate by 2% to 4%, according to Portent data.

Why speed matters

Google has used Core Web Vitals as a signal since 2021. The three current metrics are LCP (how long the main content takes to appear), CLS (how much the page shifts while loading) and INP, which replaced FID in March 2024 and measures how quickly the page responds when you touch something. For a store, one thing matters even more than the three of them: the buyer’s patience.

Google has been measuring the same thing for years: the longer a page takes on mobile, the more people leave before they ever see it. You don’t need an exact percentage to understand the direction.

On Shopify, the most common bottlenecks are:

  1. Too many apps installed on the theme
  2. Unoptimized images
  3. Heavy JavaScript without control
  4. Poorly loaded custom fonts
  5. Unnecessary animations

Measuring current performance

Before optimizing, you need to measure. Shopify has its own speed report, but I recommend these tools:

# Main tools
- Google PageSpeed Insights field and lab metrics
- Web PageTest detailed waterfall
- Shopify Theme Inspector Liquid rendering performance
- Chrome DevTools coverage and bundles

Shopify Speed Report

Inside your Shopify admin, go to Online Store > Themes > View Speed Report. There you can see how your store compares to similar ones.

Optimization strategy

1. App audit

Every app you install adds JavaScript, CSS, and sometimes server requests. Check:

  • Is the app still useful?
  • Can it be replaced with native Liquid code?
  • Is it loading scripts on pages where it’s not needed?
{%- comment -%} Load script only on product page {%- endcomment -%}
{%- if template.name == 'product' -%}
  <script src="{{ 'my-app.js' | asset_url }}" defer></script>
{%- endif -%}

2. Image optimization

Shopify already optimizes images automatically with its CDN, but these practices help:

  • Use loading="lazy" for below-the-fold images
  • Set explicit width and height to avoid CLS
  • Request each image at the size it will actually be displayed, using the image_url filter. If you still see img_url in your theme, it is deprecated — Shopify replaced it with image_url
<img
  src="{{ product.featured_image | image_url: width: 600 }}"
  srcset="{{ product.featured_image | image_url: width: 300 }} 300w,
          {{ product.featured_image | image_url: width: 600 }} 600w,
          {{ product.featured_image | image_url: width: 900 }} 900w"
  sizes="(max-width: 768px) 100vw, 50vw"
  loading="lazy"
  width="600"
  height="750"
  alt="{{ product.featured_image.alt | escape }}"
>

3. Deferred JavaScript loading

Use the defer and async attributes to prevent scripts from blocking rendering:

AttributeBehavior
deferDownloads in parallel, executes in order at the end
asyncDownloads in parallel, executes as soon as ready
NoneBlocks rendering until downloaded and executed
{{ 'theme.js' | asset_url | script_tag | replace: '>', ' defer>' }}

4. Optimized fonts

Loading Google Fonts can add 200-400ms. Strategies:

  • Use font-display: swap to avoid FOIT (Flash of Invisible Text)
  • Self-host fonts instead of using Google’s CDN
  • Subset the characters you actually need
@font-face {
  font-family: 'Inter';
  src: url('Inter-variable.woff2') format('woff2');
  font-display: swap;
  font-weight: 400 700;
}

Target metrics for 2026

MetricGoodNeeds workPoor
LCP< 2.0s2.0s - 3.5s> 3.5s
INP< 150ms150ms - 350ms> 350ms
CLS< 0.050.05 - 0.15> 0.15
TTFB< 600ms600ms - 1000ms> 1000ms

Conclusion

Speed optimization isn’t a one-week project. It’s an ongoing process. Set aside one day per month to review metrics, audit new apps, and make the adjustments you need. Start with what has the biggest impact and work your way down.


Speed almost never gets fixed by installing another app: it gets fixed in the theme. How I work on that part is in custom Shopify development, and if your store’s problem goes beyond performance, it is worth starting with an audit before deciding where to dig in.