Shopify Speed Optimization Tips

Keep your apps. Fix what actually slows things down.

What Is Shopify Speed Optimization?

Your store is slower than you think.

Shopify speed optimization is the process of reducing page load time and improving Core Web Vitals scores on a Shopify store without sacrificing functionality. The average Shopify store scores 25-35 on Google PageSpeed Insights mobile, according to a 2025 study by Littledata that analyzed over 12,000 stores. Stores that reach a score of 50+ see 15-20% higher conversion rates, based on WebMedic's audit data across Malaysian and Singaporean Shopify stores.

Most advice tells you to remove apps. That is lazy advice. It is also wrong for most stores. The apps you installed are running your reviews, your upsells, your email capture, your loyalty program. Removing them to chase a PageSpeed score removes the features that drive revenue.

The real question is not "which apps should I delete?" The real question is "how do I keep the tools I need and still load fast?"

That is what this post answers. Every technique here has been tested on live Shopify stores generating RM20,000 to RM500,000 per month. These are the fixes we apply during Shopify audits before touching a single app.

shopify speed optimization dashboard

Why Does Shopify Speed Matter for Conversions?

Money leaves with every second.

A 1-second improvement in Shopify page load time increases conversions by 7% and reduces bounce rate by 11%, according to Google and Aberdeen Group research. For a Shopify store earning RM100,000/month, that single second is worth RM7,000 monthly — RM84,000 per year in recovered revenue. Deloitte's 2020 study found that even a 0.1-second improvement in mobile site speed increased conversions by 8.4%.

Google has been explicit about this since 2021. Core Web Vitals are a ranking factor. But the conversion impact matters more than the ranking impact.

Here is what the data shows across load time thresholds:

Load Time	Conversion Impact	Bounce Rate	Mobile Experience
Under 2 seconds	Baseline (highest)	9%	Excellent
2-3 seconds	-12% conversions	32% bounce increase	Acceptable
3-5 seconds	-25% conversions	90% bounce probability	Poor
5+ seconds	-40% or worse	Near-total abandonment	Unusable

Sources: Google/SOASTA 2017, Akamai 2017, Deloitte 2020

In the Malaysian market, this is amplified. Mobile traffic accounts for 70-80% of sessions on most stores we audit. Malaysian mobile networks average 25-40 Mbps on 4G — fast enough, but latency spikes during peak hours. A store that loads in 2 seconds on a KL office connection loads in 4-5 seconds on a Grab driver's phone in Johor Bahru. That gap is where you lose customers.

We covered the broader revenue impact of speed across all ecommerce platforms in our ecommerce website speed breakdown. This post focuses specifically on Shopify fixes.

Do Apps Really Slow Down Shopify Stores?

Yes, but not the way you think.

Shopify apps slow stores primarily through render-blocking JavaScript, not through their existence on the store. A study by Shopify's own engineering team found that 67% of third-party app impact comes from scripts loading in the document head, blocking the browser from rendering any content. The app itself is not the problem — where and how its scripts load is the problem.

Here is the distinction most speed guides miss. There are two types of app performance costs:

Execution cost vs. load cost

Execution cost is what the app does after it loads — computing recommendations, rendering widgets, processing data. This is usually fast and rarely causes speed issues.

Load cost is the JavaScript and CSS files the app injects into your page. These files must be downloaded, parsed, and executed before the browser can render your store. This is almost always the bottleneck.

A single app that injects a 200KB JavaScript file in the <head> tag can delay your entire page by 500-800ms. That same app, with its script deferred to load after the page renders, adds zero perceptible delay.

The app audit framework

Before removing any app, audit it with this framework:

Check	What to Look For	Tool
Script location	Is it loading in `<head>` or before `</body>`?	View Page Source
File size	Individual JS/CSS files over 100KB	Chrome DevTools > Network
Render blocking	Does it block First Contentful Paint?	PageSpeed Insights
Unused on page	Does this app run on pages where it is not needed?	Chrome DevTools > Coverage
Third-party calls	Does it fetch from external servers?	Chrome DevTools > Network

We use this exact checklist in every store speed audit. Most stores have 2-3 apps that are genuine bottlenecks and 10-15 apps that have zero measurable impact. The trick is knowing which is which.

shopify app performance audit

How Do You Fix Render-Blocking Scripts on Shopify?

This is the highest-impact fix.

Adding defer or async attributes to third-party scripts reduces Largest Contentful Paint (LCP) by 30-50% on most Shopify stores, according to web.dev performance data. WebMedic's implementation across 40+ stores shows an average PageSpeed Insights mobile score improvement from 28 to 52 after script deferral alone — without removing a single app.

Shopify's Liquid template engine gives you control over how scripts load. Here is how to use it.

Defer app scripts in theme.liquid

Open your theme's theme.liquid file. Look for <script> tags in the <head> section that reference app files. These typically look like:

<script src="https://cdn.shopify.com/extensions/..." ></script>
<script src="https://app-domain.com/widget.js"></script>

Add defer to each one:

<script src="https://cdn.shopify.com/extensions/..." defer></script>
<script src="https://app-domain.com/widget.js" defer></script>

The defer attribute tells the browser: download this file in the background, but do not execute it until the HTML is fully parsed. Your page renders immediately. The app still works — it just loads after the visible content appears.

Move scripts below the fold

For apps that only activate on interaction (chat widgets, popups, exit-intent), move their script tags to just before </body>. Even better, load them on user interaction:

document.addEventListener('scroll', function loadChat() {
  var script = document.createElement('script');
  script.src = 'https://chat-widget.com/loader.js';
  document.body.appendChild(script);
  document.removeEventListener('scroll', loadChat);
}, { once: true });

This technique — called "interaction-based loading" — means the chat widget script never downloads until the visitor scrolls. On product pages where most bounces happen within the first viewport, this eliminates wasted bandwidth entirely.

Use Shopify's native script loading

Shopify 2.0 themes (Dawn and descendants) support the {% javascript %} tag and content_for_header placement. Use content_for_header only for critical scripts. Everything else goes at the bottom.

If your theme uses {{ content_for_header }} in the <head>, that is where Shopify injects all app scripts by default. You cannot move content_for_header, but you can contact app developers and request deferred loading. Many will add it if asked — they know it matters.

How Do You Optimize Images for Shopify Speed?

Images are usually the heaviest assets.

Shopify stores using WebP format with responsive srcset attributes load product images 40-60% faster than stores using unoptimized JPEG or PNG files. Shopify's CDN automatically serves WebP to supported browsers when you use the image_url Liquid filter, eliminating the need for manual conversion on over 95% of browser traffic, per Can I Use data.

Shopify handles image optimization better than most platforms — if you use it correctly. Here is what to do and what to stop doing.

Use Shopify's built-in image CDN

Shopify automatically serves images through their global CDN. But many themes hardcode image URLs instead of using the image_url filter. The filter gives you automatic format conversion and resizing:

{{ product.featured_image | image_url: width: 600 | image_tag: loading: 'lazy' }}

This single line handles WebP conversion, responsive sizing, lazy loading, and CDN delivery. If your theme is using raw <img> tags with full-resolution URLs, you are leaving the biggest performance win on the table.

Does this sound like your store? Find out where you're leaking revenue — take the free Revenue Score. 3 minutes. Free. No pitch.

Implement proper lazy loading

Lazy loading means images below the fold do not download until the visitor scrolls near them. Shopify 2.0 themes support native lazy loading:

{{ image | image_url: width: 800 | image_tag: loading: 'lazy', fetchpriority: 'low' }}

For your hero image and first product image — the ones visible without scrolling — use loading: 'eager' and fetchpriority: 'high'. This tells the browser to prioritize these images. Everything else gets lazy.

The split is simple: above the fold = eager. Below the fold = lazy. We detail this alongside broader image and compression fixes in the website speed optimization checklist.

Compress before upload

Even with Shopify's CDN, uploading a 5MB product photo means Shopify stores and serves a 5MB original. The CDN resizes on request, but the original upload affects admin speed and backup size.

Use TinyPNG or Squoosh before uploading. Target:

Product images: under 300KB at 2000px wide
Hero/banner images: under 500KB at 1920px wide
Collection images: under 200KB at 800px wide

shopify image optimization settings

What Are the Core Web Vitals Benchmarks for Shopify?

Three metrics. Three targets.

Core Web Vitals measure Largest Contentful Paint (LCP under 2.5 seconds), Cumulative Layout Shift (CLS under 0.1), and Interaction to Next Paint (INP under 200ms). Google reports that only 33% of Shopify stores pass all three Core Web Vitals thresholds on mobile, based on Chrome User Experience Report (CrUX) data from 2025. Stores passing all three rank on average 3.4 positions higher in mobile search results.

Here is how each metric maps to Shopify-specific fixes:

Core Web Vital	Target	What Causes Failure on Shopify	Fix
LCP (Largest Contentful Paint)	Under 2.5s	Unoptimized hero images, render-blocking scripts, slow server response	Preload hero image, defer scripts, use Shopify CDN
CLS (Cumulative Layout Shift)	Under 0.1	App banners injecting late, images without dimensions, font loading flash	Set explicit image dimensions, preload fonts, reserve space for dynamic elements
INP (Interaction to Next Paint)	Under 200ms	Heavy JavaScript execution, complex product filtering, slow add-to-cart handlers	Reduce main thread work, simplify event handlers, use web workers

LCP: the metric that matters most

LCP measures when the largest visible element finishes rendering. On Shopify product pages, this is almost always the product hero image. On collection pages, it is the first product card image or the collection header.

The fix is straightforward: preload the LCP image.

{% if template.name == 'product' %}
  <link rel="preload" as="image" href="{{ product.featured_image | image_url: width: 800 }}" fetchpriority="high">
{% endif %}

This tells the browser to start downloading the hero image immediately, before it encounters the <img> tag in the HTML. On stores we have optimized, this single change reduces LCP by 400-800ms.

CLS: invisible layout shifts

CLS catches elements that move after the page appears to load. On Shopify, the biggest offenders are:

App banners that inject above the header (announcement bars, cookie consent)
Product images without explicit width and height attributes
Custom fonts causing a flash of unstyled text (FOUT)

For fonts, preload your primary typeface:

<link rel="preload" href="{{ 'your-font.woff2' | asset_url }}" as="font" type="font/woff2" crossorigin>

For app banners, reserve the vertical space in your theme even before the app script loads. A 40px empty div that gets replaced by the banner is invisible to users but prevents the entire page from jumping.

How Do You Speed Up Shopify Without Touching Theme Code?

Not every fix requires a developer.

Shopify's built-in Online Store Speed Report, accessible from Analytics > Reports in the admin, identifies your slowest pages and provides actionable recommendations. Stores that follow Shopify's automated recommendations see an average 15-25% improvement in speed scores, based on Shopify's 2024 performance benchmark across 1.7 million stores.

Here are zero-code optimizations any store owner can do today:

Remove zombie apps

A "zombie app" is one you installed, tried, and forgot about. It is still injecting scripts into your store even though you are not using it. Go to Settings > Apps and sales channels. If you have not used an app in 90 days, uninstall it.

This is different from "remove apps to speed up." This is removing apps you are already not using. There is no trade-off.

Optimize your homepage sections

Many stores stack 15-20 sections on their homepage. Each section loads its own images, scripts, and styles. The homepage becomes a megapage that tries to show everything.

Reduce homepage sections to 6-8 maximum. Move secondary content to dedicated pages. A homepage that loads in 1.5 seconds and sends visitors to fast-loading collection pages will always outperform a homepage that loads in 5 seconds and tries to replace your entire site navigation.

Use system fonts for non-brand text

Custom web fonts add 100-400KB per font family. If your brand font is DM Sans, use it for headings and key UI elements. Body text, navigation labels, and footer text can use the system font stack:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

This loads instantly because the font is already on the visitor's device. The visual difference in body text is negligible. The performance difference is measurable.

shopify admin speed report

What Is the Best Way to Measure Shopify Store Speed?

Use the right tool for the right question.

Google PageSpeed Insights measures lab performance (how your store could perform), while Chrome User Experience Report (CrUX) measures field data (how your store actually performs for real visitors). For Shopify stores, CrUX data accessed through Google Search Console is the most reliable benchmark because it reflects actual visitor experience on real devices and networks, not simulated conditions.

Here is when to use each tool:

Tool	Best For	Data Type	Cost
PageSpeed Insights	Quick diagnostics, specific page audits	Lab + Field	Free
Google Search Console	Core Web Vitals across all pages	Field (real users)	Free
GTmetrix	Waterfall analysis, asset-by-asset timing	Lab	Free tier available
Shopify Speed Report	Store-wide trends, relative performance	Shopify-calculated	Built-in
Chrome DevTools > Lighthouse	Developer-level debugging	Lab	Free

The PageSpeed score is not your real score

PageSpeed Insights runs a synthetic test on a simulated slow device. Your real visitors — on iPhones, Samsung Galaxy phones, fast Malaysian broadband — experience something different. The score matters for directional guidance, but CrUX field data in Search Console tells you what your actual visitors experience.

Focus on the green numbers in CrUX. If your CrUX data shows all three Core Web Vitals passing, you are fast enough — even if your PageSpeed score is 40.

Test the pages that matter

Stop testing only your homepage. Test your top 5 product pages by traffic, your main collection page, and your cart page. These are the pages where speed directly affects revenue. A fast homepage and slow product pages is the most common pattern we see in Shopify store audits. The WooCommerce equivalent has similar bottlenecks — we covered those platform-specific fixes in 7 tips to speed up WooCommerce product pages.

How Do You Prioritize Shopify Speed Fixes?

Fix the biggest leaks first.

The highest-impact Shopify speed optimization sequence is: (1) defer render-blocking scripts, (2) optimize hero/LCP images, (3) remove unused apps, (4) implement lazy loading, (5) preload critical fonts. This order is based on WebMedic's analysis of 60+ Shopify store audits where script deferral alone accounted for 40-50% of total speed improvement in every case.

Here is the priority matrix we use internally:

Priority	Fix	Effort	Impact	Typical Improvement
1	Defer render-blocking scripts	Medium (theme edit)	Very High	+15-25 PageSpeed points
2	Preload + optimize LCP image	Low (Liquid tag)	High	-400-800ms LCP
3	Remove zombie apps	Low (admin)	Medium-High	+5-15 PageSpeed points
4	Lazy load below-fold images	Low (theme setting)	Medium	-200-500ms total load
5	Preload critical font	Low (one line)	Medium	-100-300ms FOUT elimination
6	Reduce homepage sections	Low (admin)	Medium	-500ms-1.5s total load
7	Compress images before upload	Low (habit change)	Low-Medium	Varies by image count

Do not try to fix everything at once. Start with priorities 1-3. Measure. Then move to 4-7. The first three fixes typically account for 70% of the total possible improvement.

The 80/20 of Shopify speed

If you do nothing else from this entire post, do these two things:

Add defer to every third-party script in your theme.liquid head
Make sure your hero image uses Shopify's image_url filter with a specified width

These two changes take 15 minutes and improve mobile PageSpeed scores by 15-30 points on almost every Shopify store we have tested. That is not theory. That is 60+ store audits speaking.

Frequently Asked Questions

Does Shopify speed optimization require a developer?

Basic optimizations like removing unused apps, compressing images before upload, and reducing homepage sections require no developer. Script deferral and LCP preloading require editing theme Liquid files — a competent Shopify developer handles both in under 2 hours. WebMedic's speed audits include implementation, not just recommendations.

How many apps can a Shopify store have before it slows down?

The number of apps matters less than how those apps load their scripts. A store with 25 well-coded apps using deferred scripts can be faster than a store with 5 apps loading render-blocking JavaScript. WebMedic has audited stores running 30+ apps that score above 50 on PageSpeed mobile after script optimization.

What is a good PageSpeed score for a Shopify store?

A mobile PageSpeed Insights score of 50+ puts a Shopify store in the top 20% of all Shopify stores, based on Littledata's 12,000-store benchmark. Most stores score 25-35. A score of 70+ is excellent but rarely achievable on stores with reviews, upsells, and chat apps. Focus on CrUX field data passing all three Core Web Vitals rather than chasing a perfect lab score.

Does Shopify speed affect SEO rankings?

Google confirmed Core Web Vitals as a ranking factor in June 2021 via the Page Experience update. Stores passing all three Core Web Vitals thresholds rank an average of 3.4 positions higher in mobile search results, according to Searchmetrics analysis. The ranking impact is a tiebreaker — content relevance still dominates — but speed determines which of two equally relevant pages ranks higher.

Is Shopify faster than WooCommerce out of the box?

Shopify is faster than WooCommerce out of the box because Shopify manages hosting, CDN, and server optimization automatically. The average Shopify store loads in 1.3 seconds versus 3.4 seconds for WooCommerce on shared hosting, based on Jepto's 2024 ecommerce performance study. WooCommerce can match Shopify speed with managed hosting and caching plugins, but requires more technical maintenance.

Shopify Speed Optimization: Fast Store Without Removing Apps