First image not getting lazyloaded

  • Resolved newbiedev

    (@newbiedev)


    11 months, 2 weeks ago

    Hi Team

    First of all, thanks for this awesome plugin!

    I need a little help in resolving two issues:

    1. In all the articles I have, the first image in the article is never lazy-loading. If you see in the sample url, the first image is directly loading, while the 2nd one is lazy-loading correctly. In the Autoptimize > Images : I’ve setthe “Lazy load from nth image” as 1. It is not even allowing me to make it 0. Please help in how can I make the first image also lazyload?
    2. I’m loading a unit that has multiple image (towards the end of the article). If you’ll scroll below you’ll note a section called “Trending Posts”. This section is loaded via Adinserter plugin. The images in this section are also not lazy-loaded. Can you suggest how should i modify the code to make sure these are also lazy-loaded?

    Autoptimize settings: https://ibb.co/7tnPMxkJ

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    11 months, 2 weeks ago

    lazyloading images that are in the immediately visible part of the page (the “above the fold”) is not a good idea, as it will increase the time for that “above the fold” to load (impacting your “largest contentful paint”). additionally when an image comes with the fetchpriority="high" attribute (which I see in the HTML), AO will not lazyload it as the attribute indicates the image needs to be loaded asap.

    re. the “trending posts” images; those are inserted by javascript, so Autoptimize cannot see/ alter the image tags to lazyload those, maybe check with the adinserter team?

    hope this clarifies,
    frank

    Thread Starter newbiedev

    (@newbiedev)

    11 months, 2 weeks ago

    Thanks for your prompt response!

    1. Regarding fetchpriority=”high” , I’m inserting the first image similar to other images, so would you be able to help with any pointers why this is getting set, so I can avoid it
    2. Regarding “Trending posts”, can i modify the <img> code so that it lazyloads? Could you also help in some pointers on that?

    Appreciate your response!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    11 months, 2 weeks ago

    fetchpriority is being added by WordPress core, there might be a filter you could use to disable that though?

    re. trending posts; guess you could try to delay execution of the adinserter JS code, AO Pro can delay JS until after the page loads (or user interaction), something like “flying scripts” might also work?

    Thread Starter newbiedev

    (@newbiedev)

    11 months, 2 weeks ago

    Thanks for the pointers. Let me try these!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘First image not getting lazyloaded’ is closed to new replies.