There is nothing more boring than websites with no images or videos. If people wanted to read endless text, they’d buy a book, right? Incorporating visual media into websites is easy enough, although adding lots can cause your site to slow down significantly. However, that is where lazy load in WordPress can save the day.
What is Lazy Loading in WordPress?
Typically, when a visitor lands on a website, the entire page content gets downloaded, including all media embedded within that page. If there is a lot of media, or the files are very large – often the case with videos or high-resolution images – the loading speed is seriously impacted. We’ve all visited sites where we got frustrated waiting for a page to load, so we move on elsewhere.
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.
Why Lazy Load Images and Videos in Your WordPress Site?
Page speed is increasingly important. When surfing the web, people are now much more impatient than they were twenty years ago and now expect content to load virtually instantaneously.
Search engines such as Google and Bing have acknowledged that impatience, as they now take account of page speeds when determining page rank. So, in theory, if there are two websites with identical content, but one has been optimized for speed, that one will rank higher in searches than the unoptimized one.
As mentioned earlier, visual media is probably the biggest culprit when it comes to slow page loading. If you only have a couple of basic images that are not of high resolution, 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.
This article will show you how to lazy load images either manually or by using a plugin. We will cover both.
How to Lazy Load WordPress Images and Videos Natively
If your website is running 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:
Article Continues Below
<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.
If you are using WordPress 5.5 onwards, there is good news – those versions automatically add the lazy loading attribute. So, is it no longer necessary to manually mess around with attributes or install plugins, at least for most popular browsers.
How to Lazy Load WordPress Images and Videos with a Plugin
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:
- 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 lazy loading irrespective of the browser they use.
- 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 go through some of the available plugin options and what they can do for you. Before we begin on those, however, we strongly suggest you get into the habit of optimizing your pictures and videos before uploading them into your WordPress. There is plenty of guidance 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.
Like Smush, Optimole is a lazy loader combined with an image optimizer all in one. It, too, is available in 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 25k. Pro costs from €23/month or €229/year, and also adds the following extra features:
- 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.
With over a million active installs, Smush is by far the most popular lazy loading plugin for images available today. 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:
- 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)
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 very large images to manage. The plugin has an impressive average user rating of 4.8/5.0 stars.
a3 Lazy Load
a3 Lazy Load is also a highly popular lazy load plugin for WordPress, with over 200,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 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, 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 having the lazy load effect applied
- Compatible with any WordPress theme that follows the WordPress Theme Codex, and also many plugins
Those features should be more than sufficient for most users wishing to ensure that their site lazy loads on all browser types while adding a level of control over it.
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 as well.
The plugin works by replacing embedded videos with static, clickable thumbnails. Loading of the full video only commences upon clicking of 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. This 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 play button
- 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.
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 where you have a hugely popular website with very active comments 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 6,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.
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:
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 5.7.2 and are up to date.
Wrapping It Up!
You have now learned that while the latest versions of WordPress already incorporate lazy loading of images, videos, etc., there are times when you may need more control over how it operates on your site. Not only that, some browsers, such as Apple’s Safari, still need to catch up with WordPress on the lazy loading front. Using a plugin will ensure that regardless of what browser visitors to your website use, media content will be lazy-loaded, and in turn, page speeds will be optimal. And we all know that optimal speeds mean happy visitors.
How are you handling images and videos on your site? Have you heard of lazy loading previously, or is it something entirely new to you? Are you just using the native WordPress lazy loading, warts, and all? Or are you using a plugin for more control or to ensure all browser types are covered? And do you manually optimize your images before uploading them to WordPress, or do you use a plugin (either an image optimization one or a combined optimization/lazy loading one) to help you with that?
Please do drop us a comment or two below. Not only do we love reading your feedback, other WPLift visitors appreciate it too.