Lazy loading on instagram images to improve performance

[Dennisfall95]

lazy load can help a website that use this plugin (totally media center) to improve the general performance loading the images on-scroll only

[Helga]

Folks, our former Wishlist portal, where our users shared their requests and suggestions, was transferred to this forum. You’re most welcome to vote, add new ideas, and leave your comments here — we surely will consider them all!

Original Votes: 63

[ElfsightBot]

Original comment from Patrick transferred from the previous Wishlist portal:

Hi guys,

I managed to workaround this using the lazysizes JS library and their unveilhooks extension

GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/unveilhooks/ls.unveilhooks.js

[ElfsightBot]

Original comment from Jens Martsch transferred from the previous Wishlist portal:

Lazysizes with unveilhooks is a good option for this. However there should be a native solution.

It can be done like this with plain JavaScript(ES6 format) and a little help of jQuery (you could also rewrite this without using jQuery):

let instagramFeedScrollDistance;

let instagramLoaded = false;

function lazyLoadInstagramFeed() {

let scrollDistance = $(window).scrollTop();

let windowHeight = $(window).height();

if ((scrollDistance >= (instagramFeedScrollDistance - windowHeight)) && !instagramLoaded) {

let instagramScript = $.getScript(‘//apps.elfsight.com/p/platform.js’);

instagramLoaded = true;

}

}

$(() => {

const feed = $(‘.class-with-your-app-id’);

if (feed.length) {

instagramFeedScrollDistance = feed.offset().top;

instagramLoaded = false;

$(window).on(‘scroll’, lazyLoadInstagramFeed);

lazyLoadInstagramFeed();

}

});

A native approach with IntersectionObserver would be even better, but isn’t suppported in IE.

[ElfsightBot]

Original comment from Jens Martsch transferred from the previous Wishlist portal:

43 at the moment, and still “under consideration”. It has been 1.5 years now, since this was posted.

[Helga]

Dear folks,

Thanks a lot for adding this idea and for your comments!

We do understand how needed this option is for you and I’m truly sorry that we don’t support it yet.

We’ve tried to talk this option through, however, it did appear to be more complicated than we expected. To release the lazy load function, we’ll have to implement a major update for the whole widget which is a very complex task.

We’re not going to give up on this idea of course, and we will definitely keep trying to find maybe other ways to make this option real. But unfortunately, we cannot promise that this will be done in near future.

I’m so very sorry to bring such news, and I do believe we will be able to have this option released sooner.

Thank you so much for your understanding!

[ElfsightBot]

Original comment from Chris Freer transferred from the previous Wishlist portal:

Hi, being able to lazyload or reduce the image size would help alot with Google mobile page load times.

[Helga]

Hello folks!

Big news is coming — lazy load beta version for embedded widgets is here!

It doesn’t work as a built-in option yet due to a couple of unresolved matters, but you can adjust your widget manually in order to make it work

To turn it on, please add the “data-elfsight-app-lazy” attribute to a

element in your installation code.

For example, here’s how the code looks like initially:

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-9d3beb9e-4c72-4bd1-8ed6-c192fc9e56c7"></div>

And here’s how it should look like with the attribute added:

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-9d3beb9e-4c72-4bd1-8ed6-c192fc9e56c7" data-elfsight-app-lazy></div>

Please keep in mind that it will work only for widgets which are not in the initial viewport (e.g. users have to scroll down at least for a little bit before they reach the widget).

Please do let us know if it worked on your end

[user1657]

When integrated into large scale commerce ops - Adobe Commerce, Shopify, Netsuite, etc we continually get critical image optimization / bandwidth warnings as a result of your embedded app. The images being served are not optimized and slowing the site load down significantly. I cannot provide a screen shot but here is a small snippet from our Adobe Commerce SWAT tool that shows the first image. We get these warnings on all images served by your app. This is impacting page load by almost 1 second. Between IO and code overhead this is a somewhat costly app in terms of optimized bandwidth. Adopting a WebP image format would also be a good feature as well.

Report from Adobe Commerce (Magento) SWAT :
DETAIL: PROPERLY SIZE IMAGES

Description

Images on a page https://www..com/*** are not appropriately sized for cellular data to improve load time. The first image to display is Potential savings of 2,826 KiB.

The complete list of wrongly sized images are:

• https://scp2.elfsightcdn.com/?url=https%3A%2F%2Fscontent-sjc3-1.cdninstagram.com%2Fv%2Ft51.2885-15%2F318197970_1677508019371959_5056728879942975889_n.jpg%3F_nc_cat%3D105%26ccb%3D1-7%26_nc_sid%3D8ae9d6%26_nc_ohc%3DeSVLX_V4CdUAX8K-FMv%26_nc_ht%3Dscontent-sjc3-

[Helga]

@user1657 thanks a lot for your comment!

I’m very sorry that our widget gives you a hard time with this issue.

At the moment, we do not optimize the images and use them in the exact form Instagram provides them on its end. However, we do have plans to store images on our end so that we can easily optimize them. We’re doing our best to make it next year, I’ll make sure to update you on how things are going in this thread.

Meanwhile, I recommend you try our Lazy-loading solution, which should improve the current situation. Please check this article on how to use the Lazy-loading option: How to improve PageSpeed score of a page with our widget - Elfsight Help Center

Please let me know if it worked. I really hope it will!

[Voodoo_Neon]

Surely has to be high on the list of things to improve - everyone knows pagespeed is an important aspect of a website, and this slows down the website ~1 second each page it’s on.

Please fix.

[Max]

Hi @Voodoo_Neon

I understand your point and agree that the page speed level is a crucial aspect for a website.

You asked about the lazy loading feature in a support ticket, and my colleague Lisa replied to your query. However, It seems like you might have missed her response.

As Lisa mentioned, we do not have such functionality for Shopify widgets. However, we recommend you to check our cloud apps here - The Best Free Widgets and Plugins for your Website (2023), instead of the Shopify one. The lazy-loading feature, described in the article, does work there.

Please note that the feature won’t in fact lazy-load the images, so they appear only when one scrolls down to them, however, it hides the widget from Google Lighthouse, thus the widget doesn’t anyhow affect the loading speed.

If any further questions come up, feel free to let us know. We’ll be happy to assist