Lazy images can be used to resolve “Defer Offscreen Images” warnings in Google Page Speed Insights.
Offscreen images are images that display “below the fold” (beyond the end of your screen), so they are not needed in the initial page load. Deferring the load of offscreen images can significantly improve page load time, since images tend to be the largest files on our sites.
Working with ads
You’ll want to check with your ad management company to confirm that lazy loading for images can be used on your site without interfering with ads.
Ad management companies who approve the use of lazy loading for images:
- Mediavine
- AdThrive
- Grateful
Note: unless your ad management company advises you otherwise, you’ll want to avoid enabling lazy loading for iframes as this setting can interfere with ads.
Enabling lazy load
Lazy load is easily enabled with the help of a plugin, although some custom code can improve the functionality of these.
Lazy Load by WP Rocket
Although WP Rocket has this feature built in, if you don’t pay for their premium plugin you can still take advantage of this feature by using a free version:
Note that this plugin will capture all of your in-content images but may miss images in your header, sidebar, footer, or any other widget-based location. Those images are added with a different function and need some custom code to enable lazy loading through this plugin.
LiteSpeed Lazy Load (on specific hosts)
Note that LiteSpeed support staff is currently investigating why their lazy load images aren’t displayed until after ads have downloaded, leading to significant display delays. Therefore, we currently recommend all clients use Lazy Load by WP Rocket.
If your host has you set up with LiteSpeed, your LiteSpeed plugin has built-in lazy loading. This can be enabled by going to LiteSpeed > Settings > Media > Lazy Load Images.
Right now, the only major host in the food blogging space that uses LiteSpeed on their servers in Charles at WPopt.
Using a transparent placeholder
Copy the following into the “Lazy Load Image Placeholder” section:
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7Fading images in
Litespeed provides some CSS to fade in images. Copy/paste this into the WordPress Customizer to enable.