# How should a Shopify theme load its largest image?

Source: https://themestackguide.com/shopify-theme-lcp-image-loading/

Load the largest image in the initial viewport eagerly, mark it with high fetch priority, keep its dimensions in the markup, and do not hide it behind a reveal animation.

## Start with the likely cause

Use the gap between TTFB, FCP, LCP, CLS, and INP to narrow the problem before changing code. Keep the template, device, and network conditions consistent.

## Change one thing on a theme copy

Isolate the suspected image, Liquid, CSS, JavaScript, app, or extension cost. A single controlled change makes the result easier to interpret and reverse.

## Verify the whole journey

Repeat the measurement, then test navigation, product selection, cart updates, and checkout handoff. A faster metric is not a win if the storefront task breaks.

## Source

[Shopify developer documentation](https://shopify.dev/docs/storefronts/themes/best-practices/performance), accessed September 21, 2026.

## Frequently asked questions

**What should be measured?**
:   Use the metric tied to the suspected cause, then verify the complete task.

**Where should the change be tested?**
:   On a theme copy with repeated conditions.

**When is the work complete?**
:   After the live journey and the repeated measurement pass.