In this article:
- Enabling Lazy Loading for WordPress in W3 Total Cache
- Fine Tuning Your Lazy Loading Configuration in W3 Total Cache
- Lazy Loading in WordPress FAQs
- How do I exclude an image from Lazy Loading?
- How do I exclude SVG files from being lazy loaded?
- What’s the difference between Lazy Loading in Core and Total Cache?
- Lazy Load Google Maps
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.
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.
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.