Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

Announcing Built-in Lazy Loading for Lightning Fast Galleries

by Syed Balkhi on Apr 3, 2017

Share This Post!

Did you know that a 1 second delay in page load time can lead to 7% loss in conversions, 11% fewer page views, and 16% decrease in customer satisfaction?

You can’t afford to have a slow website.

But with image galleries, having a fast WordPress site is a big challenge. You want to be able to use beautiful high-res images for the best effect, but those images can have a huge impact on your page load speeds.

That’s where our new “lazy loading” feature comes in.

What Is Lazy Loading?

Image galleries with a lot of large, high-res photos have a big impact on your audience – but also on your page load speeds.

Normally, when someone visits a page with a large gallery like that, their browser will try to download all the photos at once.

As you can imagine, this really slows down the time it takes for the whole page to load. This means you’re losing all those visitors who don’t have the patience to wait.

Lazy loading is a coding trick that staggers the loading of these images, so that they’re only loaded at the moment they’re needed.

Instead of loading all at once, your beautiful high-res images will be loaded and ready as your visitor scrolls to them.

How to Use Lazy Loading

Envira Gallery’s new lazy loading feature is built-in to the core plugin and available to everyone, no matter what license you have.

Lazy loading will be automatically enabled for every new gallery you create.

To enable lazy loading on your existing galleries, just edit the gallery and select the Config tab. Then, check the Enable Lazy Loading? option.

enabling lazy loading in envira gallery

You can also choose to customize the loading delay after your visitors scroll to the image.

That’s it! You’ve enabled lazy loading on your existing gallery.

Envira Gallery is already the fastest image gallery plugin available on the market. But now with built-in lazy loading, it’s even faster, helping you to keep visitors on your site and engaged.

Thank you for your support and feedback in making Envira the best WordPress gallery plugin. You can follow us on Twitter and Facebook to be the first to hear about all our new features and updates.

Syed and the Envira Gallery Team

Share This Post!

Comments

  1. Hi! Looks like a great feature, but I’m not finding the Lazy Loading settings in the config table for my existing galleries, all created within the past few weeks. I’m running the latest versions of everything on my site, including (of course) Envira. Is the Lazy Loading feature coming in the next update? Your announcement makes it sound like it’s already implemented.

    Thanks!

  2. Hey Steve,

    Lazy loading was added in version 1.6.0 which is currently live. If you’re running it can you head over and create a support ticket for me?

    Cheers, Chris

  3. I’ve implemented this and it works fine.
    But – I’m not sure if the issue is connected, but my captions are no longer showing within the lightbox view. I’ve not changed these settings, and they were showing before. Grateful for any thoughts!

  4. Hi,

    I’m a bit confused about the “delay” – is it a delay from when the page starts loading, or from when the page has (other than the images) finished downloading?

    So, if a page takes 6s to load, what would be the best values to set the delay to? Also, if browser caching is in place, with the page loading almost instantly, how does that effect the delay time?
    Thanks
    Alex

  5. Hi Alex 🙂

    When you enable the Lazy Load option from the Config tab, this will delay loading the images when you scroll down the page.

    When the page first loads, the initial set images from the gallery that appear without having to scroll are not using the lazy load setting. As your user’s scroll down the page, that’s when Envira’s Lazy Load kicks in and delays loading the next set of images that should appear next based on the milliseconds you have set under the lazy load.

    http://cloud.supportally.com/1S1F182Q0g14

    Does that help?

    1. Hi, and thanks for getting back to me. So if I left it as 500ms, is it

      A) starting to load 500ms before it expects me to need the images (i.e. anticipating, maybe loading the images about 5 or 6 lines of text before it thinks I’m going to reach the images) or ;
      B) an actual delay from I reach where the images are.

      If A, it would make sense, but if it’s B, why would I want it to be anything other than 0, or even negative?

      Sorry if I’m being dense! Maybe you could do a video showing what happens, when.

      Thanks
      Alex

      1. Or
        C) are you saying that the moment I start scrolling down, it would wait 500ms, and then start loading the rest of the images?

        Thanks
        Alex

      2. And would I be right in understanding that if they’re visible on the screen, there’s no point in having them as lazy load except to allow for moving them down the page at some later date?
        Thanks

    2. Hang on, I’ve reread your reply, and I think I’m getting it…

      So let’s say we’ve got a web page with 3 envira galleries set up on the page:

      Set X is visible on the top of the page from the start.
      Set Y is further down, and we’d have to scroll to it.
      Set Z is further still down the page, and we’d have to scroll some more.

      We set each to have a delay of 500ms.

      So…

      Set X loads with the rest of the page, ignoring the lazy load.
      When we start scrolling (?), there’s a delay of 500ms, and then Set Y starts to load.
      And then 500ms later (regardless of anything), Set Z starts to load.

      Is that right?

      And if so, does Set Z start loading 500ms after Set Y has started, or is it 500ms after Set Y has finished? I.e. Do I need to factor in how many photos are in each set of photos?

      Thanks

      Alex

      1. Hi Alex 🙂

        I apologize for any confusion! Each gallery’s lazy load is controlled separately. So in your example above (assuming Set X, Y and Z are all part of the same gallery) Set X would load on page load instantly yes. 🙂 As you scroll, set X appears and is delayed 500 ms after you finish scrolling. Set Z would only come into play depending on where about in the gallery it falls. Does that make sense? So if you scroll but haven’t gotten to the Set Z images yet – it wouldn’t load. It depends on the size of the gallery.

        Now if Set X, Y and Z are all 3 separate galleries, then each of those depends on their individual settings for lazy load milliseconds and how large each gallery is.

        Does that help to clarify what you are seeing?

        Should you need any further assistance or have anymore technical questions you’d like to have answered, please don’t hesitate to go to open up a support question with us! We’re always here and happy to help!

        1. Hi,

          Thanks for getting back to me. Taking the idea of 3 separate galleries, would the number of images in Gallery Y affect the delay setting of Gallery Z e.g. If there are a lot of images in Gallery Z then we need a large number of milliseconds?

          Thanks
          Alex

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 privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.