Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there,
although the lcp image is loaded "eager" and fetchpriority is "high" we have a load delay of 10,190 ms. Also render delay is quite high with 1,650ms despite the fact that the image is responsive (800px width for mobile).
Any ideas how to improve?
Cheers
Convert your banner images from jpeg to webp and compress them. It will improve the performance.
Shopif does serve automatically in webP...
This is how the images are rendered:
{{ type | image_url: width: width | default: 1200 | image_tag:
loading: loading,
fetchpriority: fetchpriority,
sizes: sizes,
alt: alt,
widths: '200, 300, 400, 500, 600, 700, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2200, 2400, 2600, 2800, 3000'
}}
add this to where
{{ type | image_url: width: width | default: 1200 | image_tag: loading: loading, fetchpriority: fetchpriority, sizes: sizes, alt: alt, widths: '200, 300, 400, 500, 600, 700, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2200, 2400, 2600, 2800, 3000' }}
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025