Fast loading times matter for two main reasons:
Conversions: Faster stores feel smoother and convert better, especially on mobile.
SEO: Google uses performance metrics as ranking signals, particularly Core Web Vitals.
In this guide, we’ll break down how page speed works in Shopify, how to measure it correctly, and which areas actually move the needle when optimizing real stores — from Core Web Vitals to apps, theme code, and Liquid performance.
If you want to go further and learn how to turn this into a $1,500–$2,000 service package, keep an eye on the Shopify Developer Bootcamp.
How to Measure Page Speed
Before starting any optimization work, it’s important to measure your current page speed and understand where your store stands.
Google PageSpeed Insights
One of the most commonly used tools for measuring page speed is Google PageSpeed Insights.
It’s based on Lighthouse and provides a clear performance report for both mobile and desktop.
Setting realistic expectations: Getting a Score between 90–100 is often unrealistic for Shopify stores.
E-commerce sites typically include large images, frontend apps, tracking scripts, and interactive features, which impact performance scores.
The scores can also fluctuate by 5–10 points between test runs due to network conditions, server load, and third-party scripts.
So for more reliable results, run the test multiple times on the same page and use the average instead of relying on a single score.
Core Web Vitals
The Core Web Vitals are a set of metrics defined by Google to measure real-world user experience.
They are also a confirmed Google ranking factor so improving them helps with SEO and overall store performance.
In Shopify, Core Web Vitals data is available under Analytics → Reports, filtered by the Performance category.
The reports are based on real user interactions and visualized as graphs over time.
They also highlight key-events where changes occurred (like app installs, theme updates, or major releases.)
This helps when analyzing whether changes had a negative or positive impact.
Core Web Vitals Best Practises
The Core Web Vitals are made up of three key metrics LCP, INP, and CLS
Here' s what they mean and how they can be improved.
Largest Contentful Paint (LCP)
How long it takes for the largest visible element to load — For shopify stores that’s usually the hero banner on the homepage. Optimizing this section is crucial for good performance.
Some best practices include:
- Use static images instead of heavy slideshows.
- If you must use a slideshow build it directly into the theme instead of relying on app scripts.
- Avoid animated Gifs or large images, as they increase load time.
- The first hero image should not be lazy-loaded and should have the fetch priority set to “high”.
- The hero image doesn’t always need to be full-width; combining text with can also look great and reduce the size further..
Benchmark: A good LCP time is below 2.5 seconds — but faster is always better.
Cumulative Layout Shift (CLS)
CLS measures how much the page layout shifts while loading.
For example, if a user tries to click the “Add to Cart” button and other elements suddenly load, they might end up clicking the wrong button. This kind of layout shifting should be minimized. (How much does the page jump around)
Here we can use skeleton elements or placeholder images that reserve space before the actual content loads.This ensures the height and width are already set, so that content loads without sudden jumps.
Note: Only the largest layout shift counts in CLS results. If multiple shifts occur, the worst one determines the score. A CLS value below 0.1 is considered good.
Interaction to Next Paint (INP)
INP measures how quickly a page responds visually after a user interacts with something. Even if the intended action takes longer to complete, the user should see instant visual feedback (loading spinner for example)
Some ideas here can include:
- When a user opens an FAQ accordion or navigation menu, the icon should change instantly. This confirms the interaction and prevents repeated clicks.
- On an Add to Cart button, an immediate spinner or loading state signals that the action is being processed.
If you want to take this further, you can implement an optimistic UI. With this pattern, the interface updates immediately based on the expected result. For example, when a customer changes the cart quantity, the subtotal updates right away while the server request runs in the background. If the request later fails, the UI can be reverted. This approach is often used in hydrogen based stores, which makes them feel almost instant.
Key Areas for PageSpeed Optimizations
Image Optimization
Images are often the largest contributors to page weight on a Shopify store.
When they’re oversized or delivered incorrectly, they slow down the site, especially on mobile devices.
What Determines Image File Size
An image’s file size mainly comes down to two factors: dimensions and quality.
Image dimensions
Image dimensions are the actual width and height of an image, measured in pixels.
(for example 1200px wide and 800px tall.)
The key rule is simple: images should never be larger than they need to be on the screen. If you use a very large image in a small layout area, the browser still downloads the full file.
So serving correctly sized images for different devices can easily reduce image file sizes by 50–90%. (See section on serving images properly)
Image quality
Image quality is determined by how much visual detail an image retains, which mainly depends on the file format and compression level.
Higher compression reduces file size but can lower quality, while lower compression keeps images sharper but larger in size.
For example JPEG images are often up to 80–90% smaller than PNGs.
Shopify’s built in compression
As Shopify developers, a lot of this is already handled for us.
If we upload images properly, Shopify automatically converts them to WebP and serves them via its CDN.
The built-in compression works well in most cases, but it’s intentionally conservative to preserve image quality.
If you want to squeeze out a few extra bytes, you can apply more aggressive compression before uploading images. (but this should be done carefully to avoid visible quality loss.)
Serving images properly
Shopify image filters like image_url and image_tag control how images are sized, formatted, and delivered for the best performance.
The minimal best practice for rendering an image in a Shopify theme looks like this:
{{ section.settings.image | img_url : width:1500 | img_tag }}
The img_url filter ensures that, no matter how large the original image is, Shopify’s CDN only delivers an image with a maximum width of 1500px.
The height is automatically adjusted to preserve the correct aspect ratio.
The img_tag filter outputs a proper HTML <img> tag and automatically enables responsive image behavior.
This means Shopify generates a srcset behind the scenes so the browser can load the most appropriate image size for the user’s device.
<img src="//coding-with-jan-dev.myshopify.com/cdn/shop/files/985c0319-096e-42ad-a9e4-9aa2c13a6698.png?v=1764235493&width=1500"
alt="Barista pouring steamed milk into a cup"
srcset="//coding-with-jan-dev.myshopify.com/cdn/shop/files/985c0319-096e-42ad-a9e4-9aa2c13a6698.png?v=1764235493&width=352 352w,
//coding-with-jan-dev.myshopify.com/cdn/shop/files/985c0319-096e-42ad-a9e4-9aa2c13a6698.png?v=1764235493&width=832 832w,
//coding-with-jan-dev.myshopify.com/cdn/shop/files/985c0319-096e-42ad-a9e4-9aa2c13a6698.png?v=1764235493&width=1200 1200w,
//coding-with-jan-dev.myshopify.com/cdn/shop/files/985c0319-096e-42ad-a9e4-9aa2c13a6698.png?v=1764235493&width=1500 1500w"
width="1500" height="1000" loading="lazy">
If you need more control, you can customize how images are rendered by passing additional options to img_tag.
This lets you align image loading behavior with your layout and breakpoints.
{{ section.settings.image
| img_url : width:1500
| img_tag :
widths:”400, 600, 800, 1200, 1500”,
sizes:”(min-width:750px) 50vw, 100vw”,
loading:”lazy”,
fetch_priority="high"
}}
In this example, the image takes up 50% of the viewport width on desktop and 100% on mobile. The browser can then choose the best image size based on the actual layout instead of guessing.
The loading attribute controls when the image is loaded. loading="lazy" delays loading until the image is close to entering the viewport, which is ideal for images further down the page. For images at the very top, such as hero banners, loading="eager" is usually the better choice.
For the most important image on the page, you can also set fetch_priority="high". This tells the browser to prioritize loading that image earlier. Use this sparingly and only for key visuals like the hero image or the first product image on the page.
How to Audit Image Loading
To check whether images are loaded and optimized correctly, a few simple tools are enough.
Chrome dev tools
Open the Network tab, disable cache, and filter by Img. This shows you exactly which images load, their file sizes, and whether lazy loading works as you scroll.
You can also inspect images directly in the DOM. When hovering over an <img> element, Chrome shows the rendered size (how large the image appears) and the intrinsic size (the actual downloaded image). If the intrinsic size is much larger, the image is oversized and should be optimized.
As a rule of thumb, non-critical images should usually stay between 50 KB and 200 KB. Larger files should be reserved for key visuals like hero images or main product photos.
Google PageSpeed Insights
PageSpeed Insights highlights common image issues such as oversized images, missing modern formats, or images that should be lazy loaded, and gives clear recommendations on what to fix.
Assessing Installed Apps
Apps can have a major impact on Shopify store performance, so it’s important to review them carefully.
Not all apps affect performance in the same way:
Backend apps (such as invoicing, bookkeeping, fulfillment, or automation tools like Shopify Flow) run mainly in the admin and do not impact storefront performance.
Frontend apps (such as pop-ups, free shipping bars, live chat, widgets, and sliders) inject scripts into the storefront and can slow down loading and interactions.
Best Practices for Managing Shopify App Performance
- Even if an app is disabled, it may still inject scripts into the storefront and slow down page loading. If an app is no longer needed, uninstall it completely instead of just disabling it.
- Review app usage regularly. For example, if a live chat app is used by only a few customers per month, removing it can help improve performance.
- Features like slideshows, free shipping bars, and galleries usually load faster when built directly into the theme rather than relying on third-party apps and external scripts.
- Use the “Reduce unused JavaScript” section in Google PageSpeed Insights to identify heavy or unnecessary JavaScript files added by apps.
If you find scripts from apps that have already been uninstalled, search your theme files for leftover snippets and remove them to fully clean up the app.
When a script name is unclear, look for clues such as the app name or company name (for example, Shopify, Studio, or the app provider) to identify where the script comes from.
Code and Theme File Optimization
To improve Shopify store performance, it’s essential to optimize how your theme loads and executes JavaScript and other code files.
Small decisions at the theme level can have a big impact on loading time and interaction performance.
Using Theme Assets and Shopify's CDN:
Make sure all your theme’s JavaScript files are loaded from the assets folder. These files are hosted on Shopify’s CDN, which is optimized for performance. Relying on external script sources can be risky too, as you don’t control their performance or availability, and the page may break if the script is removed from the external source.
Avoiding Inline JavaScript in Section files:
If the same section is used multiple times on a page, this can result in duplicate script downloads. Instead, include scripts using a <script> tag from the assets folder. The browser then downloads them only once.
<script src="{{ 'product-info.js' | asset_url }}" defer="defer"> </script>
Inline scripts also cannot be deferred, meaning they execute immediately and can block page rendering.
Deferred scripts, on the other hand, are downloaded in parallel and executed after the page loads.
Render-blocking scripts often appear in the “Render Blocking Resources” section in the PageSpeed Insights report.
Minification of JavaScript:
Minification removes unnecessary characters like spaces and line breaks to reduce file size.
Shopify automatically minifies CSS and JavaScript in production.
This may not be visible in local development previews, but once the theme is live, you can verify it by inspecting the page and opening any JavaScript file to see the minified version.
Liquid Code
To monitor the execution time of Liquid code, you can use the Shopify Theme Inspector Chrome extension.
If you have collaborator access to a store, installing this extension adds a new “Shopify” tab inside Chrome DevTools, where you can analyze Liquid rendering performance.
When a page contains complex or heavy Liquid logic, the server takes longer to generate the HTML response.
You can observe this in the Chrome Dev Tools by opening the Network tab, filtering by Doc, and disabling cache.
In such cases, you’ll notice that the document takes tonger to load / because the waiting for the server response takes a lot longer.
This is a good indicator that your Liquid code needs optimization.
Shopify may cache parts of the page, which is why the page often loads faster on subsequent visits.
Conclusion
Shopify page speed optimization is complex. I hope this guide sparks some good ideas.
If you want to see the concepts from this guide applied in a real Shopify theme, check out the Academy videos where we walk through the optimizations step by step.
And if you want to go further and learn how to turn these technical skills into paid work request more info onthe Shopify Developer Bootcamp. It's designed to teach both, the technical side but also how to market yourself as a developer.
