Improving your Shopify Plus store’s Core Web Vitals can boost your site’s speed, user experience, and search rankings. Here’s a quick summary of the 10 actionable tips to help you optimise:

Compress and Resize Media Files: Optimise images (JPEG, PNG, WebP, SVG) and videos (MP4) to reduce load times.
Reduce JavaScript Load: Defer non-essential scripts and streamline execution for faster interactivity.
Set Up Browser Caching: Cache static assets like images, CSS, and JavaScript to improve page load speed.
Speed Up CSS Loading: Use critical CSS, remove unused styles, and minify files to enhance performance.
Cut Server Response Time: Enable CDN caching, optimise Liquid code, and simplify data retrieval.
Add Preload Settings: Preload critical resources (fonts, images) to boost loading times.
Check Third-Party Apps: Audit and remove unused apps, defer non-critical app scripts, and optimise essential ones.
Fix Mobile Speed: Focus on mobile-first loading, optimise images for mobile, and enhance touch interactivity.
Stop Layout Shifts: Reserve space for dynamic content, stabilise fonts, and prevent unexpected layout changes.
Track Performance Changes: Use tools like Google Analytics and Chrome DevTools to monitor Core Web Vitals.

Why It Matters

Failing to optimise can lead to lower search rankings, higher bounce rates, and fewer sales. By addressing these areas, you’ll create a faster, more stable shopping experience, especially for mobile users.

Key Metrics to Target:

LCP: Under 2.5 seconds
FID: Under 100ms
CLS: Under 0.1

Start with these steps to improve your Core Web Vitals and see better results for your Shopify Plus store.

How To Fix Shopify Core Web Vitals – Boost Shopify Core …

1. Compress and Resize Media Files

Compressing and resizing media files can improve your Largest Contentful Paint (LCP) and overall Core Web Vitals. Large media files slow down load times, so optimising images and videos is essential for faster performance and a better user experience.

Image Optimisation Tips

To optimise images, aim for a balance between quality and file size. Resize product images to fit your theme’s requirements. Use the right file format for each type of image:

JPEG: Ideal for product photos with lots of colours.
PNG: Best for logos and images with transparency.
WebP: A modern format offering efficient compression and quality.
SVG: Great for scalable icons and simple graphics.

Video Optimisation Tips

For video content, follow these steps to ensure faster loading:

Convert videos to MP4 (H.264) format.
Choose resolutions that balance quality and loading speed.
Compress video files to reduce size.
Use thumbnails instead of autoplay to minimise initial load.
Host larger videos on external platforms.

Other Techniques

Use the srcset attribute for responsive images, allowing devices to load the appropriate size for their screen. Additionally, reducing script loads can further enhance your Core Web Vitals scores.

2. Reduce JavaScript Load

JavaScript plays a big role in your Core Web Vitals, especially First Input Delay (FID) and Time to Interactive (TTI). Streamlining JavaScript execution is just as important as optimising media for delivering a smooth browsing experience.

Defer Non-Essential Scripts

Focus on loading critical JavaScript first and delay non-essential scripts. This helps improve FID and TTI. Adding the “defer” or “async” attributes ensures these scripts won’t block the rendering of your page:

<script defer src="non-critical-script.js"></script>
<script async src="analytics-script.js"></script>

3. Set Up Browser Caching

Caching static assets helps speed up page loads by avoiding unnecessary downloads. This improves page performance, particularly the Largest Contentful Paint (LCP) metric.

Configure Cache Headers

Shopify Plus automatically manages most caching, but you can fine-tune custom theme assets by setting proper cache-control headers. Focus on these file types:

# Cache-Control Header Examples
Cache-Control: public, max-age=31536000 # For images, fonts, and CSS
Cache-Control: public, max-age=3600 # For frequently updated JavaScript

Adjust caching durations based on how often each type of asset is likely to change.

Prioritise Asset Caching

Each asset type benefits from a specific caching strategy. Here’s a breakdown:

Asset Type	Cache Duration	Effect on Performance Metrics
Images	1 year	Improves LCP
CSS Files	6 months	Speeds up First Contentful Paint (FCP)
Fonts	1 year	Prevents Flash of Unstyled Text (FOUT)
JavaScript	1 hour to 1 week	Enhances First Input Delay (FID)

Implement Version Control

To ensure users always receive the latest updates, add version numbers to asset URLs. This prevents outdated files from being loaded due to caching:

<link rel="stylesheet" href="theme.css?v=1.2.3">
<script src="custom.js?v=2.0.1"></script>

Every time you update an asset, update its version number to override the cached version.

4. Speed Up CSS Loading

Improve FCP and LCP on Shopify Plus by optimising how your CSS is loaded.

Critical CSS Implementation

Place critical CSS directly in the <head> to render above-the-fold content more quickly:

<head>
  <style>
    /* Critical CSS for above-the-fold content */
    .hero-section { 
      display: flex;
      max-width: 1200px;
      margin: 0 auto;
    }
  </style>
</head>

Optimise CSS Delivery

Prioritise your CSS loading strategy to ensure faster performance:

CSS Type	Loading Method	Impact on Core Web Vitals
Critical Styles	Inline in `<head>`	Improves FCP
Primary Theme CSS	Preload with high priority	Enhances LCP
Non-critical Styles	Defer loading	Reduces initial payload
Print Styles	Use media queries	Prevents render blocking

After structuring your CSS, focus on trimming unused styles.

Remove Unused CSS

Audit your CSS to eliminate unnecessary styles:

Legacy theme code: Get rid of styles from outdated theme versions.
Unused sections: Remove CSS tied to disabled theme sections.
Duplicate rules: Merge redundant style definitions to simplify your code.

Minify and Combine

Reduce file size by combining and minifying CSS files:

<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="components.css">
<link rel="stylesheet" href="utilities.css">

<link rel="stylesheet" href="theme.min.css">

Media Query Optimisation

Load CSS selectively with media queries to avoid unnecessary downloads:

/* Print styles load only when printing */
@media print {
  .navigation {
    display: none;
  }
}

/* Mobile styles load only on smaller screens */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
  }
}

This method ensures devices only download the CSS they need, leading to better performance overall.

5. Cut Server Response Time

Server response time plays a key role in influencing Time to First Byte (TTFB), which in turn impacts Core Web Vitals. Faster responses improve metrics like Largest Contentful Paint (LCP) and deliver a smoother user experience.

Enable CDN Caching

If your Shopify Plus store uses a Content Delivery Network (CDN), make sure it’s set up to cache static assets efficiently. Use cache-control headers to speed up asset delivery:

{
  "cache-control": "public, max-age=31536000",
  "vary": "Accept-Encoding"
}

Optimise Data Retrieval

Take a closer look at how your store retrieves data. Streamline query patterns by using indexed fields, adding pagination for large collections, or caching frequently accessed searches. These tweaks can reduce unnecessary server load and improve response times.

Streamline Liquid Code

Simplify your Liquid templates to cut down on processing time. Here’s an example:

Before:

{% for product in collection.products %}
  {% if product.available and product.price < 100 %}
    {% render 'product-card' %}
  {% endif %}
{% endfor %}

After:

{% assign available_products = collection.products | where: "available" | where: "price", "<", 100 %}
{% for product in available_products %}
  {% render 'product-card' %}
{% endfor %}

Also, evaluate how installed apps interact with these optimisations.

Monitor App Impact

Keep an eye on any new apps you install. Apps that slow down server response times may need to be removed or replaced to keep TTFB performance on track.

Configure Asset Preloading

Use resource hints to preload important assets like fonts and key images. This ensures these resources are fetched early, speeding up page load times:

<link rel="preload" href="critical-font.woff2" as="font" crossorigin>
<link rel="preload" href="hero-image.jpg" as="image">

Implement Smart Caching

Apply caching strategies wisely. Use shorter durations for dynamic content and longer durations for static assets to ease server load and improve overall performance.

6. Add Preload Settings

Speed up your Shopify Plus store’s performance by preloading critical resources. This can help improve metrics like LCP (Largest Contentful Paint) and FID (First Input Delay). Start by identifying which assets need to load immediately.

Prioritise Critical Resources

Focus on preloading the most important assets right away. Here’s how you can do it:

<!-- Hero images -->
<link rel="preload" href="hero-banner.webp" as="image">

<!-- Fonts -->
<link rel="preload" href="shopify-sans.woff2" as="font" type="font/woff2" crossorigin>

<!-- CSS -->
<link rel="preload" href="styles.css" as="style">

Use Resource Hints

Add resource hints to your theme.liquid file to improve loading times:

<!-- Preconnect to critical third-party domains -->
<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- DNS prefetch for faster lookups -->
<link rel="dns-prefetch" href="https://api.example.com">

Set Up Dynamic Preloading

Adjust preloading based on the user’s device type for better efficiency:

{% if request.device_type == 'mobile' %}
  <link rel="preload" href="{{ mobile_hero_image | img_url: '800x' }}" as="image">
{% else %}
  <link rel="preload" href="{{ desktop_hero_image | img_url: '1800x' }}" as="image">
{% endif %}

Focus on Above-the-Fold Content

Make sure the assets for the visible part of the page load first. These include:

Navigation menu elements
Hero section images
Call-to-action (CTA) buttons
Product cards in collection views

Track Preload Effectiveness

Use Chrome DevTools to evaluate how well your preloading strategy is working. Pay attention to:

Resources that were preloaded but not used
Conflicts in resource priorities
Bandwidth usage
Improvements in Core Web Vitals metrics

7. Check Third-Party Apps

Third-party apps can influence your Shopify Plus Core Web Vitals. Managing them properly can help maintain strong site performance.

Audit App Performance

Use Chrome DevTools to evaluate how each app affects your site’s load time:

// Open Performance Monitor
Command+Shift+P (Mac) or Control+Shift+P (Windows)
Type "Show Performance Monitor"

Remove Unused App Code

Review your theme.liquid file and clean up any unnecessary app-related code:

<!-- Example: Remove unused app code -->
{% if content_for_header contains 'unused-app.js' %}
  <!-- Delete this block -->
{% endif %}

Implement App Loading Strategy

Decide when and how apps should load to minimise delays:

// Defer loading of non-essential apps
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    loadChatWidget(); // Example: Load chat widget after 3 seconds
  }, 3000);
});

Optimise Essential Apps

For apps that are critical to your store’s functionality:

Load scripts asynchronously in the footer
Use caching headers to speed up repeat visits
Minify CSS and JavaScript associated with these apps

Monitor App Impact

Track how apps affect Core Web Vitals using a performance dashboard. Here’s a helpful table to guide your benchmarks:

Metric	Target Value	Acceptable App Impact
LCP (Largest Contentful Paint)	< 2.5s	+0.5s per app
FID (First Input Delay)	< 100ms	+50ms per app
CLS (Cumulative Layout Shift)	< 0.1	+0.05 per app

This data helps you decide on specific rules for loading apps.

Implement App Loading Rules

Set up conditional loading for apps based on the page type to avoid unnecessary resource usage:

{% if template == 'product' %}
  <!-- Load apps specific to product pages -->
{% elsif template == 'collection' %}
  <!-- Load apps specific to collection pages -->
{% endif %}

Consider App Alternatives

Evaluate whether apps are the best solution or if there are better options:

Can the feature be built directly into your store?
Look for smaller, more efficient app alternatives
Use custom-built solutions for critical functionality where possible

8. Fix Mobile Speed

Mobile performance plays a critical role in improving Core Web Vitals. Follow these steps to enhance your Shopify Plus store’s mobile speed.

Focus on Mobile-First Loading

Load CSS that’s specific to mobile devices first. Here’s an example:

<!-- Load mobile-specific CSS -->
{% if request.device_type == 'mobile' %}
  {{ 'mobile-critical.css' | asset_url | stylesheet_tag }}
{% endif %}

Optimise Images for Mobile

Serve images tailored for mobile to limit unnecessary data usage:

<!-- Load responsive images -->
<img
  src="{{ product.featured_image | img_url: '400x' }}"
  srcset="{{ product.featured_image | img_url: '400x' }} 400w,
          {{ product.featured_image | img_url: '600x' }} 600w"
  sizes="(max-width: 600px) 400px,
         600px"
  loading="lazy"
  alt="{{ product.featured_image.alt }}"
>

Keep track of these mobile performance metrics for better results:

Metric	Mobile Target	Desktop Target	Impact on Core Web Vitals
Time to First Byte	< 800ms	< 500ms	High
First Contentful Paint	< 1.8s	< 1.2s	Medium
Time to Interactive	< 3.8s	< 2.5s	High
Mobile Data Usage	< 1MB	< 2MB	Medium

Improve Touch Interactivity

Ensure buttons and links are easy to tap by optimising touch targets:

/* Adjust touch target sizes */
.button, 
.nav-link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
  margin: 8px;
}

Speed up navigation by lazy-loading mobile menu components:

// Lazy-load mobile menu
document.addEventListener('touchstart', () => {
  import('./mobile-menu.js').then(module => {
    module.initMobileMenu();
  });
}, { once: true });

Adjust Viewport Settings

Avoid scaling issues on mobile devices by setting proper viewport configurations:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<meta name="theme-color" content="#ffffff">

Optimise for Mobile Network Conditions

Use network-aware strategies to adjust resource loading based on connection quality:

if ('connection' in navigator) {
  if (navigator.connection.effectiveType === '4g') {
    loadHighResImages();
  } else {
    loadLowResImages();
  }
}

Improving mobile speed not only boosts your Core Web Vitals but also enhances the overall shopping experience on Shopify Plus.

9. Stop Layout Shifts

Reduce layout shifts on your site with these practical techniques:

Reserve Space for Dynamic Content

Always specify dimensions for elements that load dynamically to avoid unexpected shifts:

/* Allocate space for product images */
.product-image-container {
  aspect-ratio: 1/1;
  min-height: 400px;
  width: 100%;
}

/* Allocate space for banners */
.promotional-banner {
  min-height: 60px;
  width: 100%;
}

Stabilise Font Loading

Prevent layout changes caused by font loading delays:

<!-- Preload key fonts -->
<link 
  rel="preload" 
  href="{{ 'font-name.woff2' | asset_url }}" 
  as="font" 
  type="font/woff2" 
  crossorigin
>

<!-- Use font-display settings -->
<style>
  @font-face {
    font-family: 'CustomFont';
    font-display: swap;
    src: url('{{ "font-name.woff2" | asset_url }}') format('woff2');
  }
</style>

Manage Dynamic Elements

Ensure dynamic content behaves consistently during loading:

// Stabilise newsletter popup
document.addEventListener('DOMContentLoaded', () => {
  const popup = document.querySelector('.newsletter-popup');
  popup.style.position = 'fixed';
  popup.style.bottom = '0';
  popup.style.transform = 'translateY(100%)';
});

<div class="product-grid">
  {% if products.size > 0 %}
    {% for product in products %}
      {% render 'product-card', product: product %}
    {% endfor %}
  {% else %}
    {% render 'product-card-skeleton' %}
  {% endif %}
</div>

Optimise Product Gallery

Set proper dimensions for product images to maintain a consistent layout:

{% assign featured_image = product.featured_image %}
<div class="product-gallery" style="aspect-ratio: {{ featured_image.aspect_ratio }}">
  <img
    src="{{ featured_image | img_url: 'master' }}"
    width="{{ featured_image.width }}"
    height="{{ featured_image.height }}"
    loading="eager"
    decoding="async"
    alt="{{ featured_image.alt | escape }}"
  >
</div>

Common Layout Shift Triggers

Element Type	Impact on CLS	Prevention Method
Hero Images	High	Set fixed dimensions
Product Cards	Medium	Use aspect-ratio CSS
Cart Updates	High	Reserve space for count badge
Search Results	Medium	Define minimum height
Loading Spinners	Low	Use fixed-size containers

Consistently apply these methods to all dynamic elements, from popups to product grids, to maintain a stable layout.

Stabilise Third-Party Elements

Ensure third-party widgets don’t cause disruptions:

// Stabilise chat widget
window.addEventListener('load', () => {
  const chatWidget = document.querySelector('#chat-widget');
  chatWidget.style.position = 'fixed';
  chatWidget.style.right = '20px';
  chatWidget.style.bottom = '20px';
  chatWidget.style.width = '300px';
  chatWidget.style.height = '400px';
});

10. Track Performance Changes

Keeping an eye on Core Web Vitals is crucial for maintaining your Shopify Plus store’s performance. Once you’ve fixed performance issues, ongoing monitoring ensures your optimisation efforts stay effective.

Configure Performance Monitoring Tools

Use the web-vitals library to capture key metrics in real time:

import {onCLS, onFID, onLCP} from 'web-vitals';

function sendToAnalytics({name, value}) {
  const body = JSON.stringify({metric: name, value});
  navigator.sendBeacon('/analytics', body);
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

Create a Custom Performance Dashboard

Set up a dashboard in Google Analytics 4 to track Core Web Vitals effectively:

gtag('event', 'web_vital', {
  metric_id: 'LCP',
  metric_value: 2.5,
  metric_rating: 'good'
});

Automate Performance Monitoring

Use the Performance API to automate checks and log critical metrics:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Performance metric:', {
      name: entry.name,
      value: entry.value,
      timestamp: new Date().toISOString()
    });
  }
});

observer.observe({entryTypes: ['largest-contentful-paint']});

Key Performance Metrics

Metric	Ideal Score
LCP	Under 2.5 seconds
FID	Under 100 ms
CLS	Under 0.1
TTFB	Under 0.8 seconds
FCP	Under 1.8 seconds

Implement Real User Monitoring

Track real user data by measuring navigation performance:

document.addEventListener('DOMContentLoaded', () => {
  const navigationEntry = performance.getEntriesByType('navigation')[0];
  const timing = {
    dns: navigationEntry.domainLookupEnd - navigationEntry.domainLookupStart,
    tcp: navigationEntry.connectEnd - navigationEntry.connectStart,
    ttfb: navigationEntry.responseStart - navigationEntry.requestStart,
    download: navigationEntry.responseEnd - navigationEntry.responseStart,
    domInteractive: navigationEntry.domInteractive,
    domComplete: navigationEntry.domComplete
  };

  // Send timing data for analysis
  sendToAnalytics({name: 'performance', value: timing});
});

Set Performance Budgets

Define performance limits during the build process to avoid regressions:

{
  "performance-budget": {
    "javascript": {
      "total": "200 kB",
      "warning": "150 kB"
    },
    "images": {
      "total": "500 kB",
      "warning": "400 kB"
    },
    "third-party": {
      "total": "300 kB",
      "warning": "250 kB"
    }
  }
}

Monitor Third-Party Scripts

Evaluate the impact of external scripts on your store’s performance:

performance.getEntriesByType('resource').forEach((resource) => {
  if (resource.initiatorType === 'script') {
    console.log({
      url: resource.name,
      duration: resource.duration,
      size: resource.encodedBodySize,
      timing: {
        dns: resource.domainLookupEnd - resource.domainLookupStart,
        tcp: resource.connectEnd - resource.connectStart,
        download: resource.responseEnd - resource.responseStart
      }
    });
  }
});

Regularly tracking these metrics ensures your store stays optimised over time. Use automated alerts to catch any performance dips early.

Conclusion

Every optimisation strategy shared here plays a role in improving your site’s performance. By refining Core Web Vitals on Shopify Plus, you can significantly improve the shopping experience for your users. Prioritising metrics like LCP, FID, and CLS helps create a store that not only attracts organic traffic but also converts visitors into customers.

Consistent monitoring is key to maintaining strong performance. Regular audits, smart resource management, and reviewing third-party scripts ensure your store continues to run smoothly and efficiently. These efforts provide a solid base for building meaningful partnerships.

For expert assistance, consider working with professionals like Alinga. As a certified Shopify Plus Partner with two decades of eCommerce experience, Alinga specialises in creating high-performing, conversion-focused online stores. Their proven methods have helped numerous Australian businesses achieve better results. Let’s explore how Alinga can transform your Shopify platform into an effective sales tool, get in touch with us right away!

core web vitals, improve site speed, page speed Shopify, Shopify Plus performance, Shopify Plus tips, Shopify SEO

10 Tips To Improve Core Web Vitals on Shopify Plus

Why It Matters

Key Metrics to Target:

How To Fix Shopify Core Web Vitals – Boost Shopify Core …

1. Compress and Resize Media Files

Image Optimisation Tips

Video Optimisation Tips

Other Techniques

2. Reduce JavaScript Load

Defer Non-Essential Scripts

3. Set Up Browser Caching

Configure Cache Headers

Prioritise Asset Caching

Implement Version Control

4. Speed Up CSS Loading

Critical CSS Implementation

Optimise CSS Delivery

Remove Unused CSS

Minify and Combine

Media Query Optimisation

5. Cut Server Response Time

Enable CDN Caching

Optimise Data Retrieval

Streamline Liquid Code

Monitor App Impact

Configure Asset Preloading

Implement Smart Caching

sbb-itb-19747f8

6. Add Preload Settings

Prioritise Critical Resources

Use Resource Hints

Set Up Dynamic Preloading

Focus on Above-the-Fold Content

Track Preload Effectiveness

7. Check Third-Party Apps

Audit App Performance

Remove Unused App Code

Implement App Loading Strategy

Optimise Essential Apps

Monitor App Impact

Implement App Loading Rules

Consider App Alternatives

8. Fix Mobile Speed

Focus on Mobile-First Loading

Optimise Images for Mobile

Improve Touch Interactivity

Enhance Mobile Navigation

Adjust Viewport Settings

Optimise for Mobile Network Conditions

9. Stop Layout Shifts

Reserve Space for Dynamic Content

Stabilise Font Loading

Manage Dynamic Elements

Optimise Product Gallery

Common Layout Shift Triggers

Stabilise Third-Party Elements

10. Track Performance Changes

Configure Performance Monitoring Tools

Create a Custom Performance Dashboard

Automate Performance Monitoring

Key Performance Metrics

Implement Real User Monitoring

Set Performance Budgets

Monitor Third-Party Scripts

Conclusion

Related posts

Related Posts

The Ultimate SEO Guide to Optimise Your Shopify Website

Torqit: Shopifys Step Towards Innovation In Automation

How to Make More Sales with Shopify?

6 Reasons Why Migrating To Shopify Plus Is An Advantage

About Alinga

Business Solutions