A Complete Guide to Add Lazy Load Images & Videos on Your WordPress Site

In this digital age, websites have become crucial for businesses or individuals to establish an online presence. Having a WordPress website is also not enough! It should have feature-rich images & videos. However, incorporating visual media into websites can cause your site to slow down significantly.

Hence, you need a website backed up by visually appealing media, load instantly, and offer a next-gen user experience. And how can you fulfill all of these things? By adding lazy loading functionality to it. 

It improves page speed and reduces the amount of data that needs to be loaded at once. In this blog, we will provide the process of adding lazy load images and videos to your WordPress site, including some plugins and manual methods to achieve this.

Before we move on to that, let’s go through some basics.

What is Lazy Loading in WordPress?

WordPress lazy loading is a technique for optimizing the speed of pages that contain lots of pictures or videos. It works by downloading only the media that needs to be immediately visible to the visitor. The download of any images or videos currently ‘off screen’ is delayed until the visitor scrolls further down the page. So basically, the pictures and movie clips are only downloaded when they are actually needed and not before.

In short, this technique is mainly used to enhance the performance and efficiency of the application by reducing the initial load time and the amount of data that needs to be loaded.
For instance, in a WordPress site, lazy loading can be used to load images, videos, and other content only when the user scrolls to that part of the page instead of loading all the content at once when the page is first loaded. It significantly reduces the initial page load time and improves the user experience.

How Does Lazy Loading Work? 

Lazy loading is useful in web development. It defers the loading of non-critical resources, such loads images & videos visible to the user’s screen, rather than all images simultaneously. The entire media are replaced with a placeholder image or blank space. 

When the user scrolls down to that part of the page, the WordPress site loads the images visible in the browser’s viewing section.

Why Lazy Load Images and Videos on Your WordPress Site?

Page speed is increasingly important. When surfing the web, people are much more impatient than they were twenty years ago and expect content to load virtually instantaneously.

Search engines such as Google and Bing have acknowledged impatience, as they now take account of page speeds when determining page rank. So, in theory, if two websites have identical content, but one has been optimized for speed, that one will rank higher in searches than the unoptimized one.

Article Continues Below

As mentioned earlier, visual media is probably the biggest culprit for slow page loading. Suppose you only have a few basic images that are not high-resolution. In that case, you can probably survive without worrying too much about optimizing for speed, although it is good practice to do so. But if your site has lots of imagery or video content, lazy loading can speed up your WordPress site significantly.

Another advantage of WordPress’s lazy loading is that only the viewed images and movie clips get downloaded, conserving bandwidth. That can save you considerable money on hosting costs if you use a plan that charges based on bandwidth usage.

Now, we will provide different methods to implement lazy loading on your WordPress site. So, let’s start.

How to Add Lazy Loading to Your WordPress Site?

Here, we will look at three simple ways to implement lazy loading into a WordPress website. So, let’s get started.

1. Upgrade to WordPress 5.5 or higher

If you are using WordPress 5.5 onwards, there is good news – those versions automatically add the lazy loading attribute. So, it is no longer necessary to manually mess around with attributes or install plugins, at least for most popular browsers.

Even though it is one of the most straightforward ways, it doesn’t let you configure the images to lazy load. As a consequence, your website might overuse this feature.

2. Lazy Load Images & Videos Natively

If your website runs on WordPress 5.4 or earlier, Google’s Chrome 76 supports native lazy loading – all you need to do is use the <img loading= “lazy”> loading attribute. It works with most Chromium-powered browsers such as Chrome, Opera, Firefox, and Edge.

Below is an example of code incorporating the lazy loading attribute. If you are comfortable doing so, you can just amend, cut, and paste it into your image attributes as necessary:

<img src=”imagefilename.png” loading=”lazy” alt=”alt text of the image” width=”200″ height=”200″>
The inclusion of loading= “lazy” activates lazy loading, so the image (or video) will not download until the actual point where the browser needs to have it ready for display. If you were to replace “lazy” with “eager”, the image would download immediately regardless of where the visitor is on the page in relation to the image.

3. Using the Plugins

Okay, okay, we admit that we just said that WordPress 5.5 onwards automatically deals with lazy loading and that you don’t need to mess around with plugins. But there is a ‘but.’ Two, in fact:

Article Continues Below

• There are still specific browsers, including Safari, which do not support the default WordPress lazy loading. A lazy loading plugin can overcome this issue and ensure that all your site visitors benefit from it, irrespective of their browser.
• While the native lazy loading attribute supports iframes, such as embedded videos, maps, etc., WordPress doesn’t currently add it to iframes. That means in order to lazy load videos, a plugin or the manual addition of the attribute discussed earlier will be necessary.

Therefore, we will now look at some of the available plugin options and what they can do for you. Before we begin on those, however, we strongly suggest you optimize your pictures and videos before uploading them into your WordPress. 
Plenty of guidance is available online on how to do that, or you can use a plugin to do it for you. That said, a couple of the lazy loading plugins we discuss also bundle tools for image optimization, so please read on.

1. Optimole

Like Smush, Optimole is a lazy loader combined with an image optimizer. It has both free and pro versions.

The free version bundles some great features, including: 

• Lazy load without jQuery
• Image compression without losing quality
• Fully automated
• All image types are supported
• Support for Retina and WebP images
• Support for Cloud image libraries
• Serves images from a global content delivery network (CDN) for free
• Responsive image optimization and sizing based on the device used by the visitor, including Retina devices
• No content shifting
• Automatically add watermarks to pictures
• Downgrade image quality when slower connections are detected
• Page builder support

Under the free plan, you can optimize an unmetered number of images for up to 5k monthly visits. For more heavily trafficked sites, upgrading to pro will extend the monthly visits to 50k. It costs $22.52 per month for the starter plan. The business plan costs $46.12 per month with 100k visitors. If you want a heavy business plan, it would cost more. Here are some of the extra features in pro plans.

• Image auto-scale
• Smart lazy loading
• Unmetered Bandwidth
• Around-the-clock email support

Optimole has an average user star rating of 4.8/5.0, and over 80,000 active installs exist.

Get Optimole

2. Smush

With over a million active installs, Smush is the most popular lazy load WordPress plugin for images. But what makes this plugin even more impressive is its inbuilt image optimization tools. So, as well as lazy loading images to your site, you can also easily optimize them without needing other plugins.

The free version of Smush gives you the following great features:

• Lazy load to delay offscreen images until they are required
• Lossless image compression – images quality remains unaffected
• Bulk optimization and compression – up to 50 images at a time
• Image resizing
• Incorrect size image detection to find images that are hindering your site speed
• Optimize images, including those not located in the media library
• Automated optimization
• Optimize PNG, JPEG, and GIF images up to 5MB in size
• Gutenberg block integration to view all statistics directly in image blocks
• Multisite compatible
• Compatible with most themes, plugins, page builders, and media libraries

Smush Pro costs $6 per month or $60 per year. It adds the following extra features:

Article Continues Below

• 2x image compression
• Optimize unlimited images
• Option to store original images as backups
• Auto-resize and scale
• WebP support
• Auto-convert PNG images to JPEG
• Compress larger images (>5MB)
• Support

 You can trial Smush Pro for free for seven days, although in our opinion, the free version would be ample for most people unless you have lots of huge images to manage. The plugin has an impressive average user rating of 4.8/5.0 stars and over 1 million+ active installations.

Get Smush

3. a3 Lazy Load

a3 Lazy Load is a highly popular lazy load WordPress plugin, with over 100,000 active downloads and an average user rating of 4.3/5.0 stars. It supports lazy loading for images and iframes/embeds. It also gives a level of control over how the lazy loading functions, e.g., when the content should begin loading, exclude certain content from being lazy loaded, etc.

a3 Lazy Load is a free plugin, but that does not mean it lacks excellent features:

• Select whether or not to load all images that are not loaded from the WordPress. media library in posts, pages, custom post types, widgets, post thumbnails, and Gravatars.
• Support for images in containers that use the horizontal scroll.
• Lazy load for videos embedded by URL in posts and pages in all content areas and & widgets.
• Supports content added by iframe from any source that the WordPress core does not load, e.g., WordPress embedded media, Facebook ‘like’ boxes, ‘like’ or ‘recommend’ buttons, Google+ profile, and Google Maps.
• Compatible with WordPress embed post on any site feature.
• WebP images support.
• Lazy load effects: FADEIN, SPINNER, custom pre-load background color
• Exclude any images or videos by class name from applying the lazy load effect.
• Noscript fallback if a user has JavaScript turned off in their browser
• Compatible with any WordPress theme that follows the WordPress Theme Codex, and many plugins.

Those features should be sufficient for most users wishing to ensure that their site lazy loads on all browser types while adding a level of control over it.

Get a3 Lazy Load

4. Lazy Load for Videos

You will probably have already guessed from the name that Lazy Load for Videos is a plugin that adds lazy loading to Vimeo or YouTube videos embedded into your website. It is ideal for extending the native image lazy loading built-in to WordPress to include videos.

The plugin works by replacing embedded videos with static, clickable thumbnails. Loading of the full video only commences upon clicking the thumbnails. You can configure how the embeds work, for example, by specifying which player features to use.

Another cool feature of Lazy Load for Videos is the pre-roll and post-roll advertisements. It allows you to convert all videos into a playlist. You can then automatically add your own corporate video, a product teaser, or some other video advertising material to every video in that playlist – perfect for branding and video advertising.

Lazy Load for Videos is entirely free, but despite that, it still gives you great functionality, including:

• Option to display video titles on the preview thumbnails.
• Select from standard or cover thumbnail sizes.
• Add a GDPR compliance privacy disclaimer on top of previews.
• Ability to suppress annotations like “subscribe to channel”.
• Option to hide YouTube player controls and information such as video title and uploader on commencement of video playback.
• Lazy load YouTube videos in text widgets.
• Select from different styles of the play button.
• It displays a red or white progress bar for YouTube and custom color for the Vimeo player.
• Option to not show related videos at the end of videos.
• Custom CSS ready.
• Multisite compatible.

Impressively, over 10,000 active installs of Lazy Load for Videos are in operation, and it has gained a user rating of 4.5/5.0 stars. It’s a great way of boosting your page speed for free if you have many videos embedded in your site.

Get Lazy Load for Videos

5. Lazy Load for Comments

While images and videos are probably the biggest offenders when it comes to slowing down sites, visitor comments also can cause issues. This is particularly true when you have a hugely popular website with very active comment sections. Things get even worse when using Gravatar for avatar images, as that can lead to many external HTTP requests battering your page speed further.

Key features of Lazy Load for Comments include:

• Comments load only when they are required, which improves page loading speed
• Reduced number of HTTP requests
• Gravatars are lazy-loaded
• Genesis and Divi support
• Translation ready
• Simple configuration
• Hooks for developers

Lazy Load for Comments is a completely free plugin that scores a very respectable 4.8/5.0 stars with users, and over 5,000 active installs from the WordPress plugin directory exist. So, if you have lots of large, speed-sapping comments sections on your website, we highly recommend you consider using this plugin.

Get Lazy Load for Comments

Incidentally, also available from the same developer is Lazy Social Comments. That is very similar to Lazy Load for Comments, except it is specifically for Facebook comments.

Please note that although this post focuses on enabling lazy load in WordPress, you may be asking, “how do I get rid of lazy loading in WordPress?” when you encounter conflicts between your plugin and the native WordPress lazy loading. Disabling the native WordPress lazy loading can easily be done by:

• Using a free plugin such as Disable Lazy Loading, or
• Adding 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’);

If in doubt, refer to the plugin’s user documentation or check with the developer whether or not disabling the native lazy load is necessary.

Please note that all plugins suggested in this article are tested to WordPress version 6.1.1 and are up to date.

How Does Lazy Loading Affect SEO?

Lazy loading is a method to enhance website performance by delaying loading media files until needed. While lazy loading can positively impact user experience, it can also affect SEO in both positive and negative ways.

On the positive side, lazy loading improves page speed, a crucial ranking factor for search engines. Faster-loading pages generally rank higher in search results and can lead to better user engagement and lower bounce rates. In addition, lazy loading can reduce resources that need to be loaded initially, enhancing page load times and making it simple for search engines to crawl and index your website.

However, lazy loading can also have negative effects on SEO if not implemented correctly. Search engines face issues in crawling and indexing content that is loaded dynamically using JavaScript, which could impact the visibility of your website in search results. Moreover, lazy loading can sometimes result in content being loaded after the initial page load, which could negatively impact the UX and lead to reduced engagement and higher bounce rates. How to ensure that this doesn’t happen?

Here are some things you should consider when you implement lazy loading using a plugin so that it doesn’t affect SEO. 

• Ensure Google can crawl lazy loaded images. You can go through the “Fetch as Google” tool available in the crawl section of Google Search Console. If images are present in the source code, it is good to go.
• Ensure you have ALT tags in your images because they are crucial for Google image search rankings.

Final Thoughts

In conclusion, adding lazy loading to your WordPress site is a simple yet effective way to improve site performance and enhance user experience. By only loading images and videos when they are needed, you can reduce page load times and make your site responsive. It increases user engagement, higher search engine rankings, and more conversions and revenue.

We hope you have become familiar with all three methods to implement lazy loading on your WordPress site. You can implement WordPress lazy load images & videos on your site by following any way as per your requirement and preferences.