Shoptimize

Image and Video Optimization for Shopify: The Complete Guide

2026-07-25T00:00:00Z

Images are the number one drag on Shopify store speed. They account for roughly 27% of total page weight, they dominate your Largest Contentful Paint score, and they are where the majority of "why is my store so slow" problems trace back to.

The good news is that image and video optimization is also the highest-ratio work you can do. Get it right and you can cut page weight by 60 to 70% while making the store look exactly the same to the shopper. 😎

This guide covers the full picture. How Shopify actually serves media, the correct formats and sizing, lazy loading, layout stability, video handling, and the specific Liquid filters and tags you should be using in your theme to get all of this for free.

Why images matter more than almost anything else

When a shopper loads a product page, the largest visible element is almost always an image, usually the hero or the main product photo. That element is what LCP measures, and LCP under 2.5 seconds is the single highest-impact Core Web Vital on Shopify. So your images are not just "assets," they are the thing standing between the shopper and a page that feels fast.

Unoptimized images cause three separate problems at once:

They slow LCP. Big files take longer to download and paint.
They cause layout shift. Images without set dimensions make the page jump, hurting CLS.
They waste bandwidth. Especially painful on the mobile connections that make up most of your traffic.

Fix images well and you improve all three metrics simultaneously.

First, understand what Shopify does for you automatically

Before changing anything, it helps to know what the platform already handles, because it changes what you should and should not do manually.

Shopify serves all theme and product media through its CDN, and that CDN automatically detects which image formats the visitor's browser supports (WebP, AVIF, and so on) and picks the format that gives the best quality at the smallest size for that specific visitor. This is documented behavior of the image filters, when you serve an image through Shopify's URL filters, format negotiation happens at the edge without you specifying anything.

This has a practical and slightly counterintuitive consequence: you generally should not try to force WebP or AVIF yourself in Liquid. The format parameter on Shopify's image filters only supports jpg and pjpg (progressive JPEG) conversions. It does not let you force WebP or AVIF, because Shopify is already choosing the optimal modern format for each browser on its own. Fighting that is unnecessary and can actually produce a worse result.

So the real job is not "convert everything to WebP." The real job is:

Give Shopify a good, high-quality source image to work from.
Request it at the correct size for where it displays.
Let it generate a proper srcset so each device gets an appropriately sized file.
Load above-the-fold images eagerly and everything else lazily.
Reserve layout space so nothing shifts.

Almost all of that is done through the right Liquid filters, which we will get to a little later.

Step 1: Give Shopify a good source, and compress before upload

Shopify optimizes delivery, but it cannot un-bloat a badly prepared source file. Do not upload a 20MB, 6000px image straight off a camera or a stock site.

Compress and right-size your master image before upload using a tool like Squoosh or TinyPNG (which handles JPEG and PNG despite the name).
Upload at a sensible maximum: a source somewhere around 2048px on the long edge is plenty for almost any storefront use, since Shopify will generate call the smaller sizes you actually serve.
Keep PNG only for graphics that genuinely need transparency or crisp edges (logos, icons, line art). Use JPEG or a high-quality source for photography and let the CDN convert.

A note on image-optimization apps: they can be useful, but remember every app adds its own script load to every page. If an app is mostly doing compression you could do once before upload, weigh that recurring performance cost against the convenience.

Step 2: Serve images with the right Liquid filters

This is where most real theme-level wins live, and where custom-built stores most often go wrong. Shopify gives you a small set of image filters that, used correctly, produce a properly sized, responsive, lazy-loaded <img> tag with almost no effort.

A quick but important note on modern versus deprecated filters. Shopify has two generations of image filters. Use the current ones, image_url and image_tag, and avoid the deprecated img_url and img_tag, which you will still see in a lot of old themes and outdated blog posts. The deprecated filters are exactly the kind of legacy code that quietly holds a store back.

`image_url`: request the image at a specific size

The image_url filter builds a CDN URL for an image at the width (and optionally height) you specify. This is how you avoid the classic mistake of shipping a 2000px file into a 400px slot.

{{ product.featured_image | image_url: width: 600 }}

You can constrain both dimensions and control cropping when the target aspect ratio differs from the source:

{{ product.featured_image | image_url: width: 800, height: 800, crop: 'center' }}

The crop parameter accepts top, center, bottom, left, and right, with center as the default. There is also a pad_color parameter (a hex value like 'ffffff') if you want to pad to an aspect ratio instead of cropping.

`image_tag`: generate a proper responsive `<img>`

On its own, image_url just gives you a URL. Pipe it into image_tag and Shopify generates a complete <img> element for you, and this is where a lot of the optimization comes for free:

{{ product.featured_image | image_url: width: 600 | image_tag }}

Two things happen automatically here that matter a great deal:

Width and height are set for you. By default image_tag adds width and height attributes derived from the image's dimensions and aspect ratio. That is exactly what prevents Cumulative Layout Shift: the browser reserves the correct space before the image arrives, so nothing jumps. You do not have to hand-calculate anything.

A srcset is generated for you. By default image_tag produces a srcset with a sensible set of widths up to the size you requested, so each device downloads an appropriately sized file rather than everyone getting the same large image. This is the single biggest bandwidth saving available, and you get it just by using the filter properly.

You can add attributes like a class:

{{ product.featured_image | image_url: width: 800 | image_tag: class: 'product__image' }}

Control the responsive widths and sizes explicitly

If you want to define the exact widths in the srcset rather than accept the defaults, pass widths as a comma-separated string:

{{ product.featured_image
  | image_url: width: 1200
  | image_tag: widths: '400, 600, 800, 1200' }}

Pair that with a sizes attribute so the browser knows how much space the image occupies at each breakpoint and can pick the smallest sufficient file. A product image that is full width on mobile but half width on desktop, for example:

{{ product.featured_image
  | image_url: width: 1200
  | image_tag:
      widths: '400, 600, 800, 1200',
      sizes: '(min-width: 750px) 50vw, 100vw' }}

Getting sizes right is one of the highest-value, most-overlooked pieces of image optimization, because without it the browser has to guess and often downloads more than it needs.

Step 3: Handle lazy loading correctly (and know the one exception)

Lazy loading defers below-the-fold images until the shopper scrolls toward them, so the initial paint only handles what is actually visible.

Here is the useful part: image_tag handles this intelligently on its own. Unless you apply a preload attribute, Shopify automatically sets loading to lazy for images further down the page. In other words, correct default behavior comes built in when you use the filter.

The critical exception is your above-the-fold hero or main product image. That image is almost certainly your LCP element, and it must not be lazy-loaded. You want it to load eagerly, and ideally preloaded. You should not lazy-load images above the fold. If your theme's default logic gets this wrong for a given template, Shopify exposes section.index and section.location so a developer can write correct above-the-fold logic rather than lazy-loading everything blindly.

This is exactly the kind of thing custom theme work frequently breaks. Either it strips the smart defaults and lazy-loads the hero (tanking LCP), or it removes lazy loading entirely (bloating the initial load). If your store has had custom development, this is worth checking explicitly, because it is one of the most common hidden LCP killers.

Step 4: Layout stability comes from letting the filters set dimensions

Cumulative Layout Shift, the annoying jump where you go to tap a button and it moves, is very often caused by images that do not reserve their space before loading.

The fix is mostly already covered above: because image_tag sets width and height attributes by default from the image's real aspect ratio, using it correctly protects your CLS almost automatically. Where stores get into trouble is hand-rolling raw <img> tags without dimensions, or overriding those attributes. If you build <img> markup manually, always set explicit dimensions or wrap the image in a container with a reserved aspect ratio. There is no cost to doing this and a real cost to skipping it.

Step 5: Handle video without wrecking performance

Video is powerful for conversion but dangerous for speed if handled naively. A self-hosted video file can dwarf every other asset on the page combined. Shopify gives you two Liquid filters that make this much safer.

Shopify-hosted video: `video_tag`

For video uploaded to Shopify (product media or files), use the video_tag filter rather than hand-writing a <video> element:

{% for media in product.media %}
  {% if media.media_type == 'video' %}
    {{ media | video_tag }}
  {% endif %}
{% endfor %}

The reason this matters for performance. When you upload an MP4, Shopify also generates an HLS (m3u8) source alongside it. HLS lets the player adapt the stream to the visitor's connection quality rather than forcing everyone to download one heavy file, and the player falls back to the MP4 if HLS is not supported. You get adaptive streaming essentially for free by using the filter. One caveat worth knowing, if you enable loop, Shopify intentionally does not use the HLS source, so it can cache the video via progressive download instead.

External video (YouTube/Vimeo): `external_video_tag`

For video hosted on YouTube or Vimeo, use external_video_tag, which generates the embed iframe for you and lets you pass player options:

{% for media in product.media %}
  {% if media.media_type == 'external_video' %}
    {% if media.host == 'youtube' %}
      {{ media | external_video_url: color: 'white' | external_video_tag }}
    {% elsif media.host == 'vimeo' %}
      {{ media | external_video_url: loop: '1', muted: '1' | external_video_tag }}
    {% endif %}
  {% endif %}
{% endfor %}

Offloading video to YouTube or Vimeo keeps the heavy delivery and transcoding off your critical path entirely.

General video rules

Do not self-host large, unoptimized video on the storefront. Prefer Shopify-hosted video (for the automatic HLS benefit) or an external host.
Lazy-load or facade your video. A "click to play" thumbnail that only loads the real player on interaction keeps the initial page light.
Never autoplay heavy video above the fold. If you want motion in the hero, a short compressed muted clip is far lighter than a full player, and you should still test its effect on LCP.
Replace animated GIFs with video. GIFs are enormous: a single two-second GIF can hold 20-plus frames, and two or three of them can add 10MB or more to a page. A short compressed MP4 is a fraction of the size at better quality.

A quick checklist

Before you consider your media optimized, verify:

Source images compressed and sensibly sized before upload (no raw 20MB masters).
Images served through image_url and image_tag, not the deprecated img_url / img_tag.
Each image requested at an appropriate width for where it displays, not the full source size.
A srcset present (the image_tag default, or explicit widths) plus a correct sizes attribute.
width and height attributes present on every image so nothing shifts.
The above-the-fold hero loading eagerly (or preloaded); everything below lazy-loaded.
Video served via video_tag (Shopify-hosted, gets HLS) or external_video_tag (YouTube/Vimeo), never a heavy autoplaying self-hosted file.
No animated GIFs, short MP4s used where motion is needed.

Then re-run PageSpeed Insights on a product page, mobile first, and watch LCP and CLS both improve.

Reference

The Liquid filters covered here are documented on Shopify's developer site:

image_url: https://shopify.dev/docs/api/liquid/filters/image_url
image_tag: https://shopify.dev/docs/api/liquid/filters/image_tag
video_tag: https://shopify.dev/docs/api/liquid/filters/video_tag
external_video_tag: https://shopify.dev/docs/api/liquid/filters/external_video_tag

The bottom line

Most image and video optimization on Shopify is really about using the platform correctly. Give the CDN a clean source, request the right sizes, and let the modern Liquid filters generate responsive, lazy-loaded, dimension-locked markup for you. The CDN handles WebP and AVIF negotiation on its own, so the work is sizing, srcset, sizes, and load order, not manual format conversion.

Where it gets genuinely technical is in the theme itself: correct sizes values per template, right handling of the above-the-fold exception, video facades, and untangling the deprecated filters and hand-rolled markup that older custom themes are full of. That is exactly the part DIY efforts tend to get wrong. If your images are dragging your store down and you would rather have the media pipeline built correctly in your theme and verified against your Core Web Vitals, that is a good place to bring in a specialist.

How to Actually Improve Your Shopify Lighthouse Score and Core Web Vitals

2026-07-25T00:00:00Z

You ran PageSpeed Insights, got a red number in the 30s, and now you want to know how to make it green. This guide explains what that number really means, why chasing 100 is the wrong goal, and exactly which levers move Core Web Vitals on a Shopify store, in the order that gets you the most improvement per hour of effort.

Core Web Vitals are a confirmed ranking signal, so this is not vanity. A slow store ranks lower, bounces more, and converts worse, especially on mobile, which is now the majority of Shopify traffic. But the way most store owners approach the score actively wastes their time. Let us fix that first.

First, stop chasing 100

Most Shopify performance work fails for one reason: the team treats a perfect 100/100 lab score as the target. It is not achievable, or worth achieving, for a real store carrying product photography, reviews, and a few genuinely useful apps.

A healthy mobile PageSpeed score for a real, revenue-generating Shopify store sits between 60 and 80. Above 80 is excellent. For context, the top three organic results on most commercial search queries load in about 1.8 to 2.4 seconds and score above 75 on mobile. That is the bar to clear to compete, not a synthetic hundred.

So the goal is not "green everywhere." The goal is: LCP under 2.5s, INP under 200ms, CLS under 0.1, on mobile, on your money-making templates. Hit that and the score takes care of itself.

Lab data vs field data: know which one you are looking at

This trips people up constantly, so it is worth being precise.

Lab data is a simulated, single load in a controlled environment. Lighthouse (in Chrome DevTools) and the lab section of PageSpeed Insights produce it. It is repeatable and perfect for diagnosing specific causes. It does not reflect what your actual customers experienced.

Field data is aggregated from real visits. Google evaluates Core Web Vitals at the 75th percentile of real-user sessions, split across mobile and desktop. This is what feeds ranking signals. When you run a URL through PageSpeed Insights, the top of the report shows this field data, drawn from the Chrome User Experience Report (CrUX), a rolling 28-day dataset of real Chrome users, provided your store gets enough traffic to be included. PageSpeed Insights itself is a one-time check rather than a dashboard, so for tracking trends over time, Shopify's own Web Performance reports are the better tool (though that data can lag up to 36 hours).

The practical rule: field data tells you what to prioritize, lab data tells you how to fix it. If your field LCP is bad, use the Lighthouse lab diagnostics to find the render-blocking resource or oversized image causing it. Do not fix things that only look bad in lab but are fine in the field.

The three metrics, and what actually drives each one

LCP (Largest Contentful Paint) — target under 2.5s

LCP measures how long until the largest visible element finishes rendering, usually your hero image or main heading. On Shopify, this is almost always the metric to fix first, and it is almost always dominated by images.

What drives it up:

A large, uncompressed hero image above the fold.
The hero image lazy-loaded by mistake (it should load eagerly).
Render-blocking CSS or JavaScript delaying the paint.
Slow server response, though on Shopify's infrastructure this is rarely the bottleneck.

How to fix it:

Compress the hero source before upload. You do not need to convert it to WebP or AVIF yourself; Shopify's CDN negotiates the best modern format per browser automatically when you serve through the image filters.
Right-size the image to the space it fills. A 2000px file in a 500px slot delays everything. Request the size you need with image_url:

{{ section.settings.hero | image_url: width: 1500 | image_tag: preload: true }}

That preload: true sends a preload resource hint for your LCP image, which is one of the most direct LCP wins available. Use it only on the above-the-fold hero, never site-wide.
Make sure the hero loads eagerly, not lazily. image_tag lazy-loads below-the-fold images by default, which is what you want everywhere except the hero. Custom theme work frequently breaks this split, so check it explicitly.
Defer non-critical scripts so they stop blocking the paint (see INP below).

INP (Interaction to Next Paint) — target under 200ms

INP replaced First Input Delay. It measures how quickly the page responds when someone taps or clicks. A high INP means the page looks loaded but is not yet responsive, because the browser's main thread is busy running JavaScript.

What drives it up:

Too many third-party app scripts competing for the main thread.
Heavy tracking tags and tag managers firing early.
Chat widgets, heatmaps, and popup logic loading before the user can interact.

How to fix it:

This is an app-and-script problem, so the fix is the app audit (see below).
Defer non-critical JavaScript so it runs after the page is interactive. Any script you control in the theme should load with defer:

<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

Remove tracking and marketing scripts that fire before interaction.

CLS (Cumulative Layout Shift) — target under 0.1

CLS measures how much the layout jumps around while loading. It is the one shoppers feel viscerally, the "I tried to tap the button and it moved" frustration.

What drives it up:

Images without explicit width and height, so the browser does not reserve space.
App or ad content injected into the layout after initial render.
Web fonts loading late and reflowing text.
Banners or announcement bars that appear after paint and push content down.

How to fix it:

Set explicit width and height (or a reserved aspect-ratio container) on every image. The good news: image_tag adds width and height for you automatically from the image's real aspect ratio, so simply using it correctly protects most of your CLS. Hand-rolled <img> tags without dimensions are the usual culprit. (See our post on image and video optimization for more on this.)
Reserve space for anything injected late, including app widgets and banners.
Control font loading with font_face and font-display: swap, and limit font families to reduce late reflow:

{% style %}
  {{ settings.type_body_font | font_face: font_display: 'swap' }}
{% endstyle %}

The fix order that gives you the most improvement per hour

Do these in order. The early ones do most of the work.

1. Audit and remove apps

App sprawl is the single biggest cause of slow Shopify stores, ahead of the platform, the theme, or anything else. Nearly every app injects scripts on every page load whether or not the shopper uses that feature, and they pile onto the main thread and wreck INP.

List every installed app in your admin.
Remove any that are not clearly earning their keep. Uninstalling beats disabling, because stopped apps leave residual code.
Then disable leftover embeds under Online Store > Themes > Customize > App embeds. This is the step everyone forgets. The app is gone but its embed still fires.

2. Compress and fix images

Images are roughly 27% of page weight and the number one drag on LCP. Compress the source before upload, serve through image_url / image_tag (which set dimensions and generate a srcset for you, and let the CDN handle WebP/AVIF), right-size to the display, and confirm the hero loads eagerly while everything below the fold is lazy-loaded. Done properly this can cut page weight 60 to 70%.

3. Defer non-critical third-party scripts

Tracking pixels, chat, heatmaps, and popup logic almost never need to fire before the shopper can interact. Defer them. This is the biggest single lever on INP after the app audit.

4. Address the theme

If the store carries heavy legacy theme code, the first three steps will move the number but often will not push it past 60 on their own. Themes built on Online Store 2.0 with section groups load faster than older customized themes carrying years of edits. Minify CSS and JS, remove unused sections, and keep Liquid loops tight. For a store with real performance debt, a controlled rebuild on modern architecture frequently pays back faster than fixing it piece by piece.

One theme-level lever worth knowing at the code level: Shopify's image_tag already lazy-loads below-the-fold images by default, but if your theme needs custom control over which sections count as "above the fold," the section.index property tells you a section's position on the page. A common pattern is to load eagerly for the first few sections and lazily below them:

{% if section.index > 3 %}
  {{ image | image_url: width: 800 | image_tag: loading: 'lazy' }}
{% else %}
  {{ image | image_url: width: 800 | image_tag }}
{% endif %}

This is exactly the kind of logic custom themes get wrong, either lazy-loading everything (including the hero, which tanks LCP) or nothing (which bloats the initial load).

A representative real-world path: a store starting at a mobile PageSpeed score of 20 reached 59 after one focused sprint, then 89 after a second pass plus a controlled theme rebuild. The jump from the 20s to the high 80s came from theme-level work, not from tweaks.

Measure the right templates

Do not judge your whole store by the homepage. Every template type (home, collection, product, cart, blog) has its own bottlenecks, and a product page loading a dozen media assets and three widgets behaves nothing like the homepage. Test each type separately, mobile first, and prioritize product and collection pages because that is where purchases happen.

Take a screenshot of your baseline before you start. You will want the before-and-after, and re-measure after each meaningful change so you know what actually moved.

The honest maintenance reality

A good score is not permanent. New apps, theme updates, and seasonal content all push the numbers back down; a store gets heavier unless someone tunes it. Install a Web Vitals monitor, set alerts for when LCP or INP regresses, and review monthly.

Everything here is doable yourself, and it is the right sequence. The catch is that getting from a red 30s score into a solid green 80s usually requires the theme-level engineering in step four, which is where the work gets genuinely technical and where most DIY efforts stall in the low 60s. If you would rather have your Core Web Vitals brought into the green and kept there to a measurable standard, that is the kind of work worth handing to someone who does it every day.

Reference

The Liquid filters and objects referenced here are documented on Shopify's developer site:

image_url: https://shopify.dev/docs/api/liquid/filters/image_url
image_tag: https://shopify.dev/docs/api/liquid/filters/image_tag
font_face: https://shopify.dev/docs/api/liquid/filters/font_face
section object (section.index): https://shopify.dev/docs/api/liquid/objects/section
Performance best practices for Shopify themes: https://shopify.dev/docs/storefronts/themes/best-practices/performance

The Complete Guide to Optimizing a Shopify Store (Front to Back)

2026-07-25T00:00:00Z

Most Shopify stores are leaving money on the table, not because the products are wrong or the marketing is weak, but because the store itself is slow, cluttered, and quietly bleeding conversions at every stage of the funnel. A one-second delay in load time can reduce conversions by around 7%. For a store doing $50K a month, that is roughly $3,500 in monthly revenue lost to nothing but latency.

This guide walks through how to optimize a Shopify store end to end. How it is built, how fast it loads, how it renders, and how it converts. It is thorough on purpose. If you work through all of it carefully, you can meaningfully move your numbers.

A quick orientation before we start. Optimization on Shopify breaks into four layers that build on each other:

Measurement. You cannot improve what you are not measuring correctly, and most people measure it wrong.
The foundation. Theme architecture and app load. This is where the majority of real speed lives.
Rendering and delivery. Images, fonts, scripts, and the critical rendering path.
Conversion. Turning the faster, cleaner store into more completed checkouts.

Work in that order. Fixing conversion elements on a store that takes six seconds to load is like repainting a car with a seized engine.

Part 1: Measure correctly before you touch anything

The single most common mistake in Shopify optimization is chasing a Lighthouse score on the homepage and calling it done. Lab scores from a single URL are diagnostic tools, not the goal. What actually matters is what real users experience across your real templates.

Understand the two kinds of data

Lab data comes from tools like Lighthouse and PageSpeed Insights running a simulated load in a controlled environment. It is repeatable and great for diagnosing specific causes like render-blocking resources, oversized images, layout shift sources. It does not tell you what your customers experienced.

Field data is real-user monitoring, aggregated from actual visits. Google evaluates Core Web Vitals at the 75th percentile of real sessions, split across mobile and desktop. This is what feeds into search ranking signals and what reflects your actual revenue exposure.

You need both. Lab data tells you why something is slow. Field data tells you whether it matters and to whom.

The three metrics that matter

Google's Core Web Vitals are the throughline for both user experience and rankings:

LCP (Largest Contentful Paint): time until the largest visible element (usually the hero image or main heading) finishes rendering. Target: under 2.5 seconds. On Shopify this is the highest-impact metric, and it is almost always dominated by images.
INP (Interaction to Next Paint): how quickly the page responds to user interaction. This replaced First Input Delay. Target: under 200ms. High values mean the page looks ready but is not yet responsive, usually because of heavy JavaScript from apps.
CLS (Cumulative Layout Shift): how much the layout jumps around while loading. Target: under 0.1. Caused by images without set dimensions, injected ad or app content, and late-loading fonts.

Test the templates that make money, not just the homepage

Every Shopify template type behaves differently. Your homepage, collection pages, product pages, cart, and blog posts each have their own bottlenecks. A product template loading a dozen media assets and three review widgets will behave nothing like your homepage. Test each type separately, and prioritize the product and collection pages, because that is where purchase decisions happen.

Your measurement toolkit

PageSpeed Insights (free): lab plus field data, LCP/INP/CLS, and specific recommendations. Run it per template, mobile first.
Lighthouse (in Chrome DevTools): deeper lab diagnosis of render-blocking resources and script cost.
Shopify's built-in Web Performance reports (Online Store > Themes, and Analytics): real-user LCP, INP, and CLS over time and by page type. Note that this data can lag by up to 36 hours, so treat it as a directional record rather than an instant QA check.
WebPageTest: waterfall view of exactly what loads in what order, which is invaluable for finding what is blocking the critical path.

Set a baseline for every key template before you change anything.

A realistic target

Do not chase 100/100. Most Shopify performance work fails because teams treat the perfect lab score as the objective. A real store carrying product photography and a few genuinely useful apps that scores 60 to 80 on mobile PageSpeed, with LCP under 2.5s, is in healthy shape. The top three organic results on most commercial queries load in roughly 1.8 to 2.4 seconds. That is the bar to clear to compete, not a synthetic hundred.

Part 2: The foundation (theme and apps)

This is where the biggest wins live, and where most guides stay superficial. If the foundation is heavy, nothing you do downstream will save you.

App sprawl is the number one killer

The single biggest cause of slow Shopify stores is third-party app sprawl, not the platform itself. Here is the mechanism, which is worth understanding rather than just accepting: nearly every Shopify app injects JavaScript, CSS, or both into your storefront on every page load, regardless of whether a visitor ever uses that app's feature. A reviews app, an upsell app, a currency converter, a chat widget, and a popup tool each add their own scripts, their own render cost, and often their own external network requests. The effect compounds. Ten apps do not add ten small costs; they add ten scripts competing for the main thread, and INP falls apart.

How to fix it:

Go to your Shopify admin and list every installed app.
For each one, ask a blunt question: is this app actively earning its keep in revenue or operations? If you cannot answer yes with confidence, it goes.
Uninstall the ones that fail. Uninstalling matters more than disabling, because stopped apps often leave residual code behind.
Then go to Online Store > Themes > Customize > App embeds and disable any leftover app embeds from apps you have already removed. This is a commonly missed step. The app is gone but its embed is still firing.
Where two apps do overlapping jobs, consolidate to one.

Stopping a script from loading is always faster than optimizing it. This step alone, done honestly, moves more stores than any other single change.

Theme architecture

Your theme is the foundation of the storefront: it controls templates, sections, scripts, styles, product media, collection grids, and menus. Heavy, outdated, or animation-laden themes carrying years of legacy code will hold you back no matter what else you do.

Guidance:

Prefer Online Store 2.0 themes with section groups. They load faster and are cleaner to maintain than older customized themes carrying accumulated legacy code. Horizon, Dawn, Impulse, and Prestige are reliable performance-focused starting points.
Do not switch themes on a demo score alone. A theme demo store has no apps, no real product data, and idealized images. Test any candidate theme in a development environment with your actual products, images, menus, apps, and templates before committing.
Remove unused sections and dead code. Themes accumulate cruft (a technical term 😅). If a section is not used on any live template, it is still shipping code.
Minify CSS and JavaScript in your theme files to strip whitespace, comments, and dead code.

When a rebuild beats incremental fixes

If a store carries significant performance debt, a custom theme stacked with years of edits, broken lazy loading, tangled Liquid, a controlled rebuild on a modern Online Store 2.0 architecture often pays back faster than fixing it tip by tip. A representative real-world example: a store that arrived at a mobile PageSpeed score of 20 climbed to 59 in one optimization sprint, then to 89 after a second pass plus a controlled theme rebuild. Incremental work rarely takes a store from the 20s into the high 80s on its own; theme-level work is what breaks that ceiling.

Liquid discipline

Shopify's Liquid templating is powerful but not free at scale. Features like mega menus, AJAX carts, dynamic recommendations, and complex collection filtering all execute work on every render. A well-structured store does not make the browser recompute things it does not need. Keep loops tight, avoid deeply nested queries in high-traffic templates, and be deliberate about how much dynamic logic runs above the fold.

Part 3: Rendering and delivery

With the foundation clean, this is where you sharpen perceived and actual load speed.

Images: the biggest single lever on LCP

Images typically account for around 27% of total page weight, and unoptimized images are the number one drag on Shopify LCP. Because there is a lot of depth here, images and video get their own dedicated guide, but the essentials:

Let Shopify's CDN pick the format. You do not need to convert to WebP or AVIF yourself. Shopify's CDN detects what each visitor's browser supports and serves the optimal modern format automatically, as long as you serve images through the Liquid image filters. The format parameter only supports jpg and pjpg, so trying to force WebP by hand is both impossible and unnecessary.
Compress and right-size the source before uploading. Do not upload a 4MB hero straight off a camera. A source around 2048px on the long edge is plenty; Shopify generates the smaller sizes you actually serve.
Use image_url and image_tag, not the deprecated img_url / img_tag. The modern filters set width and height for you (protecting CLS) and generate a responsive srcset automatically:

{{ product.featured_image | image_url: width: 800 | image_tag:
     widths: '400, 600, 800',
     sizes: '(min-width: 750px) 50vw, 100vw' }}

Load the above-the-fold hero eagerly, lazy-load everything below. image_tag already sets loading="lazy" for images further down the page by default. For your LCP hero, do the opposite and preload it:

{{ section.settings.hero | image_url: width: 1500 | image_tag: preload: true }}

Themes from 2024 onward generally handle this split by default, but custom theme work frequently breaks it, so verify. The dedicated image guide covers this in depth.

Fonts

Custom fonts are a quiet performance and CLS cost. Discipline:

Use system fonts where the brand allows; they are effectively instant.
If using custom or Google Fonts, limit to a maximum of two families and only the weights you actually use.
Prefer Shopify's own font library through the font_face filter, which lets you serve fonts from Shopify's CDN and control font-display so text stays visible while the font loads:

{% style %}
  {{ settings.type_body_font | font_face: font_display: 'swap' }}
{% endstyle %}

Preload only your primary above-the-fold font so text does not flash or shift late.

The critical rendering path

The goal is to get visible, above-the-fold content painted as fast as possible and defer everything else. Practically:

Defer non-critical JavaScript so it does not block the initial render. Tracking pixels, chat widgets, heatmaps, and popup logic almost never need to fire before the shopper can interact. In your theme, load scripts with defer:

<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>

Preload only what the first paint truly needs. Use preload_tag sparingly for genuinely render-critical assets, and stylesheet_tag with preload for a render-blocking stylesheet:

{{ 'theme.css' | asset_url | stylesheet_tag: preload: true }}

Prioritize visible content. Restructure asset loading so what the shopper sees first loads first, rather than loading everything at once.
Audit marketing tags. Tag managers, pixels, and analytics scripts firing before interaction are a common INP wrecker.

CDN and caching

Shopify provides a world-class CDN (powered by Cloudflare) for media and assets at no extra cost, serving files from the nearest edge location globally. You get most of this for free. What you control:

Let Shopify handle CDN delivery. Do not fight it with custom overrides.
Use predictable, stable asset naming so browsers cache effectively.
Avoid constantly changing assets, which invalidates caching unnecessarily.

Mobile is the real test

The majority of Shopify traffic in 2026 is mobile, and mobile converts lower than desktop (roughly 1.2% vs 1.9%), so it is both your largest audience and your biggest opportunity. Desktop numbers looking good tells you little. Always test mobile first, on a real device over a throttled connection, not just a fast laptop on office wifi. If it feels slow to you on a phone, it is definitely slow to your customers.

Part 4: Conversion optimization

A fast store that does not convert is just an efficient way to lose visitors. Once the technical foundation is solid, conversion is where the fast store turns into revenue. The average Shopify store converts between roughly 1.4% and 3.2%; top performers sit at 4 to 6% or higher. Moving from 2% to 3% on the same traffic is a 50% revenue increase with zero additional ad spend.

Diagnose the funnel before optimizing

The Shopify funnel runs: land, discover, engage with product, add to cart, check out. Use your analytics to find where visitors actually drop off, then fix that stage rather than guessing. Track add-to-cart rate, checkout initiation rate, and checkout completion rate, not just the top-line conversion number, because those reveal where the friction is.

Product pages: reduce hesitation, not just friction

Most conversion problems are not broken buttons; they are unresolved buyer hesitation. Shoppers arrive interested, scroll, sometimes add to cart, and then something feels unresolved. Your job is to remove uncertainty at each decision point:

Lead with value before configuration. Put a one or two sentence description directly under the product name that answers "why this, why now" before you ask the shopper to pick size, color, or variant. Asking people to make choices before desire and reassurance are established creates resistance.
Make variant selection visual. Replace dropdowns with clearly labeled buttons or tiles, and separate the decisions visually (size is not frame is not color). Buried dropdowns force mental effort.
Set delivery expectations clearly. Shoppers frequently hesitate not over price but over not knowing when they will receive the item. State realistic dates or ranges, and explain made-to-order timelines plainly.
Be specific about materials and quality. Vagueness reads as something to hide. Specifics build trust, especially above commodity price points.
Structure the information. Even good content hurts if it is a wall of text. Break reassurance into scannable blocks.

Place reviews on product and checkout pages, where trust matters at the moment of decision. Reviews alone can lift conversions 10 to 15%.
Use varied formats: text, photos, video.
Show trust badges and secure-checkout signals near the buy button and at checkout.

Cart and checkout

Cart abandonment averages just under 70%. Small improvements here compound:

Show line-item and total savings in the cart, and a free-shipping progress indicator if you offer one.
Reveal shipping costs early. Surprise costs at checkout are a top abandonment cause.
Enable guest checkout. Forced account creation kills conversions.
Offer one-tap payment (Shop Pay, Apple Pay, Google Pay).
Keep mobile checkout single-column. Shopify's default checkout is already well optimized; be careful with third-party checkout modifications.
Set up abandoned-cart email recovery. Top stores recover 15 to 25% of abandoned carts this way.

Mobile conversion specifics

Since mobile is most of your traffic and converts lower, closing that gap is one of the largest available wins:

Hero image, price, and primary CTA above the fold on standard phone screens.
Minimum 16px body text with comfortable line height so no one has to zoom.
Tap targets at least 44 by 44 pixels to prevent mistaps.
Collapsible menu with clear category labels.

Test properly

Not everything needs a test, some things are just best practice. But for anything ambiguous, run one change at a time so you can isolate the effect, give each test two to four weeks, and root your hypotheses in observed buyer behavior rather than opinion. Real gains come from changing flows (navigation, product discovery, checkout), not from cosmetic button-color tweaks.

Putting it in order

If you do nothing else, do these three first, in this order, because they deliver most of the gain:

Audit and remove apps (plus their leftover embeds).
Compress and modernize images, and fix lazy loading.
Defer non-critical third-party scripts.

Then measure again. Then move to theme-level work and conversion. Re-measure after each meaningful change so you know what actually moved the number.

And a final honest note. Speed and conversion optimization is not a one-time project. New apps, theme updates, seasonal traffic, and everyday content additions all push your numbers back down over time. A store naturally gets heavier unless someone periodically tunes it. Install a Web Vitals monitor, set alerts for when LCP or INP regresses, and review monthly.

This is genuinely doable yourself, and everything above is real. It is also a lot of careful, ongoing, technical work, and the difference between a store that scores 60 and one that scores 88 is usually theme-level engineering and disciplined maintenance. If you would rather have that handled, done to a measurable standard and kept that way, that is exactly the kind of work worth handing to a specialist.

Reference

The Liquid filters and objects referenced here are documented on Shopify's developer site:

image_url: https://shopify.dev/docs/api/liquid/filters/image_url
image_tag: https://shopify.dev/docs/api/liquid/filters/image_tag
stylesheet_tag: https://shopify.dev/docs/api/liquid/filters/stylesheet_tag
preload_tag: https://shopify.dev/docs/api/liquid/filters/preload_tag
font_face: https://shopify.dev/docs/api/liquid/filters/font_face
section object (section.index): https://shopify.dev/docs/api/liquid/objects/section
Performance best practices for Shopify themes: https://shopify.dev/docs/storefronts/themes/best-practices/performance

Shoptimize

Image and Video Optimization for Shopify: The Complete Guide

Why images matter more than almost anything else

First, understand what Shopify does for you automatically

Step 1: Give Shopify a good source, and compress before upload

Step 2: Serve images with the right Liquid filters

image_url: request the image at a specific size

image_tag: generate a proper responsive <img>

Control the responsive widths and sizes explicitly

Step 3: Handle lazy loading correctly (and know the one exception)

Step 4: Layout stability comes from letting the filters set dimensions

Step 5: Handle video without wrecking performance

Shopify-hosted video: video_tag

External video (YouTube/Vimeo): external_video_tag

General video rules

A quick checklist

Reference

The bottom line

How to Actually Improve Your Shopify Lighthouse Score and Core Web Vitals

First, stop chasing 100

Lab data vs field data: know which one you are looking at

The three metrics, and what actually drives each one

LCP (Largest Contentful Paint) — target under 2.5s

INP (Interaction to Next Paint) — target under 200ms

CLS (Cumulative Layout Shift) — target under 0.1

The fix order that gives you the most improvement per hour

1. Audit and remove apps

2. Compress and fix images

3. Defer non-critical third-party scripts

4. Address the theme

Measure the right templates

The honest maintenance reality

Reference

The Complete Guide to Optimizing a Shopify Store (Front to Back)

Part 1: Measure correctly before you touch anything

Understand the two kinds of data

The three metrics that matter

Test the templates that make money, not just the homepage

Your measurement toolkit

A realistic target

Part 2: The foundation (theme and apps)

App sprawl is the number one killer

Theme architecture

When a rebuild beats incremental fixes

Liquid discipline

Part 3: Rendering and delivery

Images: the biggest single lever on LCP

Fonts

The critical rendering path

CDN and caching

Mobile is the real test

Part 4: Conversion optimization

Diagnose the funnel before optimizing

Product pages: reduce hesitation, not just friction

Social proof and trust

Cart and checkout

Mobile conversion specifics

Test properly

Putting it in order

Reference

`image_url`: request the image at a specific size

`image_tag`: generate a proper responsive `<img>`

Shopify-hosted video: `video_tag`

External video (YouTube/Vimeo): `external_video_tag`