Images and videos are great for boosting community engagement on your WordPress based website, but if done incorrectly, they may let your site take forever to load. Obviously, how quickly your pages load can impact user experience considerably. In this tip, we’ll talk you through how to use Lazy Loading to speed up a video or image-heavy website.
To start with this tutorial, here is a brief introduction to the mentioned Lazy Loading. Note that, the process of adding lazy loading to WordPress videos and images will be both covered later on. Now, let’s further down and go over more details.
What Is the Lazy Loading?
In a nutshell, lazy loading is a useful technique that will delay the loading of videos and images before they come into view in visitors’ browsers. Taking the example of video lazy loading here, either of your YouTube and Vimeo videos won’t be promptly loaded with additional files and external scripts. And instead, they would be replaced with certain clickable preview picture as follows.
As images or pictures are much smaller in size than media videos, the lazy loading development trick can largely accelerate page speed. As one part of Pinterest strategies, lazy loading only allows the first few images in a post to load, which makes content visible to visitors much quicker. Now that you’ve known what exactly lazy loading is, let’s take a look through the detailed steps to add lazy loading to videos and images in WordPress.
How to Add Lazy Loading for WordPress Videos?
In this section, we’d like to take full advantage of a handy plugin named as “Lazy Load for Videos” to achieve the outcome. Developed by a highly-reputable developer, this “Lazy Load for Videos” plugin forces the embedded YouTube and Vimeo videos to load only when your users click the preview image. Beware that, it is fully compatible with WordPress 3.5v or higher versions, and the latest 2.2 version is free to download through this URL.
Download URL: https://wordpress.org/plugins/lazy-load-for-videos/
Step 1 – Install & Activate the Lazy Load for Videos
The first important thing you must implement is to enable the “Lazy Load for Videos” plugin within the WordPress dashboard. Let’s say you have logged onto your administrator area, you should header over to “Plugins” > “Add New” from the left sidebar menu. Just follow the given instructions to install and activate the “Lazy Load for Videos”, and if nothing goes wrong, this newly-initialized plugin will be stored within this “Installed Plugins” tab.
Step 2 – Make General/Styling Settings
To make personalized settings, you can go to “Settings” > “Lazy Load for Videos” as below. From the first “General/Styling” section, you will be displayed with a set of options. To be precise, you can check the first box to load CSS/JS only needed, and it is possible to check the second box to enable “Responsive Mode.” In the meantime, the “Play Button” and “Thumbnail Size” of your videos can also be specified from the respective drop-down lists. Optionally, you have the ability to enable “Schema.org Markup” function for newly-updated posts.
Step 3 – Configure YouTube Settings
Inside the next “YouTube” tab, you can also choose the “Default thumbnail quality”, and in the meantime, modify the colors for YouTube player and progress bar. More importantly, this flexible plugin enables you to hide unnecessary scripts, such as annotations, YouTube uploader, player controls and related videos, etc.
Note that, each option is followed by an elaborate description that you can take for reference afterwards. If you wish, it is also possible to disable Lazy Load for YouTube by clicking the first checkbox. Do remember to check the bottom “Save Changes” button to take effect.
Step 4 – Personalize Vimeo Settings
From the following “Vimeo” tab, you will be able to define the appearance of Vimeo controls, and decide whether or not display the Vimeo title. In the same way, you can choose to disable Lazy Load for Vimeo as is required. If you are in need of more advanced features like “Lifetime Updates”, then you can try the commercial version from the last “Premium” section.
Important to Note: To check if your lazy loading is in working order, you only need to preview a page/post that includes a YouTube/Vimeo video. If implemented properly, you can see the original players would be substituted by a video thumbnail and one player button as follows. Note also that, only if someone clicks on the picture will it load and play the embedded video.
How to Add Lazy Loading to Images in WordPress by Using BJ Lazy Load?
In this section, let’s see the process of lazy loading the images in WordPress so as to save lots of waiting time and server bandwidth. It is pretty easy to get overwhelmed by all kinds of plugins in the market, and thus a long-awaited plugin named as BJ Lazy Load is instanced here. Note that, the plugin would do all the heavy lifting for you and make speeding up your website its priority.
Download URL: https://wordpress.org/plugins/bj-lazy-load/
Step 1 – Initialize BJ Lazy Load in WordPress
Enabling the “BJ Lazy Load” plugin is quite similar to enabling the above-mentioned “Lazy Load for Videos.” Just login to the WordPress dashboard and repeat the same steps to “Install” and “Activate” this plugin. Once done, you will be taken to the “Installed Plugins” page again. From the next screenshot, just make a hit on this “Settings” link to go on.
Important to Note: Before making any configurations to your WordPress powered site, you’d better create a clone of all files. In case for any unexpected failure or security risk, you’d also backup the database via phpMyAdmin tool.
Step 2 – Apply Lazy Load to Content
To maximum the value of the “BJ Lazy Load” plugin, you can also choose to go to “Settings” > “BJ Lazy Load” as below. The first three radio buttons from this settings page are devoted to what kind of content that you’d like to lazy load. It is advisable to check all those three options so that this plugin will lazy load the images in any posts/pages with “text widgets” and “gravatars” as well as “post thumbnails” included.
In the further, you will be able to choose whether or not lazy load the images and iframes. In most cases, iframes should be enabled as possible, but you can also disable this feature if your iframes are working improperly.
Step 3 – Specify the Lazy Load Implementation
And next, this plugin allows you to specify the actual implementation of the newly-added lazy load script. Firstly, you are able to decide whether or not place the lazy load script in the footer or header. It’s good to leave this “Theme loader function” drop-down list to the “wp_footer” option.
If you already have a preferred placeholder, you may input a direct URL to it within the above “Placeholder Image URL” blank box. In some cases when you need to skip some important or sensitive images, you can insert CSS classes in this “Skip Images with Classes” section. Pay attention that, the filled-in classes should be separated by commas.
Step 4 – Enable Lazy Load Functions
In the “Threshold” section, you can define how close to the viewport of each element. If your current theme is now using endlessly-scrolling content, you will need to enable this “Infinite Scroll” option. Also, it is at your option to switch the “Retina Images” option on. Note that, the last “Responsive Images” function can only work fine on a standard Apache web server.
Now that you’ve finished with the customizations, it’s time to click on the “Save Changes” button. To abandon this lazy loading feature, you can simply check the small meta box in the right-hand of your post editor.
Important to Note: To further shorten the page loading time, it is recommended to insert the medium or large-sized images to the posts/pages, instead of the original and high-resolution versions. As WordPress itself will compress your uploaded images automatically, you’d better compress the JPG images no less than 10 during the save process. Try naming the images as descriptive as possible.