How To Lazy Load Images + Videos In WordPress (And Replace YouTube iFrames With A Preview Image) For Better GTmetrix Results

Home » WordPress Speed Tips & Tricks » How To Lazy Load Images + Videos In WordPress (And Replace YouTube iFrames With A Preview Image) For Better GTmetrix Results

What’s the best way to lazy load images and videos in WordPress?

This depends on whether you’re already using a cache plugin that supports lazy loading (WP Rocket, W3 Total Cache, Swift, LiteSpeed Cache). If your cache plugin supports lazy loading images and videos, it’s best to use that to avoid having to install an extra plugin. But if your cache plugin doesn’t support lazy loading, I recommend using one that does (especially WP Rocket), otherwise I listed alternative lazy loading plugins below you can install individually.

What Is Lazy Loading?
Lazy loading means images and videos are only loaded once users scroll down the page and actually see them. This results in fewer HTTP requests on the page, however if you have lots of images or embedded videos, it does require constantly loading them you scroll down the page.

What Does It Mean To Replace YouTube Iframe With A Preview Image?
If you embed videos on your WordPress site, this only loads the “fat YouTube player” once people click the Play button. In other words, the only thing loaded initially is a preview image.

Should You Lazy Load Images And Videos?
I do not lazy load images because constantly loading images as you scroll down the page can be annoying for users. However, all my images are optimized to 100% in GTmetrix. I do lazy load videos and replace the iframe with a preview image. Since each embedded video can take 2 seconds to load (much heavier than an image), the benefit of lazy loading videos is significant.

 

1. WP Rocket

WP Rocket is my #1 choice for lazy loading and was the #1 cache plugin in Facebook polls.

Since it already has lazy loading built-in, this means you don’t have to install an extra plugin. That is the entire benefit of WP Rocket; it comes with more features than nearly any other cache plugin (resulting in better load times and GTmetrix scores), yet less plugins on your site. WP Rocket has extensive documentation on lazy loading and configuring WP Rocket settings.

WP Rocket

How To Enable Lazy Load In WP Rocket
To enable lazy loading in WP Rocket, go to Settings > WP Rocket > Media > LazyLoad. You can enable it for images, iframes and videos, and replace YouTube iframes with a preview image.

Lazy Load Images WP Rocket

 

2. SG Optimizer

SiteGround introduced lazy loading in their big update of SG Optimizer.

Of course, you have to be a SiteGround customer to use this plugin (which I would do for shared hosting considering they were rated the #1 host in over 20 Facebook polls). SG Optimizer is comparable to WP Rocket, but it doesn’t have with nearly as many features. So if you’re using SiteGround for your host, I would still favor WP Rocket over their SG Optimizer.

SiteGround SG Optimizer

How To Enable Lazy Load In SG Optimizer
To enable lazy loading in SG Optimizer, go to Settings > SG Optimizer > Per Site Defaults > Image Optimization. You can lazy load images, Gravatars, thumbnails, responsive images, and widgets. If you have comments on your blog, lazy loading Gravatars can help tremendously.

SG Optimizer Lazy Loading

 

3. W3 Total Cache

If you’re already using W3 Total Cache, they also have a lazy loading option.

W3 Total Cache was considered abandoned for some time, but the developer has since started to maintain his plugin. I have an extensive tutorial for configuring the W3 Total Cache settings.

W3 Total Cache plugin

How To Enable Lazy Load In W3 Total Cache
To enable loading loading in W3 Total Cache, go to Settings > General Settings > User Experience > Lazy Loading. Toggle this on, then go to User Experience > Lazy Loading. Choose to process HTML image tags, background images, exclude words, and script embed method.

W3 Total Cache Lazy Loading

 

4. Litespeed Cache

Litepseed cache’s lazy loading will also do the job (Litespeed is well-reviewed cache plugin).

LiteSpeed Cache Plugin

How To Enable Lazy Load In LiteSpeed Cache
To enable loading loading in LiteSpeed Cache, go to LiteSpeed Cache > Settings > Media > Media Settings. Here you can enable lazy load images, iframes, exclude images, automatically request optimization via cron job, include Javascript library inline, and toggle other settings.

Lazy Load Images Videos Litespeed Cache

 

5. Swift Performance

Swift Performance is another cache plugin that supports lazy loading. Swift got great reviews in the WordPress Speed Up Facebook Group, but reviews on the WordPress plugin page are only about 4 stars. I haven’t tried out Swift Performance; I’m perfectly happy with WP Rocket.

Swift Performance Lite plugin

How To Enable Lazy Load In Swift Performance
To enable loading loading in Swift Performance, go to Settings > Media > Lazy Load. Here you will have the option to lazy load images, exclude certain images, and inline lazy load images.

Lazy Load Images Swift Performance

 

6. Autoptimize

Autoptimize is often used with hosts like GoDaddy and WP Engine, where they have their own built-in caching system and blacklist cache plugins. In this case (since you want to take care of other speed optimizations), Autoptimize is usually the go-to plugin for that. One of it’s many features is lazy loading, but it also lets you optimize HTML, CSS, JavaScript, and Google Fonts.

Autoptimize plugin

How To Enable Lazy Load In Autoptimize
To enable loading loading in Autoptimize, go to Settings > Images > Lazy Load Images. You also have the option to use ShortPixel’s CDN which for image optimization (this is the plugin I use).

Lazy Load Images Autoptimize

 

7. Smush

Smush is an image optimization plugin that supports lazy loading. It was developed by WPMU, however I personally use ShortPixel for lossless compression since it’s the only one I’ve used that makes my images 100% in GTmetrix (and I have tested many image optimization plugins).

Smush plugin

How To Enable Lazy Load In Smush
To enable loading loading in Smush, go to Smush > Dashboard > Lazy Load. You can choose which files types you want lazy loaded (.jpeg, png, .gif, .svg, iframe), and whether you want it enabled for content, widgets, thumbnails, Gravatars. It even has lazy load animation settings.

Smush Lazy Load

 

8. Lazy Load By WP Rocket

Lazy Load By WP Rocket is good if if you’re not using WP Rocket but want to lazy load images.

Lazy Load Plugin

How To Enable Lazy Load In Lazy Load By WP Rocket
Go to Settings > LazyLoad. You have the option to lazy load images, iframes & videos, and replace YouTube videos by thumbnail. There aren’t many settings to configure; I personally wish there were more. Maybe that’s why this lazy load plugin doesn’t have the best reviews.

Lazy Load By WP Rocket

 

9. A3 Lazy Load

A3 Lazy Load supports lazy loading of both images and videos.

a3 Lazy Load Plugin

How To Enable Lazy Load In A3 Lazy Load
To enable loading loading in A3 Lazy Load, go to settings > A3 Lazy Load. You can configure settings for lazy loading images, videos, iframes, Gravatars, and choose which areas of your website you want lazy loading to apply (including mobile). There’s also options to enable a lazy loading effect, loading background color, and the option to exclude URLs and post types.

a3 Lazy Load settings

 

10. BJ Lazy Load

BJ Lazy Load doesn’t seem to be well-maintained, so I would probably use another plugin.

BJ Lazy Load plugin

How To Enable Lazy Load In BJ Lazy Load
To enable loading loading in BJ Lazy Load, go to Settings > BJ Lazy Load. The settings are relatively simple and give you the option to lazy load images, iframes, Gravatars, and exclude lazy loading from content, text widgets, and post thumbnails. There’s also an option to include a placeholder image, viewport threshold, and use a low-res preview image when lazy loading.

BJ Lazy Load Settings

 

11. Lazy Load For Images

Lazy Load For Images is good if you only want to do it for images.

Lazy Load for Images plugin

How To Enable Lazy Load In For Images
There are no settings to configure in the Lazy Load For Images plugin (it’s automatic).

 

12. Lazy Load For Videos

Lazy Load For Videos replaces embedded videos with a clickable preview images.

Lazy Load for Videos Plugin

How To Enable Lazy Load In Lazy Load For Videos
To enable loading loading in Lazy Load For Videos, go to Settings > Lazy Load For Videos. Choose to only load CSS/JS when needed, customize the play button, and apply custom CSS.

Lazy Load For Videos Plugin

 

13. Lazy Load For Comments

You can lazy load comments using the Lazy Load For Comments plugin.

This can help make fewer HTTPs requests if you have lots of comments on your blog, especially since Gravatars can take a long time to load between all the third party requests.

Lazy Load for Comments Plugin

How To Enable Lazy Load In Lazy Load For Comments
To enable loading loading in Lazy Load For Comments, go to Settings > Discussion > Lazy Load Comments. That is the only setting configuration for this plugin, but it does have good reviews.

Lazy Load Comments

 

14. WP YouTube Lyte

WP YouTube Lyte is one of my favorite (and best reviewed) plugins for lazy loading videos. It was created by the team at Autoptimize which tends to have good plugin reviews all around.

WP YouTube Lyte plugin

How To Enable Lazy Load In WP YouTube Lyte
To enable loading loading in WP YouTube Lyte, go to Settings > WP YouTube Lyte. Grab your YouTube API Key and enter it into Autoptimize. Select your player size, whether to include links, player position, force HD, act as normal YouTube link/iframes, and add microdata. Caching thumbnails locally can often fix GTmetrix errors when embedding YouTube videos.

YouTube Thumbnails GTmetrix

Wp YouTube Lyte Settings

 

Still Need Help?

I have a great video on WordPress speed optimization:

I also have tutorials for optimizing images, configuring WP Rocket, reducing server response times, and more. I’m able to get 100% (or near) GTmetrix scores on nearly every one of my posts using these tips. If you have questions, feel free to drop me a comment – glad to help!

 

Frequently Asked Questions

✅ Which plugin is best for lazy loading images?

If you're already using a cache plugin that supports lazy load (eg. WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed), it's best to try this first. Otherwise, Autoptimize or the Lazy Load plugin by WP Rocket are good lazy load plugins.

✅ What about lazy loading videos?

WP Rocket and some other cache plugins let you lazy load videos and replace the YouTube iframe with a preview image. Otherwise, WP YouTube Lyte will work.

✅ Will lazy loading hurt user experience?

I do not lazy loading images on this website, but I do lazy load videos because they take much longer to load. Lazy loading images can be annoying for users and decreased my affiliate sales, so I disabled it.

✅ What does lazy loading do?

Lazy loading speeds up initial load times by waiting to load images and videos until users scroll down the page and actually see them.

✅ How to deactivate lazy load on specific pages?

Most plugins let you do this. For example, if you're using WP Rocket and you edit a page or post, you will see an option in your dashboard to disable (or enable) lazy load on that specific piece of content.

Cheers,
Tom

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments