In this article:
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.
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 now and see for yourself, the performance increases will amaze you.
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.