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.
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.
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:
You can use "cat.png" or "featured-image" to exclude the above image.
To lazy load background images, simply add lazy-bg CSS class to the corresponding element.
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
Thank you!