Lazy image loading in WordPress 5.5

Lazy Image loading is now available from WordPress 5.5!

What is lazy loading?

When a web page is downloaded by a user for viewing, all the resources including text, images, videos, styling, etc are downloaded, cached by the web browser and presented in one go. This takes time and bandwidth to do. It might only take a few seconds, but if the user has a slower connection, for example, a slow mobile connection (which actually happens often), this could take enough time for the user to notice the wait time. The last thing you want is for the user to browse away from your web page before it finishes loading.

With lazy loading, a web page can be coded in a way that it only downloads the minimum resources necessary and pages are created with placeholder content which is only replaced with actual content when the user needs it. This way the page is presented to the user faster.

The following youtube video shows what this looks like. As you will see, the images only load as the user scrolls down the page.

What are the benefits of lazy image loading?

There are two main benefits to lazy image loading:

1. Performance and load times – with images only loaded when they are needs, less data needs to be transferred and this means less data taking up the bandwidth. This all results in an improved performance and load time.

2. Cost efficiency – often there is a cost associated with every byte that is transferred to the user. If you are limiting the number of bytes being transferred this can result in a significant reduction in costs. This is particularly the case for web pages with many images.

How do I implement lazy image loading for my web pages?

If you already using WordPress then all you need to do is ensure that you update to at least version 5.5. Lazy image loading will then be implemented by default.

Need Help?

BSharp Tech can assist with managing your WordPress site, including upgrading it to the latest version and keeping it updated. Please refer to our WordPress Site Management service for more information.

BSharp Tech can also assist with updating any existing non-WordPress or migrating it to WordPress. Please make contact with us to discuss your requirements.

References

• Google (2020), Fix lazy loading content, https://developers.google.com/search/docs/guides/lazy-loading
• Johnson, Justin (2017), What is Lazy Loading? , https://blog.stackpath.com/glossary-lazy-loading/
• Mullenweg, Matt (2020), WordPress 5.5 “Eckstine”, https://wordpress.org/news/2020/08/eckstine/
• Nanwani, Rahul (2018), Lazy Loading Images – The Complete Guide, https://imagekit.io/blog/lazy-loading-images-complete-guide/