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

Store Design

Topic summary

A Shopify store owner is experiencing unstable mobile LCP (Largest Contentful Paint) scores on product pages, fluctuating between 4.7s and 11s on PageSpeed Insights, while desktop performance remains stable.

Optimizations already implemented:

  • Preloaded featured product image with fetchpriority="high" in theme.liquid
  • Reduced srcset widths and configured responsive sizes
  • Set first product image to eager loading with high fetch priority, others to lazy
  • Converted all images to compressed WebP format

Key technical context:

  • Store: khalegishop.shop
  • Theme: Customized Online Store 2.0
  • Primary testing region: Kuwait
  • Target audience: Mobile users on Safari (iOS) and Chrome (Android)
  • Layout: Arabic (RTL)

Questions raised:

  1. Are there additional optimizations needed in product-media.liquid or theme scripts that could be delaying mobile LCP?
  2. What’s the recommended approach for reserving space or implementing skeleton loaders for hero product images?
  3. Should any theme-level JavaScript be deferred or repositioned?

Additional concern: The issue appears more pronounced on Safari mobile, and the user suspects potential RTL layout or Arabic font (Cairo) rendering differences may contribute to LCP instability.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
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.

1 Like
2

Hi @user2634 :waving_hand:,

You’re actually doing a great job already, the way you preload and prioritize your featured product image is exactly what Google recommends for improving LCP.

A few quick notes from experience:

  1. Your preload setup looks good.

Using fetchpriority=“high” and loading=“eager” for the first product image is the right move. Make sure that preload line in theme.liquid points to the exact featured image URL (sometimes a dynamic variable can preload a different size than expected).

  1. Don’t rely too much on PageSpeed’s lab results.

The PageSpeed Insights “lab test” (especially on mobile) often gives unstable LCP scores — it runs on Google’s own emulated server environment, not real user data.
To get a more accurate and stable metric, use Shopify’s Real User Monitoring (RUM)

:backhand_index_pointing_right: Check some of our articles on this topic:

So overall, your setup is on the right track — it’s just that lab scores can fluctuate. Checking your real-user data (RUM) will show a clearer picture of how your visitors actually experience your site.

Hope this helps!
— Sophia from the Tapita AI SEO & Speed team

3

Hii, @user2634
I understand how annoying it is to deal with fluctuating LCP scores, especially when you’ve already done a lot of work to optimize your images. You’re on the right track, but you’re seeing inconsistent LCP results, particularly on mobile devices using Safari, where your LCP fluctuates between 4.7s to 11s. This can be tricky, but it’s often caused by several factors such as image load order, JavaScript blocking, or specific mobile/browser rendering issues especially with RTL languages and fonts like Cairo.What You’ve Already Done is good but you can do few things like:

Check Preloading and Lazy Loading
Only preload critical images You’re already using fetchpriority=“high”, but try to limit the preloaded images to those that appear above the fold. If you’re preloading too many images, it can actually delay other elements.
Fine Tune Lazy Loading Ensure that non-essential images are lazy-loaded but avoid lazy-loading the hero image above-the-fold on mobile.

Stabilize LCP with a Skeleton Loader
A skeleton loader or a placeholder image can help stabilize the LCP. It essentially reserves space for your main image, so when it loads, there’s no layout shift, which helps the page appear faster to the user. You could create a simple placeholder box that matches the aspect ratio of your image.

Optimize JavaScript & CSS
Defer non-essential JS Make sure non-essential scripts are deferred or loaded asynchronously. This prevents JS from blocking the rendering of your images and text.
Remove render-blocking CSS/JS Review the theme’s custom scripts. Some themes load a lot of unnecessary CSS/JS which can be deferred until after the page content loads.

Testing in Safari Mobile
Since you’re seeing issues primarily in Safari, test in Safari’s developer tools to check if fonts or certain layout shifts are causing the delay. Safari is known to behave differently with fonts, especially in RTL languages, so consider using font-display: swap for custom fonts like Cairo to speed up text rendering.

Third-Party Apps:
Some third-party apps, while helpful, can add extra load time with their scripts and styles. If you haven’t already, try temporarily disabling non-essential apps to see if they’re adding unnecessary load time.
To really dive deep into optimizing your site’s speed, I recommend using Website Speedy App. It’s a tool that helps with real-time performance monitoring, image optimization, and ensuring fast load times across devices and browsers. It could give you a more holistic approach to optimizing both mobile and desktop versions without compromising the quality of your images or design.