Shopify LCP: How to Improve Your Store’s Loading Speed

Shopify LCP is one of the metrics that best explains whether a store actually feels fast. It does not measure how long absolutely everything takes to finish loading, but how long the browser needs to display the largest visual content element within the initial viewport. On a homepage, this may be a hero section; on a collection page, an image or text block; and on a product page, it is often the main product image. If that content takes too long to appear, users perceive the store as slow even if other elements are already visible.

In ecommerce, that perception matters because speed forms part of the shopping experience. A store can have a strong value proposition, well-targeted campaigns and a convincing product page, but still lose efficiency if every visit begins with several seconds of waiting. That is why optimising LCP should not be approached as a race to achieve a perfect PageSpeed Insights score. The goal is to identify what is delaying the main content and fix it without breaking design, tracking, functionality or conversion.

What is Largest Contentful Paint and what does it actually measure?

Largest Contentful Paint, or LCP, measures the moment when the largest content element visible within the initial viewport is rendered. Google considers the experience good when LCP occurs in 2.5 seconds or less for at least 75% of visits. Between 2.5 and 4 seconds there is room for improvement; above 4 seconds performance is considered poor.

The key word is “visible”. LCP does not wait for products several screens below to load or for every marketing script to finish. It analyses the part users see when they first arrive. That is why an oversized hero image, a main image loaded with low priority or a visual block that depends on JavaScript can determine the entire metric.

Why LCP matters in a Shopify store

Speed affects three areas that are closely connected in ecommerce: user experience, conversion and organic visibility. Google uses Core Web Vitals within its ranking systems related to page experience, while also making it clear that strong technical performance does not replace content relevance. In other words, improving LCP can strengthen a good page, but it will not make an irrelevant page rank.

That is why at E-MPACT we approach Shopify speed optimisation as part of the wider growth system rather than as a cosmetic adjustment. Performance needs to work alongside CRO, design, measurement and commercial functionality.

What LCP value should a Shopify store have?

The threshold is the same for Shopify as for any other website because the metric is calculated in the browser. What changes is where you should look for the causes. Shopify already provides managed infrastructure, a CDN and platform-level optimisations. In many stores, the biggest opportunities lie in the theme, images, Liquid code, apps, marketing tags and the order in which resources are requested.

How to identify the LCP element on a page

Before changing code, you need to identify which element is determining LCP. PageSpeed Insights and Lighthouse show the element detected during the test and allow you to see whether it is an image, heading, banner or another eligible block. Chrome DevTools can also analyse loading in greater detail and help you inspect the network waterfall.

In Shopify, it is worth repeating this check across several templates. The homepage may have a banner as its LCP; a collection may depend on the heading or first image; and a PDP may have the main product image. Optimising only the homepage and assuming the problem is solved leaves out the pages where most purchase intent may actually occur.

The four parts that explain a slow LCP

Breaking LCP down into stages helps avoid optimising blindly. In practical terms, the total time can be understood as the sum of four components: TTFB, resource discovery delay, download duration and render delay. Each one points towards different problems.

1. Time to First Byte

If the initial HTML takes too long to arrive, everything starts late. In Shopify, a high TTFB may be related to complex Liquid templates, nested loops, unnecessary server-side processing or certain dependencies. It should not automatically be blamed first, but it does need to be reviewed when the initial response already consumes a significant proportion of the 2.5-second budget.

2. Delay in discovering the main resource

The browser cannot download an image it does not yet know exists. A hero defined as a background-image, an image inserted later through JavaScript or a resource hidden behind a carousel may be discovered too late. This issue can have a major impact because it creates a delay before the download even begins.

3. Download duration

Once the resource has been discovered, its file size, dimensions, format, connection and server determine how long the transfer takes. Downloading a very large desktop image on mobile wastes bandwidth. This is where responsive images, srcset, sizes and correct use of Shopify’s image tools become important.

4. Delay before the element is painted

A file can already be downloaded and still not appear. Entrance animations, an initial opacity of zero, heavy JavaScript, render-blocking CSS or carousel logic can delay the moment the element is actually rendered. Diagnosis should therefore check both when the download finishes and when the browser paints the element.

The most common mistake: applying lazy loading to the main image

Lazy loading is useful for images below the initial viewport because it prevents the browser from downloading resources the user does not yet need. The problem appears when the theme applies loading="lazy" indiscriminately and it ends up affecting the image responsible for LCP.

Shopify explicitly recommends not applying lazy loading to the LCP element. If an image is visible immediately and is known to be the main resource, it should load eagerly or without the loading attribute. The goal is to allow the browser to request it as early as possible.

{ section.settings.image

  | image_url: width: 1800

  | image_tag:

    widths: '480, 750, 1100, 1500, 1800',

    sizes: '100vw',

    loading: 'eager',

    fetchpriority: 'high',

    alt: section.settings.image.alt

}

Prioritise the LCP image with fetchpriority

When the browser encounters several images, it may not immediately know which one is most important. The fetchpriority="high" attribute can indicate that a resource visible in the initial viewport deserves priority. Shopify recommends using it for the LCP image when that image has been correctly identified.

Avoid background-image for the main hero

Using a CSS background image can be convenient for certain designs, but it is a poor choice when that image is the main visual content. The browser must first download and process the CSS before it discovers the image URL. That chain delays the start of the download.

When the hero represents the LCP, it is preferable to use an <img> or <picture> element. This allows the browser’s preload scanner to detect the resource during the initial HTML parsing. It also makes it easier to apply fetchpriority, responsive images, dimensions and alternative text.

Serve images at the size each device actually needs

Compressing an image is not enough if you continue serving a resolution that is far larger than necessary. A mobile device that is 390 pixels wide does not need to download the same file as a large desktop screen if the design does not require it. Shopify can generate different image sizes through image_url and image_tag, while the browser can choose the most appropriate one using srcset and sizes.

If mobile and desktop need different creative assets, a properly configured <picture> element is preferable to loading two images and hiding one with CSS. Hiding a resource visually does not necessarily prevent the browser from downloading it.

Review animations, sliders and transitions

An animation may improve the visual experience while worsening the metric if it delays the appearance of the main content. A common pattern is to load an image with opacity: 0 and reveal it later with a transition. Even when the file is available, the browser does not consider it visible until it has been painted.

Sliders also add complexity. They may load several large images, execute JavaScript before displaying the first slide and delay the content users should see immediately. If the carousel cannot demonstrate business value, simplifying the hero often delivers more value than trying to optimise an unnecessary interaction.

This approach connects performance with CRO for Shopify: the goal is not to remove elements simply for speed, but to require every component to justify its visual, technical and commercial cost.

Reduce JavaScript that blocks the main content

Shopify allows stores to be extended with apps, custom scripts, pixels, personalisation tools, chat, reviews, search, recommendations and analytics platforms. Problems appear when too many layers compete during the first seconds of loading.

JavaScript can affect LCP in several ways: occupying the main thread, inserting content late, triggering additional requests or delaying classes and styles required to show the element. Essential functionality that can be rendered with Liquid and HTML should be available in the initial response whenever possible.

Optimise Liquid when the problem starts before the browser

Liquid performance affects how long Shopify takes to generate the HTML response. Deeply nested loops, unnecessary iterations over products or variants and certain repeated queries can increase server processing time. When TTFB is high, working only on images does not address the underlying cause.

Shopify Theme Inspector helps identify Liquid lines and blocks that consume more processing time. The review should focus on the code that genuinely affects the template, avoiding micro-optimisations that barely change the result. A clean Shopify development project should aim for an editable foundation prepared to evolve while also controlling the rendering cost of each decision.

CSS, fonts and resources competing with LCP

The browser needs styles to paint a page correctly. If critical CSS arrives late or there is a large amount of render-blocking code, the main element may be forced to wait. The same can happen with web fonts when a large text block becomes the LCP.

It is worth reducing unused CSS, separating responsibilities where appropriate and avoiding loading complete stylesheets for functionality that is not present on the current template. For fonts, limiting families and weights, using font-display appropriately and prioritising only the required files reduces competition during the initial load.

Preload should also be used carefully. Preloading too many resources forces priorities that can compete with the browser’s own decision-making. In performance work, more instructions do not automatically mean more speed.

Apps and third parties: measure before removing

A real ecommerce store needs external tools. The goal is not to pursue a Shopify store with no JavaScript, but to understand the cost of each layer and the value it returns. Reviews, personalisation, advanced search or automation may be essential for selling. Other apps remain installed after old campaigns or duplicate functionality that already exists.

An audit should answer four questions: what does the app load, where does it load it, when does it execute and what impact does it have on the business? If a tool introduces scripts on every page even though it is only used on product pages, there is room for improvement. If two tracking solutions do the same thing, there may also be duplication. And if a feature can be solved with lightweight code inside the theme, reducing dependencies may make sense.

How to diagnose Shopify LCP step by step

PageSpeed Insights is not the only data you should look at

PageSpeed Insights is useful for identifying opportunities, but a serious audit should not be reduced to chasing a score. Two runs can vary because of network conditions, server load or simulated environments. A high score also does not guarantee that every template performs well for real users.

Mistakes that often make LCP worse after optimisation

• Preloading too many files: they all compete for bandwidth and dilute the real priority.
• Applying fetchpriority high to several images: if everything is a priority, nothing really is.
• Removing apps without measuring: it may improve a technical test while damaging conversion or experience.
• Hiding content with CSS: the resource may still be downloaded even when it is not visible.
• Optimising only the homepage: collections and PDPs may have completely different problems.
• Looking only at image weight: the delay may come from discovery or rendering instead.
• Chasing a 100 Lighthouse score: this can divert resources away from changes with a greater impact on revenue.

Performance and conversion should be optimised together

A fast store with poor persuasion will not magically convert. And a visually impressive store that makes users wait will not make the most of its traffic either. Useful optimisation lies in balancing commercial clarity, design, functionality and performance.

When an improvement involves changing a hero section, removing a slider or delaying a widget, the decision should be based on data. It may make sense to keep a heavy resource if it generates enough value, but then the way it is delivered needs to be optimised. In other cases, removing complexity improves both speed and comprehension.

This is the same approach we use when analysing how to sell more online without relying only on more traffic: growth appears when acquisition, experience, conversion and operations work as one system.

When a specific technical optimisation is worthwhile

A dedicated intervention makes sense when real-user data shows moderate or poor LCP, when mobile represents most traffic, when campaigns send users to heavy landing pages or when the theme has accumulated apps and code over several years. It is also advisable after a redesign, migration or major changes to the visual header.

For new stores, the best time to work on performance is before technical debt appears. For mature stores, prioritisation is usually more profitable: address the highest-impact bottlenecks first, then structural optimisations and finally smaller details. Our Growth Service for Shopify follows precisely this logic of auditing, implementing, measuring and iterating.

If you are comparing platforms, it is also worth avoiding simplistic conclusions. Shopify provides stable infrastructure, but a poorly built theme can still be slow. In our Shopify vs WooCommerce comparison, we explain why the platform matters while technical discipline and architecture remain decisive.

Checklist for improving LCP without breaking the store

• Identify the LCP element on every priority template.
• Confirm field data before drawing conclusions from a single test.
• Avoid loading="lazy" on the main visible image.
• Use fetchpriority="high" only when the critical resource is clearly identified.
• Prefer <img> or <picture> over CSS backgrounds for LCP content.
• Serve responsive images at appropriate sizes.
• Review whether animations or sliders delay visibility.
• Analyse JavaScript from the theme, apps and third parties.
• Review Liquid if TTFB is high.
• Control CSS, fonts and render-blocking resources.
• Validate changes on mobile and desktop.
• Compare before and after using the same URLs and conditions.
• Monitor performance after installing apps or launching new campaigns.

Frequently asked questions about LCP in Shopify

What does LCP mean in Shopify?

LCP stands for Largest Contentful Paint and measures how long it takes for the largest content element visible in the initial viewport to appear. In Shopify, this is often a hero image, the main product image or a prominent text block.

What is a good LCP for a Shopify store?

The recommended target is an LCP of 2.5 seconds or less for at least 75% of visits. Between 2.5 and 4 seconds needs improvement, while anything above 4 seconds is considered poor.

Is Shopify slow by default?

No. Shopify provides managed infrastructure, a CDN and platform-level optimisations. Final performance depends heavily on the theme, images, apps, scripts, Liquid code and third-party resources added to each store.

Can apps make LCP worse?

Yes. Some apps load JavaScript, CSS or additional requests that compete during the initial render. Their impact depends on how and where their resources load, so it is worth measuring before deciding whether an app should be removed or deferred.

Should I use lazy loading on every image?

No. Lazy loading is useful for images outside the initial viewport, but it should not be applied to the image responsible for LCP. The main resource needs to be discovered and downloaded early.

Does fetchpriority="high" always improve LCP?

It can help when applied to the correct LCP resource that is visible from the start. It should not be used indiscriminately across several images because this can create competition between resources the browser is trying to prioritise.

Is PageSpeed Insights enough to measure the problem?

It is a useful diagnostic tool, but it should be combined with real-user data, Search Console, Shopify performance reports and browser tools. Laboratory data helps explain causes; field data shows what the audience actually experiences.

Does improving LCP guarantee better Google rankings?

No. Core Web Vitals form part of signals related to page experience, but Google uses many systems and relevance remains essential. Improving LCP helps provide a better experience and strengthens a solid SEO foundation, but it does not replace content quality or authority.