Implementing Lazy Loading in WordPress Themes
Posted on 17th June 2023
Lazy loading is a technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need. This technique is beneficial when your page has many heavy resources such as images or videos. loading these resources lazily, only when needed, means that your page loads faster and users can save bandwidth.
In this article, we will show you how to lazy load images and videos in WordPress. We will also discuss the benefits of lazy loading and how it can speed up your WordPress site.
What is Lazy Loading?
Lazy loading is a technique that delays the loading of non-critical resources on a page. These non-critical resources are loaded when they are needed rather than loading them at page load time.
The purpose of lazy loading is to improve the performance of a page by loading resources only when they are needed. This is especially beneficial when a page has many heavy resources such as images or videos.
loading these resources lazily only when they are needed means that the page loads faster and users can save bandwidth.
How to Implement Lazy Loading in WordPress?
There are many ways to lazy load resources in WordPress. In this section, we will show you how to lazy load images and videos in WordPress.
Lazy Loading Images in WordPress
The most common way to lazy load images in WordPress is by using the Lazy Load by WP Rocket plugin. This plugin uses jQuery.sonar to only load images when they are visible in the viewport. This means that images outside of the viewport are not loaded until the user scrolls to them.
To install the plugin, head over to the Plugins page and click the Add New button.
In the search field, type in Lazy Load by WP Rocket and install the plugin.
Once the plugin is installed and activated, you need to visit the Settings » WP Rocket page to configure the plugin settings.
On the WP Rocket settings page, scroll down to the Media section and check the box next to Load images on demand.
Click on the Save Changes button to store your settings.
Lazy Loading Videos in WordPress
To lazy load videos in WordPress, you can use the Lazy Load for Videos plugin. This plugin replaces embedded YouTube and Vimeo videos with a clickable preview image. The video is only loaded when the user clicks on the preview image.
To install the plugin, head over to the Plugins page and click the Add New button.
In the search field, type in Lazy Load for Videos and install the plugin.
Once the plugin is installed and activated, you need to visit the Settings » Lazy Load for Videos page to configure the plugin settings.
On the plugin settings page, you need to select the video players that you want to lazy load. By default, the plugin supports YouTube and Vimeo videos.
You can also enter the preview image dimensions in pixels. The default dimensions are 640 by 360 pixels.
Click on the Save Changes button to store your settings.
That’s all, you have successfully lazy loaded images and videos in your WordPress site.
Benefits of Lazy Loading
Lazy loading is a great way to improve the performance of your WordPress site. Here are some benefits of lazy loading:
1. Improve Page Load Time
Lazy loading can help improve the page load time of your WordPress site. This is because images and videos are only loaded when they are needed rather than loading them at page load time.
2. Save Bandwidth
Lazy loading can also help save bandwidth as heavy resources such as images and videos are only loaded when they are needed.
3. Improve User Experience
Lazy loading can improve the user experience of your WordPress site as it can help make your site faster and save bandwidth.
We hope this article helped you learn how to lazy load images and videos in WordPress. You may also want to check out our guide on how to speed up your WordPress site for more tips.
Lazy loading is a technique that defers loading of non-critical resources at page load time. It is a strategy to identify what content is needed for above-the-fold display and what can be loaded later when needed. By doing this, you can reduce the amount of data that needs to be transferred on initial page load. This is especially important for users with slow internet connections, as it can help improve the loading time of your page.
Lazy loading is especially beneficial for image-heavy websites. Images are often the largest files that need to be loaded on a page, so deferring their loading can have a significant impact on page load time.
The lazy load technique can be used for both images and other types of content, such as videos, iframes, and JavaScript.
In WordPress, there are a few ways you can lazy load your content. One option is to use a plugin, such as BJ Lazy Load or a3 Lazy Load.
Another option is to lazy load your content manually. This involves adding some code to your theme’s functions.php file.
First, you need to add a function that will check if a certain content type is lazy loadable. This function will take two parameters: the content type and the content.
function is_lazy_loadable($type, $content) {
// check if content type is image
if($type == ‘image’) {
// check if image is larger than 200px
if(strpos($content, ‘width=”200″‘) !== false) {
return true;
}
}
// check if content type is video
if($type == ‘video’) {
// check if video is longer than 2 minutes
if(strpos($content, ‘duration=”120″‘) !== false) {
return true;
}
}
return false;
}
Next, you need to create a function that will replace the content with a placeholder. This placeholder will be replaced with the actual content when it’s needed.
function lazy_load_content($content) {
$placeholder = ‘‘;
// check if content is image
if(strpos($content, ‘<img') !== false) {
if(is_lazy_loadable('image', $content)) {
$content = $placeholder;
}
}
// check if content is video
if(strpos($content, '<video') !== false) {
if(is_lazy_loadable('video', $content)) {
$content = $placeholder;
}
}
return $content;
}
add_filter('the_content', 'lazy_load_content');
Finally, you need to add some JavaScript that will replace the placeholders with the actual content. This JavaScript should be added to your theme's footer.php file.
function lazyLoadContent() {
// get all content placeholders
var placeholders = document.querySelectorAll(‘[data-lazy-load-placeholder]’);
for(var i = 0; i < placeholders.length; i++) {
var placeholder = placeholders[i];
var type = placeholder.getAttribute('data-lazy-load-type');
var content = placeholder.getAttribute('data-lazy-load-content');
// replace placeholder with content
placeholder.innerHTML = content;
}
}
// load content when page has loaded
window.addEventListener('load', lazyLoadContent);
This code will check if the content is an image or a video. If it’s an image, it will check if the width is larger than 200px. If it’s a video, it will check if the duration is longer than 2 minutes. If either of these conditions are met, the content will be replaced with a placeholder.
The JavaScript in the footer.php file will then replace the placeholders with the actual content when the page has loaded.
Lazy loading can help improve the loading time of your WordPress site, especially if you have a lot of images or videos. It’s a good idea to implement this technique if you want to improve the user experience of your site.
