There are many different approaches available to implement lazy loading on your website. You are welcome to have a look at our ranked list of the top plugins for WordPress that support slow loading.
There are numerous free plugins in the WordPress directory that may be used to lazy load images and videos. After considering a few dozen plugins and testing a few, we have found two plugins that significantly increase website performance. If you’re keen to implement lazy loading, consider the options below.
Using WP Rocket (Premium)
WP Rocket is the most straightforward approach to implementing slow loading on your website. Moreover, the process of enabling it takes less than a minute. LazyLoad is the name of the plugin that WP Rocket includes as its version of lazy image loading.
When LazyLoad is on, WP Rocket will immediately stop WordPress’s native image lazy loading to prevent any possible problems.
Follow the below steps to enable the WP Rocket’s LazyLoad feature:-
- You can activate LazyLoad by navigating to Settings > WP Rocket > Media panel inside your WordPress installation.
- Click “Enable for pictures” under the LazyLoad area at the top of the screen.
- Click “Save Changes” after making your selection.
That is everything else that has to be done. As a result, visitors will experience sluggish loading of photos.
LazyLoad provides lazy loading for additional HTML elements, such as iframes and videos, in contrast to the native approach that WordPress provides. Additionally, it will use lazy loading for background pictures if such images are applied inline for specific HTML components.
If you wish to use WordPress’s native picture lazy-loading functionality, you may deactivate the LazyLoad option in WP Rocket. On the other hand, the new loading property isn’t supported by all browsers just yet. In addition, the installation of WordPress is only focused on photos. Therefore, WP Rocket’s LazyLoad is still the superior alternative, particularly if your website has many images, videos, and embeds.
Things to note while activating WP Rocket’s Native Lazy Loading
Even though WP Rocket does not include automatic compatibility with Chrome browsers that use native lazy loading, you still have the option to choose support for Chrome’s native lazy loading by enabling it through a helper plugin. Likewise, it is the case even though WP Rocket does not include automatic compatibility with other browsers that use native lazy loading.
You may ensure the following things by using this helpful plugin:
- Every one of your photos will contain the essential HTML syntax to use native lazy loading; browsers compatible with Chrome will automatically utilize native lazy loading; all other browsers will automatically use WP Rocket’s LazyLoad.
- You have the option of continuing to make use of our robust LazyLoad technology or switching to Chrome’s in-built lazy loading feature.
It is all up to you! First, conduct trials of both approaches at your location, and choose the one that works best for you.
Using a3 Lazy Load (Free)
If you are looking for a free option, we recommend using the a3 Lazy Load plugin. You can disable lazy loading for particular images and pages using the a3 plugin. Additionally, it permits the delayed loading of videos on your website:
Additionally, this plugin assists lazy loading of external images and videos. The WordPress core implementation does not carry out such action.
You can install and activate this plugin from your WordPress dashboard. Now, you can customize the tool’s settings.
Step 2: Adjust the Plugin Image Settings
Go to Settings > a3 Lazy Load next. If you look under Lazy Load Activation, the plugin is activated by default after installation.
Now, open the LazyLoad images tab. You can (1) pick which website pictures to delay and (2) provide a fallback for web browsers that refuse to accept JavaScript. For images that you don’t want to delay loading, you can (3) set a CSS class:
The default settings have every option enabled. We strongly recommend that you maintain this setting. Create a CSS class that will allow you to skip deferred loading for particular images.
Step 3: Adjust the Plugin Video Settings
The Lazy Load Videos and iframes tab is the next step. With a3 Lazy Load, you can select delayed loading for particular clips just like you can with images.
The plugin allows videos in (1) content and widgets and provides (2) a fallback feature for browsers that don’t support JavaScript:
You can specify a CSS class in the video settings (3) to exclude particular videos from deferred loading. If you want a more straightforward configuration, use the same class you chose in the images section.
More Lazy Loading Plugins for WordPress
Apart from WP rocket & a3 Lazy Load, several useful plugins for lazy load are available that you may consider:
- Lazy Load for Videos
- BJ Lazy Load
- Load More Products for WooCommerce
- WordPress Infinite Scroll – Ajax Load More
- Disqus Conditional Load
- Lazy Load for Comments
Final Thoughts
It is crucial to be aware of any potential conflicts whenever you update or modify your website. Check out this list of frequent problems associated with lazy load if you discover that allowing lazy loading has caused any aspect of your website to become inoperable.
It is possible for there to be incompatibilities as a result of the lazy loading feature not being applied to the pictures that are uploaded by plugins such as Revolution Slider and Envira Gallery. The entire list of compatible plugins may be found here.
This article, as well as many others, can be found at Seahawk Media Blog.
