How To Lazy Load Images + Videos In WordPress (the easy way)

WP Rocket

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.

Lazy Load Images WP Rocket

 

2. SG Optimizer

SiteGround

[…]

 



This article was written by Tom Dupuis and originally published on Tom Dupuis.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top