Improving Core Web Vitals on Shopify (2026)

Poor Core Web Vitals scores on Shopify can negatively affect the user experience – even a 0.1-second delay in loading time can cost you sales. But for most Shopify merchants, the technical language on PageSpeed Insights can seem overwhelming.

However, not all optimization tasks require a developer if you know what steps to take. You can optimize images, remove redundant apps, minify files, or perform other optimization steps yourself.

Keep reading to learn the clear steps on how to optimize Core Web Vitals on your Shopify store. 

Improve Core Web Vitals without touching code

Compress and optimize images

Manage third-party scripts

Try TinyIMG

What are Core Web Vitals?

Core Web Vitals (CWV) are a set of metrics developed by Google that measure the key areas of the user experience on a website, including the page load time, interactivity, and visual stability.

The three main Core Web Vitals metrics are:

• Largest Contentful Paint (LCP) – a metric that measures the perceived page load time or how long it takes for the main content to load. Shopify stores should strive for an LCP under 2.5 seconds.
• Interaction to Next Paint (INP) – a metric that monitors the responsiveness of your page to user interactions. Merchants should strive for a score of 200 milliseconds or less.
• Cumulative Layout Shift (CLS) – a metric that measures visual stability or the layout shifts that happen unexpectedly. A good score is considered below 0.1.

You can monitor Core Web Vitals in the Online Store section of your Shopify Admin. Just click on the metric you want to track and you’ll find the detailed scores over 30 days.

Alternatively, to get detailed insights into the performance metrics, enter your site’s URL into PageSpeed Insights.

Why are Core Web Vitals important for Shopify?

Core Web Vitals are important for Shopify stores because they were developed to help site owners understand what real users experience on their site. The better the scores, the better the shopping experience your site visitors can expect.

If your pages load fast, users are also likely to spend more time on your page, reducing the bounce rates. For example, a report by Deloitte found that even a 0.1-second improvement in page load time reduced the bounce rates by 5.55% and improved the conversion rates by 9.25% on average.

Also, page speed is considered a ranking factor by Google on both desktop and mobile devices. So, when you optimize Core Web Vitals, it can also influence your position in the Search Engine Results Page (SERP) in the long run.

What optimizations Shopify already uses

Shopify takes care of hosting for you, so it applies the same performance optimization practices to all merchants. Here are the features it uses to keep Core Web Vitals results great:

• Servers. Shopify takes care of server maintenance for you, including its performance, so all stores can ensure great performance. Plus, none of the plans limit bandwidth.
• Browser caching. Shopify uses browser caching, saving cached copies of your pages for a year so they load faster for returning visitors.
• Content Delivery Network (CDN). All Shopify stores get a CDN powered by Cloudflare. It stores cached copies of your website on multiple servers and loads the version that’s closest to the visitor’s location, helping ensure better loading times.

How to optimize Core Web Vitals for Shopify stores?

When you run your pages through Core Web Vitals, you’re likely seeing similar issues on most of them. We find that for many Shopify stores, the main issues are heavy JavaScript and unoptimized images, but that’s not all.

Let’s review the most common Core Web Vitals insights and how to fix them.

Optimize images

Images often take up a large portion of the total page weight, which impacts the loading speed (LCP) and layout shifts (CLS). When auditing Shopify stores, we’ve noticed that oftentimes, PageSpeed Insights shows “Improve image delivery” in the insight section. It shows the estimated savings if images are optimized to a proper size.

But unoptimized images can cause multiple errors on PageSpeed Insights. For example, you may also get the “Avoid enormous network payloads” error, which affects the LCP, or “Layout shift culprits,” which affects CLS.

All of these errors can be fixed by applying common image optimization practices, including:

• Image compression – a technique used to reduce the file size by removing redundant image data without visibly affecting image quality. For example, we found that the automatic image compression feature by TinyIMG can compress images by up to 98%.
• Image resizing – if your images, including hero or background images, are too large, it can negatively impact your page load times and the LCP score. I suggest following the best Shopify image size recommendations to understand what exact sizes you should use.
• Image dimension setting – make sure all of your images have proper dimensions set to prevent a poor CLS score. It should look something like this: <img src="example.jpg" width="800" height="500" alt="">.
• WebP format – we highly recommend using the WebP format whenever possible. It’s around 25-34% smaller than JPG or PNG files at a similar quality. According to a study by Backlinko, 44.6% of analyzed pages with a low LCP score didn’t use next-gen image formats.

Enable lazy loading

Lazy loading is a method where the webpage delays loading non-essential resources, such as below-the-fold images or videos, until the user needs them. It helps improve the initial page load time because only the crucial elements are loaded instead of everything at once.

If PageSpeed Insights requests to “Improve image delivery,” you should also apply lazy loading to these images.

Under “LCP request discovery” insight in PageSpeed Insights, you may see a tip to avoid lazy loading.

It only applies to above-the-fold hero images, which are essential to load first. If you don’t use lazy loading, you’ll see an error “lazy load not applied” in PageSpeed Insights.

For other images, lazy loading is a great way to speed up page load time on Shopify. Here’s how you can apply it:

1. Open Shopify Admin and locate the image you want to add lazy loading to. For example, open a blog post and click “Edit HTML” to access the code.
2. Find the <img> tag. It should look something like this:

   <img alour image description" 

   src="https://cdn.shopify.com/s/files/this-should-be-your-image-url.jpg">t="Y

3. Replace the inside of the <img> tag with code like this:

   <img src="https://cdn.shopify.com/s/files/this-should-be-your-image-url.jpg"

   loading="lazy" 

   width="800" 

   height="500" 

   alt="Your image description">

4. Click Save.

Delete unnecessary apps

Each app that you install from the Shopify App Store adds scripts to your store. When apps accumulate, the weight adds up on your website, causing slow loading.

Shopify apps are essential for many stores, but we recommend limiting the count to 5-7 at most. If you have more than that, review if all apps are necessary and consider trying out all-in-one apps for different areas to improve performance and save money.

Deleting redundant apps helps reduce JavaScript execution time and minimize main-threat work, improving the LCP score. If you see these issues on PageSpeed Insights, it’s a sign that your store may be loading too many scripts.

Removing apps from Shopify is easy. All you have to do is open Shopify and go to Settings > Apps > More (three dots) > Uninstall.

From our experience, we found that some apps leave some code even after uninstallation. If you find leftover code in the theme.liquid file, contact the app’s support for help.

Manage third-party scripts

Third-party scripts are anything that’s loaded from external sources, like third-party apps. They’re needed for the tools on your store to function, but they can also be optimized to improve page load time.

If your pages have too many third-party scripts loading, optimizing them can help minimize main-thread work or reduce issues with JavaScript execution time.

We highly suggest you leave third-party script management to developers if you don’t know how to code. Alternatively, you can use apps that automate script management without coding.

Optimize your theme

Optimizing Core Web Vitals includes taking a look at how well your Shopify theme is optimized. When customizing your store, always consider whether using additional sections, custom fonts, or large images will compensate for the slower performance.

Here are the best practices to keep in mind:

• Use a fast theme. Make sure you use a fast theme that’s optimized for performance. Themes on the Shopify Theme store go through performance tests before being approved, so they’re already fast. But if you’re using a third-party theme, make sure it isn’t causing speed issues.
• Use system fonts. Oftentimes, layout shifts (CLS) can be caused by heavy fonts, resulting in issues like “Layout shift culprits.” Consider using system fonts to fix it, which you can change by customizing typography in your theme settings.
• Optimize hero images. If you’re using large hero images or sliders, try reducing them to help improve LCP.
• Optimize sections. Make sure you don’t overuse additional sections in your page templates. The more sections the page has, the slower the LCP and INP scores can become.
• Use pagination. If your store has hundreds of products, make sure you use pagination to limit how many products load at the same time.

Minify CSS/JS

Minification is the process of removing unnecessary characters from code, like developer comments, spaces, or line breaks, that don’t affect its functionality. It helps reduce the file size of CSS, JavaScript, or HTML files so they can load faster.

On PageSpeed Insights, you may see guidelines to reduce unused JavaScript or minify CSS. Such issues call for file minification.

To minify files, you can use any free online minifier. We found that Toptal and Minifier.org do a great job at reducing the file size. All you have to do is paste the code, choose the coding language, and click Minify.

We notice that beginner merchants often struggle with online minifiers and don’t feel confident editing code files. In such cases, we suggest using a Shopify app for minification, so it automatically minifies all files without you having to re-upload them to your store.

Audit your Google Tag Manager

If you’re using Google Tag Manager, regularly audit the tags you’ve added. Tags that fire on every page when it’s not necessary or duplicate tags can accumulate over time and reduce your Shopify site’s LCP.

I highly recommend looking through the best tag manager practices so you optimize it only for the essential scripts to load.

How TinyIMG can help improve Shopify Core Web Vitals?

TinyIMG is a Shopify SEO and speed optimization app that makes complex tasks simple, even for beginner users. Here are the main features you get for improving Core Web Vitals:

• Image optimization. Compress JPG and PNG images by up to 98% of their initial file size or set up automatic resizing for oversized images to improve LCP and CLS scores.
• One-click lazy loading. You can set up lazy loading without touching a single line of code – TinyIMG gives you a one-click solution to easily improve LCP.
• Asset preloading. Turn on asset preloading in one click to ensure that critical resources, like images or scripts, start downloading immediately, helping optimize the LCP score.
• Third-party script management. With TinyIMG, you can easily toggle on which pages you want specific scripts to load.
• CSS and JavaScript minification. Minify CSS or JavaScript files on Shopify with a single click to improve page load times.

×

About the author

Kristina Jaruseviciute

Kristina is a Content Lead at TinyIMG responsible for informing and educating readers on all things Shopify-related. She covers a broad range of topics around SEO, AI visibility, website performance, and conversion rates to help merchants stand out in a competitive landscape.