Please take advantage of browser lazy loading

  • Resolved iSaumya

    (@isaumya)


    3 years, 11 months ago

    Hi,
    I am currently using this plugin in two of my client’s sites and so far I really like the plugin. I just have 1 feedback to provide in terms of better optimization. Please use loading="lazy" in the img tags that is added via the plugin to hold the images.

    Currently, the image tags are general image tags without any browser lazy loading support. But as we all know not only WordPress has added the browser level lazy loading feature in its core but also it is now widely supported in all browsers.

    So, just by adding the loading="lazy" in the img tags it will be a huge help and performance boost.

    For example, currently, I’m using the carousel mode to show the Instagram images which shows up just above the footer at the very end of the page. But when the page loads the browser downloads all the images which not only adds more load but also increases bandwidth consumption for no reason. It also provides a bad page speed score. This can easily be fixed from your end by adding just 1 attribute to the image tags.
    Please do it. Thanks.

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

  • it was like that, but for some reason having the lazy loading was causing an issue and images never showed up.
    The option in feeds settings is still there, but images are no more lazy-loaded.

    maybe they removed the lazy loading to bypass the issue.

    Thread Starter iSaumya

    (@isaumya)

    Hi @bluantinoo,
    Were they using the browser lazy loading i.e. loading="lazy" or they have use JS-based lazy loading?
    Cause with browser-based lazy loading I don’t see a reason for it not to work. I can try editing the plugin cod and test if it works with browser level lazy loading.
    But there is no reply from the plugin team so not sure if they will implement the fix or not.

    Hi @isaumya frankly I did not notice how they were implementing the lazy loading.
    I just know that in the feed setting there is the option for lazy loading the images, but it was bugged after the 3.7 release, at least on the carousel mode.
    You can see a lot of support about that, like this thread: https://www.ads-software.com/support/topic/carousel-format-is-not-showing-images-only-showing-blank-white-kind-of-thing/

    they released a fix in the latest updates, but as I can see, lazy loading now does not work, despite the option setting.

    PS: in my experience, the last working lazy loading was on the 3.06 version, you can try to download that version and see what was happening in later versions.

    • This reply was modified 3 years, 11 months ago by bluantinoo.
    • This reply was modified 3 years, 11 months ago by bluantinoo.
    • This reply was modified 3 years, 11 months ago by bluantinoo.
    Thread Starter iSaumya

    (@isaumya)

    Hi @bluantinoo,
    I dug deeper into the plugin code and when I checked the code of wp-content/plugins/insta-gallery/templates/item/item-image.php file, I saw this

    <img <?php if ($feed['layout'] != 'carousel' && $feed['lazy']) : echo 'loading="lazy"';
          endif; ?> alt="Instagram" class="insta-gallery-image <?php if ($feed['lazy']) : echo 'swiper-lazy'; endif; ?>" src="<?php echo esc_url($image); ?>" />

    Now as you can see in the code it is checking if feed type is != carousel and lazy option is selected like: https://i.imgur.com/CiQKSu1.png

    Then only add loading="lazy" else don’t lazy load images for carousel basically.

    So, played around with the code and basically added loading="lazy" for carousel mode and faced the problem like everyone else has faced before in the thread you have mentioned above.

    Then I realized why the problem is happening. You see when carousal mode is being used the images are basically not part of DOM they are being added based on JS callback. That’s why you first see the spinner (JS is working) then you see the images. As these images are not part of normal DOM and mostly stays inside shadow DOM, loading="lazy" cannot lazy load the images. As the whole loading="lazy" works in the basis of the browser already have the full DOM and knows what to load where and then load the images based on the viewport.

    So, now what’s the solution here? The only solution for the carousel mode or any JS-based modes is that the images need to be lazy-loaded using JavaScript. Where instead of loading the images as <img src="..."/> they need to be loaded as <img data-src="..." /> and then when the carousel section comes within the viewport, change the data-src of the image tags to src tag for the images to be loaded.

    Unfortunately, as I have seen for this plugin the plugin authors do not like to participate in the support threads much, so I have no idea if they are reading this thread or if they will implement something similar soon.

    Plugin Author beluserra

    (@beluserra)

    Hi Guys
    please update to latest version, this is supposed to be solved
    regards

    Hello @beluserra,
    now I don’t get any error, but images in the carousel layout are NOT lazy-loaded.

    thanks anyway…

    Thread Starter iSaumya

    (@isaumya)

    Yes, images in the carousel are not lazy-loaded in any way which harms page speed very badly.

    Thread Starter iSaumya

    (@isaumya)

    Hi @beluserra,
    I don’t know what do you mean by this is supposed to be solved. There is absolutely no lazy loading for carousel type feeds. Maybe you have misunderstood the issue here. Please take a look at the thread messages thoroughly, especially this reply: https://www.ads-software.com/support/topic/please-take-advantage-of-browser-lazy-loading/#post-13776604

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Please take advantage of browser lazy loading’ is closed to new replies.