Largest Contentful Paint image was not lazily loaded

  • Hello,

    I have problem with images on woocommerce product pages with big LCP:

    figure.woocommerce-product-gallery__wrapper > div.woocommerce-product-gallery__image > a > img.wp-post-image

<img width="555" height="555" src="https://domain.com/wp-content/uploads/2021/10/24K…" class="wp-post-image" alt="" loading="lazy" data-caption="" data-src="https://domain.com/wp-content/uploads/2021/10/24K…" data-large_image="https://domain.com/wp-content/uploads/2021/10/24K…" data-large_image_width="555" data-large_image_height="555" data-o_src="https://domain.com/wp-content/uploads/2021/10/24K…" data-o_height="555" data-o_width="555" data-o_srcset="" data-o_sizes="" …>

    Also i need to add width/height for logo:

    Image elements do not have explicit width and height:

    <img src="https://domain.com/wp-content/uploads/2021/10/logo.…" alt="Page Builder DEMO" itemprop="logo">

    LAB DATA screenshot:

    1. https://prnt.sc/1w04rub
2. https://prnt.sc/1w04tj7

    How to fix this tasks? Thanks!

    • This topic was modified 3 years, 1 month ago by Bojan Deni?.
    • This topic was modified 3 years, 1 month ago by Bojan Deni?.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Bojan Deni?

    (@evilmc)

    For products I need to exclude this 2 classes:

    woocommerce-product-gallery__image, woocommerce-product-gallery__wrapper

    Also for blog featured images, i need to exclude from lazy load.

    How to do that?

    • This reply was modified 3 years, 1 month ago by Bojan Deni?.
    Theme Author David Vongries

    (@davidvongries)

    Hi @evilmc,

    the logo missing width/height values for the logo is already on our roadmap.

    Regarding the WooCommerce gallery images, we leave them untouched. They should lazyload by default though, WordPress now lazyloads images by default.

    I’m not 100% sure how to exclude certain images from being lazyloaded. That might depend on wether you’re using a plugin for lazyloading and if they offer an option to exclude certain images.

    Thread Starter Bojan Deni?

    (@evilmc)

    Ok, i fixed problem with WooCommerce products with 3rd plugin for lazyload and then i excluded product images from lazy.

    Do you have any solution how to fix the logo missing width/height values?

    Theme Author David Vongries

    (@davidvongries)

    Hi @evilmc,

    The logo missing width/height values for the logo is already on our roadmap.

    We hope to issue a fix for this asap. There is currently no ETA for when this will be implemented.

    Best,
    David

    Thread Starter Bojan Deni?

    (@evilmc)

    Ok, we are waiting for that update! Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Largest Contentful Paint image was not lazily loaded’ is closed to new replies.