Really bad LCP

  • Resolved rudolfl

    (@rudolfl)


    3 months, 1 week ago

    Hi,

    https://www.hatsfromoz.com.au/sculptured-fuchsia-lime-racing-fascinator-by-fillies-collection/

    I am getting terrible LCP and trying to fix it. When investigating, I can see that main image loads up 3 times (actually any product image does). Each load is for a different image size and each load takes 1-2s (throttling connection to “slow 4G” as per Litespeed tests).

    In addition, only one of the images is pre-loaded. images do have “fetchpriority=high” on them, but this is only complementing the preload. Really, they should be used together. preload allows for resource to be loaded early, while fetch priority allows it to be prioritised over other elements.

    Is there anything can be done to improve the LCP and only load images that are required? (I am aware of some JS delays and working on it too).

    Is there a way to disable re-sizing of the images while keeping the rest (CDN, lazyload, format upgrade)?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author optimole

    (@optimole)

    Hi there,

    That image is using a custom lazyload, not from Optimole, that is causing the huge delay. You can see in the Pagespeed report https://vertis.d.pr/i/wS5Rgq that the biggest impact in LCP load has the Render/Load Delay which is coming from the lazyload mechanism that you use on that image.

    You can try to decrease the Bypass setting https://docs.optimole.com/article/1948-bypass-lazy-load-for-first-images to a smaller number, i.e 1 to see if Optimole can overwrite the lazyload that you use and can load that image faster.

    Moreover, You can try to disable the autoscaling using this toggle https://docs.optimole.com/article/1950-image-scaling.

    Let us know how it goes.

    Thread Starter rudolfl

    (@rudolfl)

    Thank you

    May I ask why you say another lazyload is in use and causing problem? Is it because of “disable-lazyload” class applied? Seem It is added unconditionally by Avada theme for product images, but actual lazyloading mechanis is disabled in Avada settings, so should not have any effect.

    I also tried to bypass lazy load images. Tried to set number of images to bypass to 1, then to 0. No improvements. I also tried to switch off scaling. No improvement. With the last one, i think, it did not have any effects because it only works for lazy loaded images and mine are not.

    Rudolf

    • This reply was modified 3 months, 1 week ago by rudolfl.
    Plugin Author optimole

    (@optimole)

    Hi there,

    Regarding the lazyload, the image has a data-src and data-srcset attribute which is often used by lazyload mechanisms. In Optimole we don’t use those and we use data-opt-src as lazyload attribute.

    I hope this helps.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.