Speed optimization test

If you have your own lazy load solution in place like Jetpack, you can adjust this plugin’s output. Per the docs:

In version 1.4 and above you can also customize the image loop completely by creating a parts/wp-instagram-widget.php file in your theme.

So, create the file wp-instagram-widget.php in (your theme folder)/parts/

Then add to it something like this:

<?php
// this is a 1x1px transparent gif in base64
$gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

// this is mostly just the copied output from the plugin, but with Jetpack's data-lazy-src attribute for its lazy load spec
echo '<li class="' . esc_attr( $liclass ) . '"><a href="' . esc_url( $item['link'] ) . '" target="' . esc_attr( $target ) . '"  class="' . esc_attr( $aclass ) . '"><img src="'.$gif.'" data-lazy-src="' . esc_url( $item[$size] ) . '"  alt="' . esc_attr( $item['description'] ) . '" title="' . esc_attr( $item['description'] ) . '"  class="' . esc_attr( $imgclass ) . '"/></a></li>';
 ?>

• This reply was modified 4 years, 11 months ago by taruckus. Reason: code output
• This reply was modified 4 years, 11 months ago by taruckus. Reason: typo

No problem; I’d like to help you resolve this.

The file placement and white space you’re seeing is partially correct so far; the idea behind lazy loading is that the URL of the image is kept in a separate attribute of its element so it doesn’t load right away. Our problem is that Jetpack didn’t load the image when intended, so that’s what we need to get it to do.

I followed its specification here, but it looks like that wasn’t enough: https://jetpack.com/support/lazy-images/

I had a look at the code for Jetpack’s lazy loading (you don’t need to look at this): https://github.com/Automattic/jetpack/blob/master/modules/lazy-images/js/lazy-images.js

I think the images also need an additional class as well as the data-lazy-srcset attribute. Try replacing all of the code in the file you made with this. I tested this as well, so let me know if it works out.

<?php
// this is a 1x1px transparent gif in base64
$gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

// this is mostly just the copied output from the plugin, but with Jetpack's data-lazy-srcset attribute for its lazy load spec
echo '<li class="' . esc_attr( $liclass ) . '"><a href="' . esc_url( $item['link'] ) . '" target="' . esc_attr( $target ) . 'is-pending-load=1"  class="' . esc_attr( $aclass ) . '"><img src="'.$gif.'" data-lazy-src="' . esc_url( $item[$size] ) . '"  alt="' . esc_attr( $item['description'] ) . '" title="' . esc_attr( $item['description'] ) . '"  class="' . esc_attr( $imgclass ) . ' jetpack-lazy-image" srcset="'.$gif.'" data-lazy-srcset="'.esc_url( $item[$size] ).'" /></a></li>';
 ?>

You’re welcome! it looks like it’s lazy loading to me.

Yeah, the template part file is specific to this plugin. Lazy loading slider images requires a little more work as well. You could try heading to that plugin’s support or stackoverflow for help. Good luck!