Support » Plugin: WP Instagram Widget » Speed optimization test

  • geckoroutes

    (@geckoroutes)


    This instagram widget looks amazing, but it looks like it slows down my site.

    Every speed test shows that the images are not scaled and looks also like the jetpack lazy load functionality is not working for this widget.

    Do you have any code suggestion to enable lazy load for this gallery or solve any of the issues listed in this test:

    https://gtmetrix.com/reports/www.geckoroutes.com/AVrILd4l

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • 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 1 month, 3 weeks ago by  taruckus. Reason: code output
    • This reply was modified 1 month, 3 weeks ago by  taruckus. Reason: typo

    Thanks for the reply, but I don’t really understand what I need to do exactly.

    I created a folder called “parts”, so the file was located in “/wp-content/themes/15zine/parts”. Then I simply copy+paste your code, but this resulted in a white space instead of the instagram feed.

    I also have a file called wp-instagram-widget.php in the plugin folder (which is not in my theme folder) but I assume I should leave this as it is?

    I’m not a developper, so no clue if I’m doing it the way it should.

    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>';
     ?>
    

    Thank you so much for customizing the code and explaining me how you came up with it.

    I just replaced the code and the insta feed appears again, but no lazy loading yet. If I open the inspect tool I still see the instagram images are loaded.

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

    I’m so sorry! I was looking at the pictures of another instagram plug-in I’m using.

    The one from “wp-instagram-widget.php”, but I didn’t take in mind I also had an “instagram-slider”.

    Tried to use the same method with same code, but that didn’t work unfortunately. Is this solution really specific to the wp-instagram-widget?

    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!

    Allright, good to know! Thanks a lot for fixing this issue! Appreciated a lot!

    Looked like the succes was shortlift.

    Now I get the message “Instagram has returned invalid data.”

    See the screenshot here:
    https://imgur.com/erkGl4U

    Plugin Author Scott (@scottsweb)

    (@scottsweb)

    Plugin Author Scott (@scottsweb)

    (@scottsweb)

    Thanks for the update, but unfortunately this new update didn’t work for me. I changed everything to # in of username. Luckily that worked

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.