How to Improve Core Web Vitals on Shopify

Core Web Vitals are Google's metrics for measuring user experience. They directly impact your search rankings and conversion rates. This guide explains how to improve each metric on Shopify.

Understanding Core Web Vitals

Google measures three main metrics:

Largest Contentful Paint (LCP)

How quickly the main content loads. Target: under 2.5 seconds.

First Input Delay (FID) / Interaction to Next Paint (INP)

How quickly the page responds to user input. Target: under 100ms (FID) / 200ms (INP).

Cumulative Layout Shift (CLS)

How stable the page is while loading. Target: under 0.1.

How to Check Your Scores

Use these tools:

1. Google PageSpeed Insights - Enter your URL for detailed analysis
2. Google Search Console - See Core Web Vitals across your site
3. Chrome DevTools - Lighthouse tab for local testing
4. CommerceRank - Compare against similar stores

Improving LCP (Loading Speed)

LCP is usually the most impactful metric to improve.

Optimize Your Hero Image

The hero image is often the LCP element.

Actions:

• Use WebP format instead of JPEG/PNG
• Resize to exact display dimensions
• Remove unnecessary metadata
• Consider using a video poster frame instead of autoplay

Preload Critical Assets

Tell the browser what to load first.

In theme.liquid, add:

<link rel="preload" as="image" href="your-hero-image.webp">

Remove Render-Blocking Resources

Third-party scripts often block rendering.

Audit:

• Move non-essential scripts to footer
• Use async or defer attributes
• Question if each app is truly necessary

Use System Fonts

Custom fonts delay text rendering.

Options:

• Use system font stack
• Limit to 1-2 font families
• Use font-display: swap

Improving FID/INP (Interactivity)

These metrics measure how responsive your store feels.

Reduce JavaScript Execution

Heavy JavaScript delays interactivity.

Actions:

• Audit and remove unused apps
• Defer non-essential scripts
• Avoid large JavaScript bundles

Optimize Event Handlers

Slow event handlers hurt INP.

Actions:

• Keep click handlers lightweight
• Avoid complex calculations on interaction
• Use passive event listeners for scroll

Break Up Long Tasks

Long JavaScript tasks block the main thread.

Actions:

• Split complex operations
• Use requestIdleCallback for non-urgent work
• Consider web workers for heavy processing

Improving CLS (Visual Stability)

CLS measures how much the page jumps around.

Set Explicit Dimensions

Images without dimensions cause layout shift.

Actions:

• Always include width and height attributes
• Use aspect-ratio boxes for responsive images
• Set dimensions on video embeds

Reserve Space for Dynamic Content

Content that loads late shifts the page.

Actions:

• Use min-height for sections that load dynamically
• Placeholder skeletons for async content
• Fixed heights for ad/review sections

Optimize Font Loading

Font swap causes text to reflow.

Actions:

• Use font-display: optional for non-critical fonts
• Preload essential fonts
• Minimize font variations

Handle Dynamic Elements

Banners and pop-ups often cause CLS.

Actions:

• Reserve space for announcement bars
• Position modals carefully
• Avoid injecting content above existing content

Shopify-Specific Optimizations

Theme Selection

Some themes perform better than others.

Consider Dawn if performance is priority.

App Audit

Apps are the biggest performance killer on Shopify.

Audit process:

1. List all installed apps
2. Identify which add scripts to your storefront
3. Test performance with each disabled
4. Remove or replace performance-heavy apps

Image Optimization

Shopify handles some optimization but you can do more.

Best practices:

• Use Shopify's image_tag with size parameters
• Upload at maximum 4472px (Shopify's limit)
• Use WebP format when possible
• Lazy load below-the-fold images

Liquid Optimization

Inefficient Liquid code slows server response.

Actions:

• Minimize nested loops
• Cache repeated calculations with {% capture %}
• Avoid complex conditionals in loops
• Use {% render %} instead of {% include %}

Quick Wins Checklist

Immediate actions with high impact:

• Compress and resize hero image
• Remove unused apps
• Set image dimensions in HTML
• Preload critical assets
• Defer non-essential scripts
• Use system fonts or preload custom fonts
• Reserve space for dynamic content

Measuring Progress

Track improvements over time:

1. Baseline - Record current scores before changes
2. Change one thing - Make single changes to isolate impact
3. Test - Wait 24-48 hours for field data to update
4. Iterate - Continue optimizing the biggest issues

Common Mistakes

Over-Optimizing

Don't sacrifice functionality for minimal gains. Focus on the biggest issues first.

Ignoring Field Data

Lab tests and real-world performance differ. Use Search Console's field data.

App Replacement

Sometimes replacing a heavy app with a lighter alternative is better than removing the feature entirely.

Next Steps

• Check your store's performance with PageSpeed Insights
• Browse fastest Shopify themes
• Audit your apps with Store Audit