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.
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.
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.
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.
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.
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.
4. Litespeed Cache
Litepseed cache’s lazy loading will also do the job (Litespeed is well-reviewed 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.
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.
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.
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.
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).
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).
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.
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.
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.
9. A3 Lazy Load
A3 Lazy Load supports lazy loading of both images and videos.
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.
10. BJ Lazy Load
BJ Lazy Load doesn’t seem to be well-maintained, so I would probably use another 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.
11. Lazy Load For Images
Lazy Load For Images is good if you only want to do it for images.
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.
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.
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.
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.
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.
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.
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!
Cheers,
Tom
span,.wp-review-60139.wp-review-percentage-type .review-list li>span{display:inline-block;position:absolute;z-index:1;top:32px;left:45px;color:#ededed;font-size:14px;line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.3);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.wp-review-60139.wp-review-point-type .wpr-user-features-rating .review-list li>span,.wp-review-60139.wp-review-percentage-type .wpr-user-features-rating .review-list li>span{color:inherit;text-shadow:none}.wp-review-60139.wp-review-point-type .wpr-user-features-rating .review-list li .wp-review-input-set+span,.wp-review-60139.wp-review-percentage-type .wpr-user-features-rating .review-list li .wp-review-input-set+span,.wp-review-60139.wp-review-point-type .wpr-user-features-rating .review-list li .wp-review-user-rating:hover+span,.wp-review-60139.wp-review-percentage-type .wpr-user-features-rating .review-list li .wp-review-user-rating:hover+span{color:#fff}.wp-review-60139 .review-list li:nth-child(even){background:#fff}.wp-review-60139 .review-links{padding:30px 30px 20px 30px}.wp-review-60139.review-wrapper .review-result-wrapper i{font-size:18px}#review.wp-review-60139.review-wrapper .review-pros-cons{clear:both;padding:0;border-top:1px solid #fff}#review.wp-review-60139.review-wrapper .review-pros-cons .review-pros,#review.wp-review-60139.review-wrapper .review-pros-cons .review-cons{width:100%;flex:none;padding:0}#review.wp-review-60139.review-wrapper .review-pros-cons .review-pros{background:#2c3fd3;padding:30px 30px 10px 30px;color:#fff;box-sizing:border-box}#review.wp-review-60139.review-wrapper .review-pros-cons .review-cons{background:#5e1d9a;padding:30px 30px 10px 30px;color:#fff;box-sizing:border-box}.wp-review-60139.review-wrapper .mb-5{text-transform:uppercase}.wp-review-60139.review-wrapper .mb-5+p{line-height:26px}.wp-review-60139 .user-review-area{padding:15px 30px;border-top:1px solid}.wp-review-60139 .wp-review-user-rating .review-result-wrapper .review-result{letter-spacing:-2.35px}.wp-review-60139.review-wrapper .review-title{letter-spacing:1px;font-weight:700;padding:15px 30px;background:transparent}.wp-review-60139.review-wrapper .review-total-wrapper{width:40%;margin:0;padding:35px 0;color:#fff;background:#ededed;border-left:1px solid;text-align:center;float:right;clear:none;border-top:1px solid}.wp-review-60139.review-wrapper .review-list{clear:none;width:60%;float:left;border-top:1px solid}.wp-review-60139.review-wrapper .wpr-user-features-rating,.wp-review-60139.review-wrapper .wpr-user-features-rating .review-list{width:100%;clear:both;border-top:1px solid #fff}.wp-review-60139.review-wrapper.wp-review-circle-type .review-total-wrapper{padding:20px 0}.wp-review-60139.review-wrapper.wp-review-circle-type .review-total-wrapper .review-circle.review-total{margin:auto 0;padding-top:10px;width:auto;height:100%;clear:both}.wp-review-60139.review-wrapper.wp-review-circle-type .user-review-area{padding:12px 30px}.wp-review-60139.review-wrapper.wp-review-thumbs-type .review-list{width:100%}.wp-review-60139.review-wrapper .review-result-wrapper{border-radius:25px}.wp-review-60139.review-wrapper .review-percentage .review-result-wrapper,.wp-review-60139.review-wrapper .review-percentage .review-result,.wp-review-60139.review-wrapper .review-point .review-result-wrapper,.wp-review-60139.review-wrapper .review-point .review-result{height:26px;margin-bottom:0;background:#fff;border-radius:25px}.wp-review-60139.review-wrapper li .review-point .review-result{background:#5e1d9a}.wp-review-60139.review-wrapper li:nth-of-type(2n) .review-point .review-result{background:#2c3fd3}.wp-review-60139 .review-total-wrapper .review-point.review-total,.wp-review-60139 .review-total-wrapper .review-percentage.review-total{width:70%;display:inline-block;margin:20px auto 0 auto}.wp-review-60139.review-wrapper .review-total-wrapper .review-total-box{float:left;text-align:center;padding:0;color:#424242;line-height:1.5}.wp-review-60139.review-wrapper .review-total-wrapper .review-total-box h5{margin-top:10px;color:inherit}.wp-review-60139.review-wrapper.wp-review-point-type .review-total-wrapper .review-total-box,.wp-review-60139.review-wrapper.wp-review-percentage-type .review-total-wrapper .review-total-box{width:100%}.wp-review-60139.review-wrapper .review-star.review-total{color:#fff;margin-top:10px}.wp-review-60139.review-wrapper .user-review-title{padding:15px 30px 10px;margin:0;color:inherit;background:#fff;border-top:1px solid;border-bottom:1px solid}.wp-review-60139.review-wrapper .user-total-wrapper .user-review-title{display:inline-block;color:#424242;text-transform:uppercase;letter-spacing:1px;padding:0;border:0;background:transparent;margin-top:3px}#review.wp-review-60139.review-wrapper.wp-review-circle-type .user-total-wrapper h5.user-review-title{margin-top:12px}#review.wp-review-60139.review-wrapper.wp-review-circle-type .user-total-wrapper span.user-review-title{margin-top:8px}.wp-review-60139.review-wrapper .reviewed-item{padding:30px}.wp-review-60139.review-wrapper.wp-review-circle-type .review-total-wrapper>.review-total-box{display:block}.wp-review-60139.review-wrapper.wp-review-circle-type .review-total-wrapper>.review-total-box>div{display:none}#review.wp-review-60139.review-wrapper .user-review-area .review-percentage,#review.wp-review-60139.review-wrapper .user-review-area .review-point{width:20%;float:right;margin-bottom:5px}.wp-review-60139 .review-embed-code{padding:10px 30px}.wp-review-60139.review-wrapper,.wp-review-60139 .review-title,.wp-review-60139 .review-list li,.wp-review-60139 .review-list li:last-child,.wp-review-60139.review-wrapper .review-list,.wp-review-60139 .user-review-area,.wp-review-60139.review-wrapper .review-total-wrapper,.wp-review-60139 .reviewed-item,.wp-review-60139 .review-links,.wp-review-60139 .wpr-user-features-rating,.wp-review-60139.review-wrapper .user-review-title{border-color:#fff}.wp-review-60139 .wpr-rating-accept-btn{background:#5e1d9a;margin:10px 30px;width:-moz-calc(100% – 60px);width:-webkit-calc(100% – 60px);width:-o-calc(100% – 60px);width:calc(100% – 60px);border-radius:50px}@media screen and (max-width:480px){.wp-review-60139.review-wrapper .review-title,.wp-review-60139.review-wrapper .reviewed-item,.wp-review-60139.review-wrapper .review-list li,.wp-review-60139.review-wrapper .review-desc,.wp-review-60139.review-wrapper .user-review-area,.wp-review-60139.review-wrapper .review-embed-code{padding:15px}.wp-review-60139.wp-review-circle-type .review-list li{padding:15px 15px 0 15px}.wp-review-60139.review-wrapper .review-pros-cons>div>div{padding:15px;padding-top:0}.wp-review-60139.review-wrapper .ui-tabs-nav{padding:0 15px}.wp-review-60139.review-wrapper .review-links{padding:15px 15px 5px}.wp-review-60139.review-wrapper .review-list,.wp-review-60139.review-wrapper .review-total-wrapper{width:100%}.wp-review-60139.review-wrapper .review-total-wrapper{padding:10px 0}.wp-review-60139.review-wrapper .review-total-wrapper .review-total-box h5{margin-top:0}.wp-review-60139.review-wrapper .review-total-wrapper .review-total-box div{line-height:1}}]]>
Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2020-01-20 18:53:37.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.