Last updated on

Lazy loading is known by several names like on-demand loading or defer offscreen images, but the concept for them all is the same, and it is kind of simple. The only images that load are the ones that are in the viewport – the amount of screen that the reader can see.

This benefits your WordPress website performance greatly. Because each image takes a certain amount of bandwidth to load for visitors, reducing the bandwidth from your WordPress host to the user will improve the time it takes for your page to render to the visitor. There is a ton of research online showing how conversion rates and website speed are directly tied to each other.

A great example of images using lazy load for performance can be explained using the following scenario: Lets say a user requests a page on your website. If the site only shows the first 1200 pixels, an image that is 2000 pixels down wouldn’t be loaded in that initial request, saving you the total size of the image in the request. This can be huge for websites that are visually heavy, and save your visitors tons of time waiting on your web page to load.

With W3 Total Cache, lazy loading can be configured pretty easily. While it is a relatively new feature, the impact it can have on your website performance can be huge and greatly increase your PageSpeed Score.

W3 Total Cache Logo

Enabling Lazy Loading for WordPress in W3 Total Cache

To enable lazy loading for your WordPress website, the following tutorial will walk you through the steps.

  • In your WordPress Dashboard, Navigate to Performance → General Settings
  • Scroll down to User Experience
  • Select the box to Enable Lazy Loading
  • Click Save all settings

That’s it! You have now enabled Lazy Loading for images in WordPress with W3 Total Cache. You can fine tune the Lazy Loading configuration further by going to the User Experience page directly. This will give you additional options for things like excluding images from lazy load and the ability to process background images loaded using CSS.

W3 Total Cache Lazy Loading Settings

Fine Tuning Your Lazy Loading Configuration in W3 Total Cache

  • In your WordPress Dashboard, Navigate to Performance → User Experience

To fine tune your lazy loading configuration, you have the option of processing img tags in HTML or disabling that, as well as having lazy load process your background images defined in your websites HTML and CSS.

You can also add tags that will exclude images and resources from lazy loading, which you can define directly in the exclude words listing.

W3 Total Cache Lazy Loading Configuration

Finally, you can also select the script embed method where your options are async, sync to head and inline. Inline is only recommended when you have a small website, with only a few pages.

Once you have made your choices, click Save all settings and you should be good to go. Now, you may want to run a Performance Test to see how your changes have affected your PageSpeed scores. In almost all testing scenarios, lazy loading for WordPress improves the user experience of websites across the board. Try W3 Total Cache now and see for yourself, the performance increases will amaze you.

Lazy Loading in WordPress FAQs

How do I exclude an image from Lazy Loading?

You can add the class “skip-lazy” to stop any image from lazy loading.

How do I exclude SVG files from being lazy loaded?

You can exclude a specific image from lazy loading by adding the image URL to Performance > User Experience > Exclude words:
So for example: https://yourwebsite.com/wp-content/uploads/2021/02/headerimage.svg
Don’t forget to save all settings and purge the cache when done!

What’s the difference between Lazy Loading in Core and Total Cache?

WordPress Core started adding the loading=“lazy” tag in WordPress 5.5. It is implemented by the browser rather than a plugin. You can and likely should still use Lazy Loading through the W3 Total Cache plugin.

WordPress Core’s implementation is browser-based and not supported fully by many browsers. W3 Total Cache’s implementation uses lightweight JavaScript. It will deliver a better user experience to your users who aren’t browsing with a compatible browser. WordPress recently announced there will be changes to Core’s lazy-loading approach in WordPress 5.9.

Lazy Load Google Maps

W3 Total Cache Pro has the ability to lazy load Google maps. In our testing, lazy loading the map resulted in an 11 point increase in the Lighthouse performance score.

To enable lazy-loading Google Maps navigate to Performance > User Experience and check the box to enable your plugin. Remember, if you do not have an active Pro license, you will not see this option.

Upgrade to W3 Total Cache Pro today to improve the speed of your Google Maps. You’ll also get access to other professional performance features, such as Defer Render-Blocking CSS, Full Site CDN Delivery, WPML integration, and many more.

 

W3 Total Cache

You haven't seen fast until you've tried PRO

   Full Site CDN + Additional Caching Options
   Advanced Caching Statistics, Purge Logs and More

Everything you need to scale your WordPress Website and improve your PageSpeed.

23 thoughts on “Configuring Lazy Loading for your WordPress Website with W3 Total Cache

  1. Lazy Loading Images does not work well with Safari. I had to disable the functionality as some images were just not appearing/displaying at all.

    Other browsers worked fine.
    As of right now the latest version of W3TC is used.

    Using a dedicated lazy load plugin … made the whole thing work. Anyhow would be great if it is fixed in W3TC too, so the overall number of plugins can be kept to a minimum.

    • Hi TH-

      Thanks for the feedback! We’ll take a closer look at Safari to see if we can replicate the issues you saw and get it fixed in the near future for you.

    • I too just discovered this issue. What’s odd is that if I open up inspector and/or change any arbitrary css value, all the images appear.

      Ended up using another lazyload solution that worked. Super odd. Safari is the new paste eater browser.

  2. Hello,

    Thanks so much for this feature. It’s a lifesaver.

    I’m just wondering. How do I exclude SVG files from being lazy loaded?

    • Hi Rudi-
      In my testing, I wasn’t able to exclude images with the parent div’s class. I’ve reached out to the developers for a solid answer on that for you. I did notice that the Layer Slider Plugin adds a class to its images sp-image that you may be able to use to exclude those images.

  3. Hi there,

    thank you for the article.
    The excluding wrods thing is driving me crazy because I cannot add the class to the element. Is something in a page which cannot be edited at all (or at least I don’t know how to do that).

    On the other hand I found the class of the few images I do not want to lazy load because they are displayed incorrectly with lazy load on.

    I wrote the class into the excluded words section but it does not work. What am I doing wrong?

    Thank you
    Fabrizio

        • Hi again Jesse,

          actually, I do have a problem a gain 😀

          I thought I had solved, but only on Desktop view… on mobile it still shows up.
          My educated guess is that on mobile images take a different class than the one I excluded.

          May I link a page with a problem?

          Thank you
          Fabrizio

          • Hi there thanks but I fixed the problem again 😀

            Just for the sake of the knowledge, for someone who might end up here I’ll share what happened.

            Basically there is this loading=lazy thing that WP applies automatically since one of the last versions.

            No plugin’s fault.

            I downloaded a plugin that nailed it and removed that code.

            Then I re-enabled the lazy loading feature in W3TC, this time finally managing to properly exclude those images both on desktop and mobile.

            Thank you anyway 🙂

          • Hi Fabrizio-

            Yes, you’re right. Since WordPress 5.5, WordPress adds the loading=”lazy” tag, which is implemented by browsers rather than a plugin or any other code. Good catch!

  4. I am observing a detail with Lazy loading on my website, in some Elementor widgets, specifically for the handling of images they present problems.

    In the widget of the site logo, and in the widget of images, when Lazy loading is activated in the general settings, the images of these widgets are not delivered to the users (browsers) who enter the pages where they are used, they are lost totally. It is not a broken link, nor is a table displayed with a missing component.

    The way I solved it was by leaving Lazy loading deactivated; although it is not a major affectation, if the benefit of this characteristic is lost.

    Regards

    • Hi Rafael-
      You should still be able to take advantage of Lazy Loading by adding the class “skip-lazy” to your affected Elementor images.

  5. I have installed W3 Total Cache and it appears to work well for my page speed scores (although they still need improving!). One issue though is that the *mobile* menu appears to be in a half loaded (greyed out) state until I scroll further down the page. Is it possible to exempt this module (I am using Divi) from the lazy load? I assume that is what is happening at least.

    I do not appear to have the settings above and do not know what I would include in the option to exempt the menu bar. (I am not that experienced in CSS!!!)

    http://www.bluestamptravel.com

    • I found the extra settings on the user experience page.

      Still not 100% sure how to exclude the module though. Can I just assign a Class ID and use that class ID as the word to exclude from the Lazy Load?

      • Hi Steve-
        Yes, you can add the class skip-lazy to prevent loading a specific image lazily, but for the issue with your mobile menu I don’t think this is what’s causing it to change as you scroll. I noticed that the <div> element that contains your menu has the class et-animation-fade which is using the following CSS to animate the transparency:

        transition: opacity 200ms linear, transform 200ms linear;

        I have to assume that this is caused by design in your theme or possibly in a Divi setting, and the “et” in the class is referring to Elegant Themes.

Leave a Reply

Your email address will not be published. Required fields are marked *