---
title: Mark the LCP image with fetchpriority="high"
description: >-
  Apply `fetchpriority="high"` to the LCP image to signal its importance and
  allow the browser to begin downloading it sooner than other images.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/themes/best-practices/performance/set-fetchpriority-high-on-lcp-image
  md: >-
    https://shopify.dev/docs/storefronts/themes/best-practices/performance/set-fetchpriority-high-on-lcp-image.md
api_name: liquid
---

# Mark the LCP image with fetchpriority="high"

Apply `fetchpriority="high"` to the LCP image to signal its importance to the browser and allow it to be downloaded sooner than other images.

***

## Why

By default, all images are discovered with a Low priority. After the initial HTML is parsed and layout is complete, the browser discovers which images are in the viewport and upgrades their priority to High. This creates a delay between when the browser could start downloading a critical image and when it actually does. Using `fetchpriority="high"` eliminates that delay for the LCP image.

***

## How

Use `fetchpriority="high"` on the LCP image only, one per page. Combine it with `loading="eager"` or no `loading` attribute. Never use it with `loading="lazy"`. Requirements:

* You must be certain it's the LCP element.
* It must be visible in the initial viewport.
* It should be the hero image or the main product image.
* The first section is preferred ([`section.index`](https://shopify.dev/docs/api/liquid/objects/section#section-index) == 1). `section.index` is `nil` in the theme editor, in static sections, and in Section Rendering API responses, so write the lazy branch as a positive `section.index > N` test and let `nil` fall through to the eager branch. See [Use `section.index` for position-aware loading](https://shopify.dev/docs/storefronts/themes/best-practices/performance/use-section-index).

**Caution:**

Overusing `fetchpriority="high"` can degrade performance by interfering with the browser's own prioritization heuristics. Use it only when you have specific knowledge about an element's importance that the browser doesn't have yet.

***

## Examples

Complete pattern for handling image loading based on section position:

```liquid
{% if section.index == 1 %}
  {%- comment -%} First section: highest priority {%- endcomment -%}
  {{ product.featured_image
    | image_url: width: 1000
    | image_tag:
        loading: 'eager',
        fetchpriority: 'high',
        widths: '400, 600, 800, 1000',
        sizes: '(min-width: 1000px) 900px, calc(100vw - 2rem)'
  }}
{% elsif section.index > 3 %}
  {%- comment -%} Fourth section and later: lazy load {%- endcomment -%}
  {{ product.featured_image
    | image_url: width: 1000
    | image_tag:
        loading: 'lazy',
        widths: '400, 600, 800, 1000',
        sizes: '(min-width: 1000px) 900px, calc(100vw - 2rem)'
  }}
{% else %}
  {%- comment -%} Second and third sections, and any context where section.index is nil: eager, normal priority {%- endcomment -%}
  {{ product.featured_image
    | image_url: width: 1000
    | image_tag:
        loading: 'eager',
        widths: '400, 600, 800, 1000',
        sizes: '(min-width: 1000px) 900px, calc(100vw - 2rem)'
  }}
{% endif %}
```

***

## Testing

* Use **Performance** > **Insights** to identify the LCP element and its resource load delay.
* Check the **Network** panel waterfall to see when the LCP image starts downloading. Enable the **Priority** column to verify the priority is High.
* Compare with and without the attribute to measure improvement.

***

## References

* [`image_tag`](https://shopify.dev/docs/api/liquid/filters/image_tag) filter with `fetchpriority` parameter
* [`image_url`](https://shopify.dev/docs/api/liquid/filters/image_url) filter
* [`product.featured_image`](https://shopify.dev/docs/api/liquid/objects/product#product-featured_image)
* [`section.index`](https://shopify.dev/docs/api/liquid/objects/section#section-index)
* [`if`](https://shopify.dev/docs/api/liquid/tags/if) / [`elsif`](https://shopify.dev/docs/api/liquid/tags/if#if-elsif) tags
* [The `fetchpriority` attribute in the HTML Standard](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-fetchpriority)
* [`fetchPriority` on MDN](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/fetchPriority)
* [Never lazy-load the LCP image](https://shopify.dev/docs/storefronts/themes/best-practices/performance/never-lazy-load-lcp-image)
* [Prevent image layout shift](https://shopify.dev/docs/storefronts/themes/best-practices/performance/prevent-image-layout-shift)
* [Use `section.index` for position-aware loading](https://shopify.dev/docs/storefronts/themes/best-practices/performance/use-section-index)

***