by Dream Intrepid Ltd

Shopify Spring 2026 Edition: New Performance Standards Every Merchant Must Meet

By Optimage

Shopify's Spring 2026 Edition was announced in late February 2026, and while the headline features (new checkout customisation options, expanded Markets capabilities, and Shopify AI for product descriptions) got the most attention in the e-commerce press, the performance standards update buried in the technical documentation may have the largest long-term impact on merchant success.

Shopify has been moving toward stricter performance requirements for themes and apps for several years. The Online Store 2.0 architecture introduced in 2021 was partly a performance play. The Shopify Performance Dashboard, launched in 2024, gave merchants visibility into their store's Core Web Vitals for the first time. Spring 2026 Edition is the next step: Shopify is now actively flagging underperforming apps and themes in the Partner ecosystem, and the company has announced that theme certification for the Shopify Theme Store will require meeting updated performance benchmarks starting in mid-2026.

For merchants, this matters because theme and app performance directly affects their store's Core Web Vitals, which affects their Google rankings, which affects organic traffic, which affects revenue. The chain of causation is clear.

Table of Contents

What Changed in Shopify Spring 2026 Edition {#what-changed}

The Spring 2026 Edition performance updates affect merchants in several specific ways.

Updated Performance Dashboard. The existing performance dashboard has been significantly expanded to include breakdowns by page type (home, product, collection, cart), device type (mobile vs desktop), and geographic region. Merchants can now see which specific pages are underperforming and why, rather than getting only aggregate scores.

App Impact Reporting. New reporting shows how much each installed app contributes to page load time, JavaScript weight, and Core Web Vitals scores. This is a significant transparency improvement: merchants have long known that apps slow stores down, but now they can see exactly which apps are responsible for how much of the slowdown.

Image Format Recommendations. The Shopify admin now shows recommendations for image format updates, specifically flagging product images served in JPEG when WebP or AVIF would provide better performance at equivalent quality.

Theme Performance Badges. Themes in the Shopify Theme Store now display performance badges based on Lighthouse scores across a standardised set of test conditions. Themes that meet performance benchmarks receive a "Shopify Performance Certified" badge. Themes that fail are marked and Shopify has announced that failing themes will be removed from the store after a grace period.

Checkout Performance Improvements. Shopify's hosted checkout (used by all merchants on the Checkout Extensibility platform) has been further optimised, and Shopify reports LCP improvements for checkout pages. Merchants on checkout extensions benefit from these improvements automatically.

The New Image Standards in Shopify Themes {#image-standards}

The technical documentation for Spring 2026 Edition includes updated image standards for Shopify themes, which apply to both Theme Store themes and custom themes. The key standards:

WebP as primary format. Shopify's CDN has supported WebP since 2021, and themes can request WebP delivery by appending &format=webp (or &format=avif) to image URLs. Spring 2026 Edition makes WebP the recommended default for theme images, with AVIF as an option for the latest browser targets.

Responsive image srcsets required. All product and collection images in certified themes must use srcset with at least three size breakpoints: a small size for mobile (approximately 400px wide), a medium size for tablets (approximately 800px wide), and a large size for desktop (approximately 1600px wide). The sizes attribute must accurately describe the image's display size at each breakpoint.

Lazy loading below the fold. All images below the initial viewport must use loading="lazy" and decoding="async". This was already a best practice but is now a requirement for theme certification.

Explicit dimensions required. All <img> elements in certified themes must have width and height attributes to prevent CLS. This applies to all images: product photos, collection headers, promotional banners, and section images.

Maximum initial image payload. The combined weight of images loaded on initial render (before any scrolling) must not exceed 500KB for mobile viewport. This is a strict limit that requires merchants with heavy hero images or multiple above-the-fold banners to be aggressive about compression.

For merchants using custom themes or older theme versions, these standards are not immediately enforced. But adopting them is strongly recommended, both for the performance benefits and to future-proof against when Shopify extends these requirements beyond the Theme Store.

Product Image Optimisation for Shopify {#product-images}

Product images are the most important images on a Shopify store. They are the primary driver of conversion decisions, they are the most-viewed page element on product pages, and they are the images that most commonly cause performance problems.

The optimal approach to product images on Shopify in 2026:

Upload at the right source resolution. Shopify recommends uploading product images at 2048x2048 pixels (square) as a maximum. Larger images add storage costs and processing time without visible quality benefits in the storefront, since Shopify's CDN resizes images for delivery.

Use the Shopify CDN for resizing and format conversion. Shopify's CDN can serve any product image at any size and in WebP or AVIF format on request, using URL parameters. Your theme or custom code should be requesting appropriately-sized images for each display context:

{{ product.featured_image | image_url: width: 800, format: 'webp' | image_tag: loading: 'eager', fetchpriority: 'high' }}

For the main product image (which is often the LCP element on product pages), use loading: 'eager' and fetchpriority: 'high'. For gallery thumbnails and alternative product images, use loading: 'lazy'.

Maintain aspect ratio consistency. Shopify allows different products to have images at different aspect ratios, but displaying mixed aspect ratios in a collection grid causes CLS and creates a visually inconsistent experience. Standardise on a single aspect ratio (1:1 square or 3:4 portrait are the most common for fashion and general retail) and ensure all product images match that ratio.

Optimise before uploading. Shopify's CDN handles resizing but not initial quality optimisation. A product image uploaded as an uncompressed PNG at 4000x4000 pixels is stored at that size in your Shopify media library, and while the CDN will resize it for delivery, the original oversized file consumes storage and processing resources. Upload images at 2048x2048 (or the square dimensions appropriate for your product type) and at an appropriate quality level, rather than uploading raw camera files.

Compress lifestyle and editorial images more aggressively. Product images (where the customer needs to clearly see the item they might purchase) should be compressed conservatively (WebP quality 80-85). Lifestyle images, banner images, and editorial photography can be compressed more aggressively (WebP quality 72-78) without affecting purchase decisions, since these images are primarily atmospheric rather than detail-providing.

Shopify's Image CDN and How to Use It Properly {#image-cdn}

Shopify's image CDN is one of the platform's most powerful performance features, but many merchants and developers do not use it to its full potential. Understanding how it works helps you make better decisions about image management.

When you upload an image to Shopify (either as a product image, a file upload, or embedded in theme content), it is stored in Shopify's image storage system and served through a CDN. The CDN serves images from edge locations close to users and supports on-the-fly transformations via URL parameters.

The key URL parameters available on Shopify image CDN URLs:

width=800 — Returns the image resized to 800px wide (height adjusts proportionally) height=600 — Returns the image resized to 600px tall (width adjusts proportionally) crop=center — Crops to exact dimensions from the centre format=webp — Returns the image in WebP format format=avif — Returns the image in AVIF format (supported in 2025-2026) quality=75 — Returns JPEG/WebP at 75% quality

These parameters can be combined:

https://cdn.shopify.com/s/files/1/xxx/files/product.jpg?v=xxx&width=800&format=webp&quality=78

In Liquid templates, the image_url filter provides a cleaner API:

{{ image | image_url: width: 800, format: 'webp' }}

The critical mistake to avoid: requesting images at larger sizes than they will display at. If a product thumbnail in your collection grid is displayed at 300px wide on desktop and 150px wide on mobile, do not request the image at 800px wide because "it's a product image and quality matters." You are serving 6-28x more pixels than the user can perceive, wasting bandwidth and slowing load time.

Use srcset and sizes to serve the right size for each viewport:

<img
  srcset="
    {{ image | image_url: width: 300, format: 'webp' }} 300w,
    {{ image | image_url: width: 600, format: 'webp' }} 600w,
    {{ image | image_url: width: 900, format: 'webp' }} 900w
  "
  sizes="(max-width: 768px) 150px, 300px"
  src="{{ image | image_url: width: 300, format: 'webp' }}"
  alt="{{ image.alt | escape }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
  loading="lazy"
  decoding="async"
>

App Performance and Image Bloat {#app-performance}

Third-party apps are one of the most common causes of image-related performance problems on Shopify stores, and the new App Impact Reporting in Spring 2026 Edition makes this visible for the first time.

The most common image-related app performance problems:

Product review apps loading review images unoptimised. Many product review apps that allow customers to upload photos serve those customer-uploaded images without resizing or format conversion. A customer who uploads a 8MB iPhone photo as their review image can cause that entire 8MB to be served to every visitor to that product page. Look for review apps that apply their own image CDN or that allow you to configure image delivery settings.

Apps loading large promotional banners. Countdown timers, promotional bars, and upsell widgets often include images that are served from the app provider's CDN rather than Shopify's CDN. These images may not be optimised for the delivery context and add additional CDN connections and DNS lookups.

Wishlist and comparison apps loading product images. Apps that show wishlisted products or product comparison interfaces often load product images separately from the page's main image loading, sometimes without lazy loading.

Use Shopify's new App Impact Reporting (available in the Performance Dashboard in Spring 2026 Edition) to identify which apps are contributing the most to page load time. For apps with high image impact, investigate whether there are configuration options to reduce image sizes, whether the app can be replaced with a better-performing alternative, or whether the feature it provides is worth the performance cost.

The Shopify Lighthouse Score and What It Measures {#lighthouse-score}

Shopify's Performance Dashboard has always shown a Lighthouse-based score, but Spring 2026 Edition brings the scoring methodology closer to alignment with how Google Lighthouse scores are calculated in the wild.

The Shopify Lighthouse score is calculated by running Lighthouse on a sample of your store's pages (home, a randomly selected product page, a randomly selected collection page, and the cart page) under simulated mobile conditions with a throttled connection speed. The scores from these pages are aggregated into an overall store performance score.

The Lighthouse categories that contribute to the score:

Performance (weighted most heavily): Primarily LCP, INP, and CLS. Images are the dominant factor in all three.

Accessibility: Includes alt text requirements for images. Missing or poor alt text affects this score.

SEO: Includes image metadata requirements, proper heading structure, and mobile usability.

The score ranges from 0-100, and Shopify uses ranges of:

  • 90-100: Excellent
  • 75-89: Good
  • 50-74: Needs Improvement
  • 0-49: Poor

Spring 2026 Edition's new Theme Store performance certification requires themes to score 85+ on this scale across the standardised test pages. Merchants using certified themes should see their stores score better by default, but the theme score is achieved with empty demo content; your actual store with real products, real images, and real third-party apps will likely score lower.

Run your own Lighthouse audit from Chrome DevTools to get an accurate picture of your store's real performance, and use the new App Impact Report to understand what is driving the gap between the theme's base score and your store's actual score.

Collection Page Image Strategy {#collection-pages}

Collection pages are often the most image-heavy pages on a Shopify store and the most overlooked from a performance perspective. Product pages get attention because they directly affect conversion; collection pages are often treated as navigation rather than content. But collection pages are frequently the landing page for paid and organic search traffic, making their performance directly relevant to acquisition costs and conversion rates.

The image strategy for collection pages:

Hero/banner images: Collection header images should be compressed aggressively since they are decorative (WebP quality 70-75, under 120KB). They are rarely the reason a user stays on the collection page, and the performance cost of heavy collection headers is not justified.

Product grid images: These are the critical images. Use Shopify's CDN to serve them at exactly the right size for the grid layout, in WebP format, with lazy loading for all images below the fold. The first row of products (visible on initial load) should be served with loading="eager" and appropriate priority signals. All subsequent rows should be loading="lazy".

Pagination vs infinite scroll: Infinite scroll collection pages have become less common in 2025-2026 because of their negative impact on SEO (Google cannot crawl paginated content in infinite scroll) and their negative impact on INP (appending large numbers of product images to the DOM in response to scroll events causes main thread blocking). If your store uses infinite scroll, consider switching to traditional pagination or the "Load More" button pattern, which allows Google to crawl the content and is less problematic for INP.

Filters and faceted navigation: If your collection page has filter functionality that dynamically updates the product grid, the image loading strategy for the filtered results matters. New images loaded after a filter change should be lazy-loaded and decoded asynchronously to avoid INP problems during the filter interaction.

A Shopify Image Optimisation Checklist {#checklist}

Product images:

  • Upload source images at 2048x2048 maximum
  • Source images are JPEG quality 90+ or PNG
  • Main product image (LCP) uses loading="eager" and fetchpriority="high"
  • Gallery thumbnails use loading="lazy" and decoding="async"
  • Images are requested from CDN in WebP format
  • Images use srcset with at least 3 size breakpoints
  • All product images maintain a consistent aspect ratio
  • Alt text describes the product image accurately

Collection pages:

  • Hero/banner images are under 120KB in WebP
  • First row of product grid images use loading="eager"
  • All subsequent product images use loading="lazy"
  • width and height attributes are set on all product images
  • No JPEG images; all delivery in WebP via CDN URL parameters

Theme images (banners, icons, logos):

  • Logo is SVG format where possible (vector, no quality loss at any size)
  • Promotional banners are WebP quality 72-78
  • Section background images are WebP with appropriate quality for detail level
  • All theme images are served via Shopify CDN (not external URLs)

Apps:

  • App Impact Report has been reviewed in Performance Dashboard
  • Apps with high image impact have been evaluated for alternatives
  • Review app customer-uploaded images are served with size constraints
  • No unoptimised images being loaded by installed apps

Overall:

  • Lighthouse score on product page is 85+
  • Lighthouse score on collection page is 80+
  • CLS score is 0 on product and collection pages
  • LCP is under 2.5 seconds on mobile for product pages

Shopify Spring 2026 Edition is moving the platform in a clear direction: performance as a platform standard, not an option. Merchants who invest in image optimisation now are not just preparing for today's standards; they are building a performance foundation that will continue to pay off as Shopify raises expectations and as Google continues to weight page experience signals in its ranking algorithm.

Optimage helps e-commerce teams compress and batch-convert product images for Shopify, with WebP output and bulk processing. Get started free.

Try Optimage Free

Compress, convert, and optimize your images in seconds. No sign-up needed to start.

Start Optimizing Free
Back to The Optimage Journal