What Are Core Web Vitals and Why They Matter
Core Web Vitals are Google's user experience metrics that directly influence search rankings. There are three metrics that matter: Largest Contentful Paint (LCP) measures how fast the largest visible element loads. Google wants this under 2.5 seconds. For most Shopify stores, the LCP element is the hero image or the first product image. Interaction to Next Paint (INP) measures responsiveness. When a customer clicks 'Add to Cart,' how long before they see a response? Google wants this under 200 milliseconds. Cumulative Layout Shift (CLS) measures visual stability. Does content jump around as the page loads? Google wants a CLS score under 0.1. These are not vanity metrics. Google confirmed that Core Web Vitals are ranking factors, and more importantly, they directly affect conversion rates. A one-second improvement in load time can increase conversions by 7% or more.
Why Shopify Stores Are Often Slow
Shopify's infrastructure is fast. Their CDN, server-side rendering, and global edge network are excellent. When a Shopify store is slow, the problem is almost always in the theme layer and installed apps. The most common culprits are unoptimized images (often 2 -- 5MB hero images that should be 200KB), too many third-party apps injecting JavaScript, render-blocking CSS and fonts, and themes with excessive unused code. The good news: most of these issues are fixable without rebuilding your entire store. Let us walk through each optimization area with specific code examples.
Quick Wins (Do These First)
- Compress all hero and product images to WebP format, targeting under 200KB for above-the-fold images
- Add explicit width and height attributes to all images to prevent layout shift
- Remove apps you are not actively using (each app adds JavaScript to every page load)
- Defer non-critical JavaScript by adding the defer attribute to script tags
- Use Shopify's built-in image CDN transforms (append _200x, _400x, etc.) instead of serving full-resolution images
- Enable lazy loading for all below-the-fold images
- Preconnect to critical third-party domains (fonts, analytics) in your theme.liquid head
- Minimize or eliminate custom web fonts (system fonts load instantly)
Optimized Image Loading in Liquid
{%- comment -%} Hero image: eager load, explicit dimensions, srcset for responsive {%- endcomment -%}
{{
section.settings.hero_image
| image_url: width: 1200
| image_tag:
loading: 'eager',
fetchpriority: 'high',
widths: '375, 750, 1100, 1500',
sizes: '100vw',
class: 'hero__image'
}}
{%- comment -%} Product grid images: lazy load everything below the fold {%- endcomment -%}
{%- for product in collection.products -%}
{{
product.featured_image
| image_url: width: 600
| image_tag:
loading: 'lazy',
widths: '200, 400, 600',
sizes: '(min-width: 750px) 33vw, 50vw',
class: 'product-card__image'
}}
{%- endfor -%}Font Optimization with Preload and Display Swap
{%- comment -%} Add to theme.liquid <head> section {%- endcomment -%}
{%- comment -%} Preload your primary font to prevent FOIT (Flash of Invisible Text) {%- endcomment -%}
<link
rel="preload"
href="{{ 'your-font.woff2' | asset_url }}"
as="font"
type="font/woff2"
crossorigin
>
{%- comment -%} Preconnect to third-party domains you depend on {%- endcomment -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
{%- comment -%} Use font-display: swap so text is visible immediately {%- endcomment -%}
<style>
@font-face {
font-family: 'YourBrandFont';
src: url('{{ "your-font.woff2" | asset_url }}') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
</style>The single highest-impact optimization for most Shopify stores: replace your hero image with a properly sized WebP image using the eager loading pattern above. This alone can improve LCP by 1 -- 3 seconds.
Reducing JavaScript Bloat
Every Shopify app you install adds JavaScript to your storefront. Some apps add scripts to every page, even pages where they are not needed. An average Shopify store with 10 apps installed might load 500KB -- 1.5MB of JavaScript before the customer even scrolls. Audit your apps systematically. Open Chrome DevTools, go to the Network tab, and filter by JS. Sort by size. You will likely find that 2 -- 3 apps account for the majority of the JavaScript payload. For each heavy script, ask: Is this app critical for revenue? Can it be loaded only on specific pages (e.g., a reviews app only on product pages)? Is there a lighter alternative? For apps you must keep, check if they offer a 'lazy load' or 'deferred' loading option in their settings. Many app developers have added this but it is not enabled by default.
Conditionally Load App Scripts
{%- comment -%}
Only load the reviews app JavaScript on product pages.
Add this to your theme.liquid instead of a global include.
{%- endcomment -%}
{%- if template.name == 'product' -%}
<script src="{{ 'reviews-app.js' | asset_url }}" defer></script>
{%- endif -%}
{%- comment -%}
Only load the wishlist app on product and collection pages.
{%- endcomment -%}
{%- if template.name == 'product' or template.name == 'collection' -%}
<script src="{{ 'wishlist-app.js' | asset_url }}" defer></script>
{%- endif -%}Before and After: Typical Optimization Results
| Metric | Before Optimization | After Optimization | Target |
|---|---|---|---|
| LCP (mobile) | 4.5 -- 8.0 seconds | 1.5 -- 2.5 seconds | Under 2.5 seconds |
| INP | 300 -- 600 ms | 100 -- 200 ms | Under 200 ms |
| CLS | 0.15 -- 0.40 | 0.01 -- 0.05 | Under 0.1 |
| PageSpeed score (mobile) | 20 -- 45 | 70 -- 90+ | Above 70 |
| Total page weight | 3 -- 8 MB | 0.8 -- 2 MB | Under 2 MB |
| JavaScript payload | 800KB -- 2MB | 200 -- 500KB | Under 500KB |
| Time to Interactive | 6 -- 12 seconds | 2 -- 4 seconds | Under 3.8 seconds |
Want a Professional Performance Audit?
Our Phase 1 audit ($40) identifies every performance bottleneck in your Shopify store with specific, prioritized fixes. Most stores see a 2x improvement in PageSpeed score.
Request a Performance AuditAdvanced: Optimizing Cumulative Layout Shift
CLS problems are subtle but frustrating for users. Content jumping around as the page loads makes your store feel broken even if everything eventually renders correctly. The most common CLS offenders on Shopify stores are: images without explicit dimensions, dynamically injected app banners (announcement bars, pop-ups), web fonts loading and causing text reflow, and lazy-loaded content that changes the page height. For images, always specify width and height in your Liquid templates. For app banners, set a minimum height on their container so space is reserved before the banner loads. For fonts, use font-display: swap (shown above). For lazy-loaded sections, use CSS aspect-ratio or min-height to reserve space.
Measuring Your Improvements
Before optimizing, establish baseline measurements. Use Google PageSpeed Insights for lab data (synthetic tests) and Google Search Console for field data (real user measurements). After each optimization batch, re-test and record the changes. Focus on field data from Search Console since that is what Google uses for rankings. Lab data is useful for debugging but can differ significantly from real-world performance. Key tools for ongoing monitoring: Google Search Console Core Web Vitals report, Google PageSpeed Insights, Chrome DevTools Lighthouse, and WebPageTest.org for detailed waterfall analysis. Allow 28 days after optimizations for Google's field data to update, since the CrUX report uses a rolling 28-day average.
Do not chase a perfect 100 PageSpeed score. A mobile score of 70 -- 85 with all Core Web Vitals passing is excellent for a Shopify store. The goal is fast user experience, not a perfect number.
Frequently Asked Questions
Why is my Shopify store slow even with a fast theme?
The most common reason is installed apps. Each app can add JavaScript, CSS, and API calls to your storefront. Ten apps might add 1MB+ of scripts. Audit your installed apps and remove any you are not actively using.
Does Shopify's plan level affect store speed?
No. All Shopify plans use the same infrastructure and CDN. Basic, Shopify, and Advanced plans deliver the same server performance. Speed differences come from theme code and installed apps.
Should I use AMP for my Shopify store?
No. Google no longer gives AMP pages a ranking advantage, and Shopify does not natively support AMP. Focus on Core Web Vitals optimization instead, which delivers better results with less complexity.
Let Us Handle the Technical Details
Not comfortable editing Liquid code? Our performance optimization service handles everything from image optimization to JavaScript cleanup.
Get Speed Optimization Help