Shopify DevelopmentPerformance
Speeding Up Your Shopify Store: A Practical Checklist
A field-tested checklist for improving Shopify load times, from image handling and app audits to theme code and Core Web Vitals.
Faster Loads
Lighter Images
Fewer Apps
Better Vitals
Speed is a conversion feature. A one-second delay on mobile can measurably drop add-to-cart rate. This is the checklist we run on every Shopify performance audit, in the order we run it.
1Measure Before You Touch Anything
You cannot improve what you have not measured. Get a baseline on a real device on 4G, not just a desktop lab score.
- Run PageSpeed Insights on the home page, a collection, and a product page.
- Record Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).
- Check the field data section - that is what Google actually ranks on.
Target numbers
LCP under 2.5s, INP under 200ms, CLS under 0.1 - measured on mobile field data, not lab.
2Fix Images First - It Is Usually the Biggest Win
Serve modern formats
Shopify auto-serves WebP - make sure your theme uses the image_url filter, not hardcoded src.
Right-size
Never ship a 3000px hero to a 400px phone. Use responsive srcset with width descriptors.
Lazy-load below the fold
loading="lazy" on everything except the LCP image.
Reserve space
Always set width and height so the layout does not jump (CLS).
<img
src="{{ product.featured_image | image_url: width: 800 }}"
srcset="{{ product.featured_image | image_url: width: 400 }} 400w,
{{ product.featured_image | image_url: width: 800 }} 800w"
sizes="(max-width: 749px) 100vw, 50vw"
width="800" height="800"
loading="lazy" alt="{{ product.featured_image.alt }}">3Audit Your App Stack
Every app can inject JavaScript into every page. The average store carries 3-6 apps it no longer uses.
| App type | Speed cost | Action |
|---|---|---|
| Reviews widget | High - often 100KB+ JS | Keep, but defer loading |
| Abandoned-cart popup | Medium | Keep if it earns its keep in revenue |
| Old theme-editor app | Varies | Uninstall and remove leftover snippets |
| Currency converter | Medium | Replace with Shopify Markets native |
Uninstalling is not enough
Many apps leave Liquid snippets and script tags behind. Search your theme for the app name after removing it.
4Theme Code Hygiene
- 1
Defer non-critical JavaScript
Add defer to script tags that are not needed for first paint.
- 2
Preload the LCP image and fonts
One rel=preload for the hero image and your primary web font.
- 3
Remove unused CSS
Old sections and settings often leave dead styles in theme.css.
- 4
Cut render-blocking third parties
Load chat widgets and analytics after the page is interactive.
5Re-Measure and Lock It In
Re-run the same three pages on the same device. Then add a monthly recurring check so regressions from new apps or campaigns get caught early.
We cut LCP from 4.1s to 2.0s on mobile and add-to-cart rate went up 9% the same month.— Head of Ecommerce, apparel brand
FAQ
No. It removes a barrier. Speed helps most when your store is currently slow on mobile; going from 90 to 95 rarely moves revenue.
Only if your current theme is an old vintage (non-OS 2.0) build. A modern theme plus this checklist usually beats a rushed migration.
Not always, but they add weight. Use them for landing pages, not your core product template.
Want a full speed audit?
We benchmark, fix, and monitor Shopify performance for growing stores.
Book a Free Consultation
