Do you want to learn how to use lazy load images in WordPress?
What is WordPress Lazy Load Images?
Contents
Lazy Load displays images and/or iframes on a page only when they are visible to the user. This reduces the number of HTTP requests mechanism and improves the loading time. You can lazy load thumbnails, all images in a post content or in a widget text, avatars, smilies and iframes.
Lazy loading allows your website to only load images when a user scrolls down to a specific image, which reduces website load time and improves website performance.
Most popular sites that are image heavy use lazy loading to boost website speed and performance.
How does lazy loading for images work?
Instead of loading all your images at once, lazy loading downloads only the images visible on the user’s screen. It replaces all other images with a placeholder image or blank space.
As a user scrolls down, your website loads images that are visible in the browser’s viewing area.
Lazy loading can be very beneficial to your WordPress blog.
- It reduces the initial web page loading time, so users will see your site faster
- It conserves bandwidth by only delivering images that are viewed and can save on hosting costs
- The release of WordPress 5.8 added lazy loading as a default feature.
However, if you want to customize how your images lazy load, and lazy load background images, then you’ll need to use a WordPress plugin.
We’re going to share two different WordPress plugins that can help you easily set up lazy loading for WordPress images.
Best Lazy Load Images Plugins in WordPress
Lazy Load Images in WordPress Using WP Rocket
We recommend using the WP Rocket plugin to lazy load images in WordPress because It’s the best WordPress caching plugin in the market and you can easily turn on image lazy loading. it’s a very powerful plugin that helps you optimize your website speed without knowing complex technical terms.
Lazy Load Images in WordPress Using Smush
This method uses the free Smush plugin. It’s one of the best WordPress image compression plugins and lets you easily enable image lazy loading.
If you get over 4000 visitors per month, then you’ll need the premium version.
First, you need to install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, go to WordPress Dashboard » Smush Pro and then you need to sign up for an API key.
Simply click the ‘Register & Email API key’, and it will be emailed to you.
Then, enter your API key and click ‘Connect to Smush Service’.
After that, click on the ‘Settings’ tab.
Here you can make sure the’ Scale images and & Lazy load’ setting is enabled. This will generate images based on your visitor’s screen size and improve loading speeds.
Next, click on the ‘Advanced’ menu option and select ‘Lazyload’.
On this screen, there are a few different settings that let you customize how your images will lazy load.
Another setting you can enable is lazy loading embedded videos and iframes. If you have a lot of embedded video content, then you’ll want to turn on this setting.
This will load a placeholder image in place of the video. When it’s clicked the full video will load.
You can continue to customize these settings and see what works best for your website and your images.
Lazy Load Images in WordPress with Optimole
This method uses the free Optimole plugin. It’s one of the best WordPress image compression plugins and lets you easily enable image lazy loading.
If you get over 5,000 visitors per month, then you’ll need the premium version. Upon activation, go to Media » Optimole and then you need to sign up for an API key. Simply click the ‘Register & Email API key’, and it will be emailed to you.
Then, enter your API key and click ‘Connect to Optimole Service’. After that, click on the ‘Settings’ tab.
Here you can make sure the’ Scale images and & Lazy load’ setting is enabled. This will generate images based on your visitor’s screen size and improve loading speeds. Next, click on the ‘Advanced’ menu option and select ‘Lazyload’.
On this screen, there are a few different settings that let you customize how your images will lazy load.
First, you can adjust the ‘Exclude first number of images from lazyload’ setting. This will stop images at the top of your posts or pages from lazy loading, so images above the fold will always appear.
You can set this to 0 if you want every image to lazy load.
Next, you can enable the ‘Scale Images’ slider. This will scale images to the visitor’s screen size and make your page load faster.
After that, you can turn on the ‘Enable lazyload for background images’ setting. This will lazy load your background images, which can be some of the largest images on your website.
Another setting you can enable is lazy loading embedded videos and iframes. If you have a lot of embedded video content, then you’ll want to turn on this setting. This will load a placeholder image in place of the video. When it’s clicked the full video will load.
You can continue to customize these settings and see what works best for your website and your images.
Before you exit the plugin settings, make sure to click the ‘Save changes’ button.
If you have any issue on this, you can use our comment session or join our delegate on facebook to solve any issues related to WordPress and subscribe to our YouTube Channel for WordPress video tutorials.