Skip to main content

How to Set Up WordPress Lazy Loading (Native + Plugins)

Looking for the best way to set up WordPress lazy loading for images, videos, comments, or other parts of your site?

Lazy loading is a popular performance optimization tactic that lets you speed up your WordPress website by waiting to load “below-the-fold” images, videos, etc. until a visitor starts scrolling down. That is, it only loads content that’s needed for the “visible” portion of a visitor’s screen and waits to load everything below that until the user starts scrolling down.

As of WordPress 5.5 (released in August 2020), WordPress now includes native browser lazy loading for most images, which means that WordPress will automatically lazy loading images in your content. Well…kind of.

The actual situation is a little more complicated than that and, depending on your needs, you still might want to use a WordPress lazy load plugin, especially if you want to lazy load your videos or comments.

To help you understand and configure WordPress lazy loading, I’m going to do two things in this post:

  1. I’ll explain the WordPress native lazy loading feature, how it works, and some of its limitations.
  2. I’ll share some of the best WordPress lazy loading plugins that can address those limitations if needed.

How Does WordPress Native Lazy Loading Work?

Again, as of August 2020 and WordPress 5.5, WordPress now supports something called native lazy loading in the core WordPress software.

Native lazy loading is a feature that many web browsers have built directly into the web browser software. With native lazy loading, all you need to do is mark an image as “lazy” and the web browser will handle native lazy loading for you. It’s super simple and it means you don’t need to use any JavaScript (which is the “previous” method of lazy loading).

To tell a web browser to lazy load an image, all you need to do is add this code to the img tag – loading=”lazy”.

That’s important because, as of WordPress 5.5, WordPress will automatically add this code for you. It will add it to any images that have a specified height/width, which works for pretty much any image that you add via either the WordPress block or classic editors.

More specifically, it includes images in:

  • The body of the content
  • An excerpt
  • A widget

It also includes avatar images.

Pretty cool, right? So does that mean you no longer need a dedicated WordPress lazy load plugin? Well, not quite…

The Problem With WordPress Native Lazy Loading

The big problem with native lazy loading is that not all browsers currently support it, at least as of October 2020.

As of October 20, 2020, Can I Use reports that only ~75% of users have a browser that supports native lazy loading. The most notable holdout is Safari. Safari does have native lazy loading, but users need to proactively enable it in the advanced experimental features, which most people won’t do.

It’s likely that Safari will add core support sometime in the future. However, for now, this means that 25% of your visitors won’t benefit from lazy loading if you rely on just the built-in WordPress lazy loading feature.

Additionally, WordPress’ native lazy loading feature is currently only for images. However, lazy loading is also super important for videos and other iframes. So if you want to easily lazy load those elements, you’ll need a plugin.

Why Use a Lazy Loading Plugin?

Again, there are two reasons you still might want to use a dedicated lazy loading plugin:

  1. You want full coverage for your lazy loading. With a lazy loading plugin, you can make sure 100% of your visitors benefit from lazy loading, whereas the native lazy loading feature currently only reaches ~75% of users.
  2. You want to lazy load more than images. While the native lazy loading attribute does support iframes (e.g. video embeds, map embeds, etc), WordPress doesn’t currently add it to iframes. So if you want to lazy load videos, you need a plugin (unless you want to manually add the loading=”lazy” attribute). You can also add lazy loading to some comments systems, like Disqus or Facebook Comments.

How to Disable WordPress Native Lazy Loading

Side note, while this post is generally about enabling WordPress lazy load, I do think it’s worth a quick mention that you can also disable the new native lazy loading feature in WordPress 5.5 if you’re going to use a dedicated lazy load plugin.

You can either use the free Disable Lazy Loading plugin from Jeff Starr or add this code snippet to your child theme’s functions.php file or a plugin like Code Snippets:

add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );

Five Best WordPress Lazy Load Plugins

If you’ve decided that you’d prefer to go with a lazy load plugin for WordPress, here are your best options…

1. Lazy Load

Lazy Load WordPress plugin

Lazy Load is a creatively named free plugin from the WP Rocket team.

It’s lightweight, uses no jQuery, and supports virtually all images and iframes.

Another great feature is the ability to replace YouTube iframes with a static preview thumbnail image. Your site will only need to load the full iframe if a user clicks on the image to play the video. This is a great strategy if you use a lot of YouTube videos embeds on your site.

All in all, just a really lightweight plugin that works.

Side note WP Rocket also includes all of these features in the full WP Rocket plugin, as well. If you want a complete solution to optimize your site’s speed, this is a great option. Check out our full WP Rocket review to learn more.

Price: 100% free

Get Lazy Load

2. a3 Lazy Load

a3 lazy load plugin

By the numbers, a3 Lazy Load is the most popular lazy loading plugin at WordPress.org. It supports lazy loading for both images and iframes/embeds.

You also get a lot of settings for controlling how the lazy loading works. For example, you can tell the plugin when you want it to start loading content. You can also exclude certain content from being lazy loaded by adding a special CSS class.

Other useful features include:

All in all, A3 Lazy Load is a good option if you want something that’s really customizable.

Price: 100% free

Get A3 Lazy Load

3. Lazy Load for Videos

Lazy Load WordPress videos plugin

As the name suggests, Lazy Load for Videos is mainly focused on helping you add lazy loading for videos from sources such as YouTube or Vimeo. This makes it a good option to pair with the native lazy loading for images that’s in the WordPress core.

The plugin replaces embedded videos with a static clickable thumbnail. It will only load the full video when a user clicks on the preview image to play the video. You also get some options to configure how the YouTube embeds work, like which player features to use.

All in all, a good option if you’re mainly focused on lazy loading videos in WordPress.

Price: 100% free

Get Lazy Load for Videos

4. Lazy Load for Comments

Lazy Load Comments plugin

Lazy Load for Comments is a useful free plugin that lets you lazy load the native WordPress comments section.

If you have large comments sections, this can speed up your page load times. This is especially true if you’re using Gravatar for avatar images, as that can lead to a lot of external HTTP requests for large comments sections.

The same developer also has separate plugins that can help you lazy load Disqus comments or Facebook comments:

Price: 100% free

Get Lazy Load for Comments

5. Perfmatters

Perfmatters WordPress lazy loading plugin

I’m adding Perfmatters last because it only comes in a premium version and it does a lot more than lazy loading.

It’s a full-service performance plugin that helps you implement pretty much everything except page caching. It also includes a really neat script management tool that lets you conditionally load scripts on certain pages.

I’m getting away from myself, though, because this post is supposed to be about lazy loading.

Perfmatters does indeed include lazy loading for both images and iframes/videos. It also has that neat feature to replace YouTube embeds with a static preview thumbnail. To enable either feature, all you need to do is tick a toggle.

Price: From $24.95 for use on a single site

Get Perfmatters

Start Lazy Loading WordPress Today

Lazy loading is a great tactic to speed up your WordPress site.

As of WordPress 5.5, WordPress has built-in support for native browser lazy loading for images. However, you still might want to use a lazy load plugin if you want to lazy load more than images (e.g. videos and iframes) and/or if you want to make sure all your visitors benefit from lazy loading (because Safari currently doesn’t enable this feature by default).

If you’re not sure where to get started, going with the simple Lazy Load plugin from the WP Rocket team is probably your best bet. Or, you can use a3 Lazy Load if you want some more options.

Do you still have any questions about setting up lazy loading for WordPress? Ask us in the comments!

Wp-dd.com

WordPress Design, WordPress Development, cPanel Hosting, Web Design, Web Development, Graphic Design, Mobile Development, Search Engine Optimization (SEO) and more.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.