Render Delay randomly slowing Largest Contentful Paint on mobile

[MovingImages]

My website has large variations in Largest Contentful Paint render delays for mobile.

Sometimes there's very little render delay and the Pagespeed performance scores well. Other times there is a very high render delay on the Largest Contentful Paint. I have implemented {preload: true} in the image-banner.liquid to prevent lazy loading on desktop - is there anything like that might help for mobile? The image loads at 19kb on mobile, so its well optimized. What could be causing the intermittent render delay on mobile and what can be done to fix it?

Thanks for your help!

[Website_Speedy]

Hi @MovingImages ,

It sounds like you're already making good progress by using preload: true to prevent lazy loading on desktop, which is an excellent first step to improve Largest Contentful Paint (LCP). However, if you're still experiencing issues with LCP on mobile, there are a few additional optimizations you can implement to further improve mobile performance:

You can apply the same preload strategy for mobile devices to ensure the image is loaded as quickly as possible. By using the media attribute, you can target specific screen sizes or conditions, ensuring the image is preloaded only on mobile devices. Here’s how you can implement it:

<link rel="preload" href="{{ 'image-url.jpg' | asset_url }}" as="image" media="(max-width: 767px)">

Just like you applied preload for the desktop version, you can also use the loading="eager" attribute for mobile images. This will ensure that the image is prioritized for loading, preventing any delays in displaying the largest visible content (the image) on mobile. The eager loading attribute instructs the browser to load the image as soon as possible, without waiting for the rest of the page to finish loading. Here’s the code:

<img src="{{ 'image-url.jpg' | asset_url }}" alt="Banner Image" loading="eager" />

By implementing both of these strategies, you'll ensure that your LCP is optimized on mobile, resulting in a faster page load time and a better user experience. Preloading the image and using loading="eager" will help ensure that the most important visual elements load first, leading to a smoother, quicker experience for mobile users.

If these adjustments don't lead to significant improvements (as an affiliate of the Website Speedy app), I recommend exploring it in the Shopify App Store for additional performance optimization tools that could help further improve your site’s speed. This could complement the steps mentioned above, helping to ensure your store performs optimally. You can install it here: https://apps.shopify.com/website-speedy