Title: Speed optimization test
Last modified: August 14, 2019

---

# Speed optimization test

 *  [geckoroutes](https://wordpress.org/support/users/geckoroutes/)
 * (@geckoroutes)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/)
 * 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](https://gtmetrix.com/reports/www.geckoroutes.com/AVrILd4l)
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fspeed-optimization-test%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [taruckus](https://wordpress.org/support/users/taruckus/)
 * (@taruckus)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11850996)
 * 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 6 years, 9 months ago by [taruckus](https://wordpress.org/support/users/taruckus/).
      Reason: code output
    -  This reply was modified 6 years, 9 months ago by [taruckus](https://wordpress.org/support/users/taruckus/).
      Reason: typo
 *  Thread Starter [geckoroutes](https://wordpress.org/support/users/geckoroutes/)
 * (@geckoroutes)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11854063)
 * 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.
 *  [taruckus](https://wordpress.org/support/users/taruckus/)
 * (@taruckus)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11854222)
 * 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/](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](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>';
        ?>
       ```
   
 *  Thread Starter [geckoroutes](https://wordpress.org/support/users/geckoroutes/)
 * (@geckoroutes)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11854402)
 * 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.
 *  [taruckus](https://wordpress.org/support/users/taruckus/)
 * (@taruckus)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11854443)
 * You’re welcome! it looks like it’s lazy loading to me.
 *  Thread Starter [geckoroutes](https://wordpress.org/support/users/geckoroutes/)
 * (@geckoroutes)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11854518)
 * 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?
 *  [taruckus](https://wordpress.org/support/users/taruckus/)
 * (@taruckus)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11854527)
 * 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!
 *  Thread Starter [geckoroutes](https://wordpress.org/support/users/geckoroutes/)
 * (@geckoroutes)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11854608)
 * Allright, good to know! Thanks a lot for fixing this issue! Appreciated a lot!
 *  Thread Starter [geckoroutes](https://wordpress.org/support/users/geckoroutes/)
 * (@geckoroutes)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11854653)
 * Looked like the succes was shortlift.
 * Now I get the message “Instagram has returned invalid data.”
 * See the screenshot here:
 * > [View post on imgur.com](https://imgur.com/erkGl4U)
 *  Plugin Author [Scott (@scottsweb)](https://wordpress.org/support/users/scottsweb/)
 * (@scottsweb)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11854665)
 * Test this PR: [https://github.com/scottsweb/wp-instagram-widget/pull/117](https://github.com/scottsweb/wp-instagram-widget/pull/117)
 * Some related discussion here: [https://github.com/scottsweb/wp-instagram-widget/issues/112](https://github.com/scottsweb/wp-instagram-widget/issues/112)
 *  Plugin Author [Scott (@scottsweb)](https://wordpress.org/support/users/scottsweb/)
 * (@scottsweb)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11854666)
 * Direct download link to the PR version: [https://github.com/scottsweb/wp-instagram-widget/archive/fixes/two-point-oh-four.zip](https://github.com/scottsweb/wp-instagram-widget/archive/fixes/two-point-oh-four.zip)
 *  Thread Starter [geckoroutes](https://wordpress.org/support/users/geckoroutes/)
 * (@geckoroutes)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11866893)
 * 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)

The topic ‘Speed optimization test’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wp-instagram-widget_d7eadd.svg)
 * [WP Instagram Widget](https://wordpress.org/plugins/wp-instagram-widget/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-instagram-widget/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-instagram-widget/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-instagram-widget/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-instagram-widget/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-instagram-widget/reviews/)

 * 12 replies
 * 3 participants
 * Last reply from: [geckoroutes](https://wordpress.org/support/users/geckoroutes/)
 * Last activity: [6 years, 9 months ago](https://wordpress.org/support/topic/speed-optimization-test/#post-11866893)
 * Status: not resolved