Improve loading times with lazy loading of images

There are a number of different ways to improve a website’s loading times. One of these is to use what is called “lazy loading” of images. In today’s article, we explain the meaning of the concept, its advantages, and give tips on how to easily implement it.

What is lazy loading of images?

By using lazy loading of images, only the resources visible on the visitor’s screen are loaded. The others are only loaded when needed—that is, when the visitor scrolls down to those elements on a page.

What are the advantages of lazy loading images?

The advantage of using lazy loading is that a page with a large number of images can reach a state where it is perceived as fully loaded by the visitor much faster. This is important for generating the best possible user experience—which in turn can reduce bounce rates, increase time spent on the page, and even improve conversion rates.

How do you implement lazy loading of images?

First of all, I’d like to point out that there is more than one way to implement lazy loading of images on a page.

The method I recommend, however, is very simple and based on standard HTML code.

You simply add loading=”lazy” to the current code string for each image.

• Code example for an image without lazy loading:

<img src=”image_name.jpg” alt=”any alt-text”>

• Code example for an image with lazy loading:

<img loading=”lazy” src=”image_name.jpg” alt=”any alt-text”>

With this simple action, your images will only be loaded when they are relevant to display, which will make a big difference for all of you with image-heavy websites.

However, be careful NOT to implement lazy loading for images that are visible at the top of a page without scrolling. There is no reason to use this feature for those images, as they should be included in the initial rendering of the page.

Also note that WordPress should be updated to the latest version of the CMS to ensure everything works as intended.