Skip to main content

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.

Anchor to WhyWhy

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.

Anchor to HowHow

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 == 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.
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.

Anchor to ExamplesExamples

Complete pattern for handling image loading based on section position:

{% 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 %}

Anchor to TestingTesting

  • 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.

Anchor to ReferencesReferences

Was this page helpful?