Configuring Lazy Loading for your WordPress Website with W3 Total Cache

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, our WordPress Caching Plugin, lazy loading can be configured pretty easily. The impact it can have on your website performance can be huge and greatly improve Core Web Vitals and speed up WordPress.

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.

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.

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, one of the best WordPress cache plugins, 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.