Serving Scaled Images / Defer Offscreen Images

Hey ghp7777,

It seems like this is not something speed score tools pick up on often but the Instagram Feed actually loads after the rest of the page has loaded. The plugin uses AJAX to create the feed after the rest of the page has loaded to make your site’s visitors experience of the speed of the site loading to be the same with or without the feed.

Instagram provides only 3 image sizes from its CDN listed in the API data we use to make the feed (640×640, 320×320, and 150×150). Our plugin will automatically choose the most optimum size image based on the size of the image on the page but it is ultimately limited to one of the three sizes.

Hopefully that helps your understanding! Let me know if you have any more questions.

– Craig

Hello ghp7777 and Craig,

this plugin doesn’t actually defer the offscreen images, even if it looks like it does. Let me explain:

The new PageSpeed algorithm (Lighthouse) runs the SB Instagram scripts and creates all the links and images in them. The latter are hidden via display none, but this doesn’t really matter, as all img elements are loaded on mobile, regardless of their visibility. This produces a “Defer offscreen images” warning and reduces the score.

The only solution to this problem is to lazy load the images:
1. omit the src attribute on load
2. save it in a data attribute
3. move data attribute to src when element becomes visible

Best Regards,
Andrej

Sounds good Andrej.

I suppose I didn’t mean that image loading is actually deferred just that the whole feed isn’t loaded until the rest of the page loads.

Either way, we are likely going to make the plugin more friendly for plugins that defer image loading or possibly add a feature ourselves. That should help the page score!

– Craig