How to Lazy Load in WordPress (Images & Videos)

If you’re a website owner, you’ve likely thought about site speed at least once in the past. After all, Google considers speed when determining where to place sites in search results. So, if your site is slow to load, you’re at a disadvantage when it comes to ranking. And we all know that higher rankings lead to more traffic.

So, how do you make sure your WordPress site is loading as quickly as possible? One way is to lazy load your images.

Lazy loading is a technique that delays the rendering of images and videos until they’re needed. Implementing this can speed up your site considerably, and the great news is that you don’t need to be a developer to put this to work.

Today, we’ll show you how to lazy load images and videos in WordPress using two methods: with a plugin and without.

What is lazy loading?

Lazy loading is a common technique used to improve page speed. The idea is simple: instead of loading all images on a page when a visitor first arrives, it only renders the images that are visible. Then, as the visitor scrolls down the page, more images are loaded as needed.

This means that if a visitor never scrolls down to the bottom of a page, images below the area of the page viewed are never loaded. Thus, lazy loading can save precious milliseconds (or even seconds) off your page load time.

Additionally, lazy loading can also help you conserve bandwidth. This is especially important if you have people who visit your site on a mobile device. By deferring the loading of images and videos that are not visible, you can decrease the amount of data used.

How does lazy loading work?

In general, lazy loading works in one of two ways. WordPress, starting with version 5.5, adds an HTML5 attribute called “loading.” In this case, the browser handles all parts of the lazy loading process without the need for any extra JavaScript. 

Another method, developed before HTML5’s attribute, is through some creative JavaScript. In this case, an empty placeholder is served upon page load, then JavaScript is used to load images as they come into the viewport. 

Either way, only the images that are needed by the browser are loaded. Other images are loaded once a visitor scrolls down the page. 

There are a few different ways to do this, which we’ll discuss in more detail below. But that’s the gist of how lazy loading works.

What are the benefits of lazy loading?

There are three primary benefits to lazy loading images:

• Increased site speed
• Reduced bandwidth usage
• Better user experience

Increased site speed is usually the primary motivation for implementing lazy loading. By waiting to render unnecessary images, you can decrease your page load time. This is especially true if you have a lot of images on a page, or if your images are large.

Next, lazy loading can help you conserve bandwidth. If visitors never venture down the page, there’s no wasted bandwidth loading images that they’ll never see.

Finally, lazy loading can improve your user experience. This is because visitors don’t have to wait for all the images on a page to load before they can start engaging with your site. 

Does WordPress lazy load by default?

Yes, as of WordPress 5.5, lazy loading is enabled by default automatically upon installation. However, there are some ways to customize the experience that are pretty straightforward and intuitive. We’ll discuss these methods in more detail below.

Should I lazy load my images? Are there drawbacks?

In most cases, lazy loading your images is a great idea if you want to improve your page speed or conserve bandwidth. However, there are some potential drawbacks to consider as well.

Layout shifting

If you lazy load your images, the layout of your page may shift. For example, if you have a sidebar on the right side of your page, and you lazy load an image that’s located within it, the sidebar may move down to make room. This can be very disorienting for your visitors.

As a general rule, using placeholders is recommended to avoid this issue.

Potential hit to SEO

If you don’t do it properly, lazy loading images can cause search engines, like Google, to have trouble indexing them. Content is king when it comes to rankings, and in this case, you could lose valuable chunks.

Your images may no longer appear in search results and, depending on how important the images are in relation to the rest of the page content (like product images for an ecommerce listing), it could tank your regular search rankings as well. 

That said, if you set up lazy loading properly, this won’t be an issue. That’s why, unless you’re a confident developer, your best course of action is to use a lazy loading plugin or stick with the default lazy loading included with WordPress. 

Plugin conflicts

Additionally, lazy loading can cause issues with some WordPress plugins — like plugins that use images to generate social media previews. 

Any time you make changes to your site, you should test them thoroughly to make sure everything is acting as it should. 

And, in case something does go wrong, have a backup of your WordPress site handy for a quick recovery. 

How to enable lazy loading in WordPress

Lazy loading is now enabled by default in WordPress. If you’re not using a modern WordPress iteration (though we recommend you do), or if you want more granular control over the lazy loading process, you can do so using one of two distinct methods: using a plugin or adding code to your site.

1. Lazy load with a plugin

If you’re not an experienced developer, we recommend using a plugin because any time you edit the code of your site, you risk running into issues. Even if you have backups on hand in case you break something, it still may be best to simply use a reputable plugin. 

Jetpack Boost is a free plugin dedicated to helping you gauge and improve site performance. It offers functionality like: 

• Deferring non-essential JavaScript
• Optimizing CSS loading
• Lazy image loading
• Site performance testing

To get started with Jetpack Boost, download it for free from the WordPress plugin directory.

Or, in your WordPress dashboard, go to Plugins → Add New, then search for “Jetpack Boost” and click Install Now. Once installed, click Activate.

Next, go to the new dashboard menu option titled Boost. Then, click Start for free.

On the next page, scroll down to the large toggle that says Lazy Image Loading and turn it on. Now, take a look at your site and make sure that everything’s rendering properly and looks good. That’s it! Lazy loading is good to go with just a few clicks.

If you want to take things one step further and customize your site’s lazy loading, you can do so using code snippets, which you can add to your functions.php file. Or, you can insert them with a functionality plugin.

Here are just a few tasks you can accomplish:

1. Disable lazy loading on certain pages
2. Set a placeholder that displays until the image is loaded
3. Turn off lazy loading for specific images
4. Turn off lazy loading for a specific CSS class

For example, if you want to exclude a CSS class from the lazy loading process, you would use this code:

function mysite_customize_lazy_images( $blocked_classes ) {

    $blocked_classes[] = 'my-header-image-classname';

    return $blocked_classes;

}

add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

For more details, check out the full lazy loading documentation.

2. How to lazy load images in WordPress without a plugin

As we mentioned earlier, WordPress, by default, enables lazy loading for all images that have set dimensions. You don’t need to turn anything on or add any code to do this. However, there may be times that you want to customize how this functionality works.  

For example, let’s say that you don’t want template images to be included. You would add this code to your functions.php file:

function disable_template_image_lazy_loading( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) {
        return false;
    }
    return $default;
}
add_filter(
    'wp_lazy_loading_enabled',
    'disable_template_image_lazy_loading',
    10,
    3
);

Or, perhaps you want to get super granular and turn off lazy loading for specific images. You can do this by assigning an extra image class to each image when added to a page or post and then adding that class to the following code in your functions.php file:

function skip_loading_lazy_image_48_large( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 48, ‘medium’ );
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter(
'wp_img_tag_add_loading_attr',
'skip_loading_lazy_image_48_large',
10,
3
);

To add the image class skip-lazy in the above example to an image: 

1. Add the image to the page or post via the Media Library. 
2. After you’ve added the image, find your image settings. This may appear differently depending on whether you are using the Gutenberg Blocks editor, classic editor, or a site builder plugin. The ability to add a new CSS class is usually found in either the Advanced settings area (Gutenberg and classic editors) or towards the bottom of your image settings options (most other site builders). 
3. Add the class skip-lazy to the image and save your update.

You can learn more about the possibilities in WordPress documentation.

How to lazy load videos in WordPress

If you want to lazy load your videos, you can do so by adding code to the video itself in the post or page. This code should look something like this: 

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">

 <source src="one-does-not-simply.webm" type="video/webm">

 <source src="one-does-not-simply.mp4" type="video/mp4">

</video>

Frequently asked questions about lazy loading in WordPress

Want to learn more about WordPress lazy loading? We’ve answered some frequently asked questions below: 

Is lazy loading and deferring offscreen images the same thing?

Deferring offscreen images means waiting to load images until the rest of the critical, above-the-fold content has loaded. There are several ways to do this, but WordPress sites typically use lazy loading.

Essentially, lazy loading is a method of deferring offscreen images. 

Can I lazy load background images in WordPress?

Yes, you can lazy load background images if you’d like. Jetpack Boost turns on lazy loading for background images. However, depending on how your images are set up, it may not be able to identify all of them. For example, if the image is loaded through the background:url property, the plugin won’t read it as a picture and, therefore, won’t enable lazy loading for it.

In that situation, you can use a tool like Lazy Loader, which will allow you to select the specific background images you want to lazy load.

Can I lazy load a YouTube video?

Yes, you can! To do so, insert the following code snippet from WPOrbit into your theme’s functions.php file. If you’re not sure how to do this, check out our guide to accessing and editing the functions.php file.

<?php
// Do not include the above opening tag.
// WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net

function iframelazy($content) {
        if(is_single()) {
                
        $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content);

	ob_start();
?>
	<script>
	var ytflag = 0;
		
	var myListener = function () {
    	document.removeEventListener('mousemove', myListener, false);
    	lazyloadmyframes();
	};

	document.addEventListener('mousemove', myListener, false);

	window.addEventListener('scroll', function() {
	if(ytflag == 0){
		lazyloadmyframes();
		ytflag = 1;
	}
	});
		
function lazyloadmyframes(){	
	var ytv = document.getElementsByClassName("klazyiframe");
	for (var i = 0; i < ytv.length; i++) {
		ytv[i].src = ytv[i].getAttribute('data-src');
	}
}

</script>
<?php
			
	$jqueryappend = ob_get_contents();
	ob_end_clean();

}

        return $content.$jqueryappend;
}

add_filter('the_content', 'iframelazy');

Does lazy loading impact SEO?

Yes, lazy loading can have a positive impact on your search engine rankings. Google considers site speed when deciding where pages rank in search results. And since lazy loading improves performance, it can also increase Google’s perception of your site.

If you do it manually, instead of using a lazy loading plugin, and make a mistake, it can have a negative impact on SEO by hindering search engines’ abilities to recognize your images. 

Does lazy loading impact user experience?

Yes, lazy loading can improve your user experience because it reduces your site’s load time, while still ensuring that visitors can view your content right away. This, in turn, can improve their perception of your brand.

Do I need a plugin to lazy load my content?

No, you don’t need a plugin to lazy load your content. Lazy loading is enabled in WordPress by default. However, if you want more control over the lazy loading process, you may want to use a plugin. Here’s a selection of the best lazy load plugins for WordPress.

Is there a downside to lazy loading content?

There aren’t many downsides to lazy loading content. It improves your speed, user experience, and search engine rankings. However, it can occasionally cause odd shifting in your page layouts. Therefore, you should always test your site after enabling lazy loading.

Do I need to lazy load all my content?

No, you don’t need to lazy load all your content. You can choose to lazy load only specific elements, such as images, videos, or iFrames.

What else can I do to improve loading speeds?

In addition to lazy loading, there are a number of other ways you can improve the speed of your WordPress site, including:

• Using a content delivery network (CDN)
• Focusing on improving the same things that also improve Core Web Vitals.
• Optimizing your images
• Enabling browser caching
• Minifying resources

Speed up your site with WordPress lazy loading

Lazy loading your images is a great way to optimize your site’s performance and improve your overall user experience. Jetpack Boost offers the most convenient and robust way to enable lazy loading, while also providing other powerful speed tools. Ready to get started? Get Jetpack Boost!

---