Mobile LCP unstable on product page (Online Store 2.0 – product-media.liquid tuning didn’t help)

Store Design
1

Hello Shopify team :waving_hand:,

Store: https://khalegishop.shop

**Tested page:**Energy Saving Device – Product Page
Theme: Online Store 2.0 (customized)

I’m facing unstable LCP results on mobile — fluctuating between 4.7s and 11s on PageSpeed Insights (Desktop is stable).

:white_check_mark: What I already did

  1. Preloaded the featured product image in theme.liquid using fetchpriority="high".

  2. Reduced srcset widths and set responsive sizes to (min-width: 750px) 50vw, 100vw.

  3. Set first product image to loading="eager" + fetchpriority="high", all others to lazy/auto.

  4. All images are WebP and compressed.

:puzzle_piece: Code references

theme.liquid (inside <head>)

{% if request.page_type == ‘product’ and product.featured_image %}

{% endif %}

product-media.liquid

{% if media.media_type == ‘image’ %}
{% if forloop.first %}
{% assign loading_type = ‘eager’ %}
{% assign fetch_priority = ‘high’ %}
{% else %}
{% assign loading_type = ‘lazy’ %}
{% assign fetch_priority = ‘auto’ %}
{% endif %}
<img
class=“global-media-settings{% if variant_image %} product__media-item–variant{% endif %}”
loading=“{{ loading_type }}”
fetchpriority=“{{ fetch_priority }}”
decoding=“async”
srcset=“{{ media.preview_image | image_url: width: 550 }} 550w,
{{ media.preview_image | image_url: width: 800 }} 800w,
{{ media.preview_image | image_url: width: 1100 }} 1100w”
sizes=“(min-width: 750px) 50vw, 100vw”
src=“{{ media.preview_image | image_url: width: 700 }}”
alt=“{{ media.alt | escape }}”
width=“700”
height=“{{ 700 | divided_by: media.preview_image.aspect_ratio | ceil }}”
data-media-id=“{{ media.id }}”

{% endif %}

:red_question_mark:Questions

  1. Is there anything else in product-media.liquid or layout/theme-scripts that can delay LCP on mobile?

  2. What’s the recommended way to reserve space or use a skeleton for the hero product image to stabilize LCP?

  3. Any theme-level JS known to delay image rendering that should be deferred or moved?

Thanks in advance for any help or reference! :folded_hands:

I’m testing mainly from Kuwait region, and most of my mobile users are on Safari (iOS) and Chrome (Android) — both in Arabic (RTL) layout.
The LCP instability appears more visible on Safari mobile, even when metrics seem okay on desktop.

If there are known differences in LCP handling for RTL or Arabic fonts (like Cairo), please let me know — that might be an important clue for markets using right-to-left languages.