Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to do Lazy Load Images in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to do Lazy Load Images in WordPress

Have you ever visited a blog post that has a lot of images? If you have, then you probably have an idea of how SLOW it loads. Well Lazy load is to prevent that slow page load time. According to Wikipedia, “Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program’s operation if properly and appropriately used.” In other words, when you install Lazy Load, it only loads the areas that is being accessed right away. So if you have a page with 25 Fail GIFs, then only the first few images in the post will be loaded. The rest of the images load as the user scrolls down. By using this technique, the perceived page load time is a lot faster. This technique is used by many big sites including the likes of Mashable, TechCrunch etc. In this article, we will show you how to lazy load post images in WordPress.

First thing you need to do is install and activate the plugin called Lazy Load.

And you are DONE.

This plugin was created by WordPress.com VIP team at Automattic, the TechCrunch 2011 Redesign team, and Jake Goldman (10up LLC). It is using the jQuery.sonar script by Dave Artz (AOL).

As you can see there is a very high qualified team behind the plugin.

When we first installed the plugin on List25, it did not work. All of our images broke. But the issue was not with the plugin. It was the way JavaScripts were in our theme. We adjusted the script order, and it works perfectly fine.

Combined with MaxCDN and W3 Total Cache, This plugin will make your site load even faster.

Get Lazy Load for WordPress now.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Aarushi says:

    Can you help me understand about re-order javascript? Despite the lazy load, the site seems to be loading slow.

  2. Allen Moore says:

    I’m was using this plugin in conjunction with W3 Total Cache and MaxCDN. I noticed that Gravatars were not loading. After a series of deactivating plugins, I found Lazy Load to be the issue. Such a shame. It’s a great plugin.

  3. Deyson says:

    Hello, is there a way I can apply the lazyload to a div class? I am using poster images for my videos and it seems that lazy load does not affect those.

    Thank you :)

    • Editorial Staff says:

      Probably best to ask that question to the plugin author. We are only using this for what it was intended for.

  4. arionarian says:

     @wpbeginner i have installed Lazy Load plugin, it’s work fine but with no fading-in effect. how do i fix that (gaining fade-in effect) ?

  5. ronenbekerman says:

    How do you adjust the script load order – I have the same image broken thing you mentioned here ;)

  6. Crysislevel says:

    a nice tutorial. i am using ‘lazy load plugin wp’ and not this one as the former gives nice fade in effects while loading images. although both are equally good in performance! :D

  7. robolist says:

    Hi guys, great post as always :) I love reading your blogs on improving WordPress sites. I have done a bit of research on this plugin and found a post in the WordPress forum that looks like it is form one of your guyshttp://wordpress.org/support/topic/plugin-lazy-loa… Did you stick with the original plugin or did you opt for the alternative BJ Lazy Load? I would be very interested to know as i’d love to install one of these plugins as soon as possible. Anything to make my site run faster is always at the top of my Christmas list ;)

    • wpbeginner says:

      @robolist We switched to BZ Lady Loading yesterday but that plugin caused our RSS site feed to not show any images. So we went back to this one. We will keep this article up to date.

      • robolist says:

        @wpbeginner Thanks for the info :) I will run some tests with this plugin and see how it goes. Cheers

      • bjornjohansen says:

         @wpbeginner Just to let you know: The BJ Lazy Load plugin has fixed the RSS issue now.

        • ronenbekerman says:

           @bjornjohansen  @wpbeginner This one also doesn’t seem to work with w3 total cache for me. Work for the admin… but not for a a regular visitor… images don’t show.

        • wpbeginner says:

           @ronenbekerman  @bjornjohansen We are using the plugin we mentioned in this article because it was updated. Haven’t tried BJ Lazy Load since we last switched.

  8. phukettourinfo says:

    Hi guys, great post as always :) I love reading your blogs on improving WordPress sites. I have done a bit of research on this plugin and found a post in the WordPress forum that looks like it is form one of your guys http://wordpress.org/support/topic/plugin-lazy-load-screws-up-facebook-opengraph. Did you stick with the original plugin or did you opt for the alternative BJ Lazy Load? I would be very interested to know as i’d love to install one of these plugins as soon as possible. Anything to make my site run faster is always at the top of my Christmas list ;)

  9. RafaelTrabasso says:

    the title for this should be “WordPress Lazy Load Plugin”, because what you are really teaching is how to install a plugin.

    “How to do lazy load” in my head would be something more comprehensive, perhaps explaining how does the plugin work and the caveats it could present.

    misleading article…

  10. Sara Jaff says:

    thanks for working tip

  11. Joe Lalonde says:

    Sounds like a great plugin. Do you now if it has any issues with the Standard theme?

    • wpbeginner says:

      @Joe Lalonde Not sure, we did not try it with all available commercial themes.

      • Joe Lalonde says:

        Thanks for the response. Once I have Standard installed, I will give it a try. @wpbeginner @Joe Lalonde

        • jeremyers1 says:

          @Joe Lalonde@wpbeginner I use ST. I just installed it. Seems to work great!

        • Joe Lalonde says:

          Thanks for letting me know. Once I get ST going I’ll check it out. @jeremyers1 @wpbeginner

  12. VenkatEswaran says:

    how to fix the java script , there is no images loading in my site

    • wpbeginner says:

      @VenkatEswaran This may vary from theme to theme. But if you have more than one versions of jQuery being loaded, then you need to take care of that….

      • Luis Daniel Duran says:

        @wpbeginner@VenkatEswaran This is wow plugin, but my images are broken. what exactly i need to do to fix that i am nopt in your level, but if you post the step by step i can do it for sure. Thank you.

        • wpbeginner says:

          @Luis Daniel Duran@VenkatEswaran Again, if you have an error, then it is mostly being caused by your theme because it has more than one version of jQuery being loaded.The issue will vary from theme to theme, so there is NO WAY to post a step by step guide to fixing the issue.

        • Luis Daniel Duran says:

          @wpbeginner@VenkatEswaran Where may i see that? the different versions of jQuery? that’s my ponit :)

        • wpbeginner says:

          @Luis Daniel Duran@VenkatEswaran You can see that in your site’s source code.

  13. LauLau81 says:

    I am not really familiar with this but thanks to your post because it helps a lot for me…I am really glad I have enjoyed reading this post…

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.