Heavy LCP image load delay despite fetchpriority and eager loading

Heavy LCP image load delay despite fetchpriority and eager loading

marrep
Shopify Partner
15 0 2

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

 

Bildschirmfoto 2024-04-02 um 10.39.13.pngBildschirmfoto 2024-04-02 um 10.40.51.png

Replies 3 (3)

AK81
Shopify Partner
22 3 12

Convert your banner images from jpeg to webp and compress them. It will improve the performance. 

marrep
Shopify Partner
15 0 2

Shopif does serve automatically in webP... 

 

Bildschirmfoto 2024-04-02 um 12.56.54.png

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'
  }}

 

DawnTawn
Shopify Partner
2 0 0

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' }}