Articles on: Features

Lazy load images

Images usually contribute 90% of a website's size. Preventing loading on unwanted images that are not required for initial render can significantly improve performance.

By enabling lazy loading, images will be loaded only on demand when they're nearby the viewport.

Compatibility



If you're using any other performance optimization plugin, disable lazy loading images in that plugin to prevent conflicts. Similarly, turn off lazy loading images in your theme setting if there are any.

Exclude Images



If you have an image in the above fold, it's better to exclude the images from lazy loading. Excluded images will be loaded on high priority by the browser.

Let's take a sample image:

<img src="https://example.com/wp-content/uplaods/2024/02/cat.png" class="featured-image"/>


You can use "cat.png" or "featured-image" to exclude the above image.




Lazy Load Background Images



To lazy load background images, simply add lazy-bg CSS class to the corresponding element.

Updated on: 29/05/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!