Lazy loading of WordPress images and videos to speed up the site

What is lazy loading and what do you care about the speed of our site? How effective is it in image SEO? And how to enable lazy load on our WordPress site with the help of a plugin? We will try to address these issues later in the article. Be with SEO teaching.

 

Implement lazy load for images and videos

In general, the average size of web pages with images and videos is 3376 KB, of which over 70% is occupied by HTTP Archive. This amount of volume in the browser of website visitors to view and download is very large, and this volume increases with the development of the website and more articles and images, and this increase is effective in reducing the speed and lowering the SEO ranking. (You can use SEO tools or httparchive.org to evaluate the content of your site.)

However, all of these heavy resources have to be downloaded by the web page and create a very high cost for users who have to wait a long time to download these bulky resources, including files that cannot be displayed at the beginning of the web page display, especially in the country. We are Iran with high internet tariffs and unsuitable volume and speeds.

This is where Lazy Load comes into play. Lazy loading is a technique for optimizing web pages, by which only visible information is loaded when entering a web page, and the rest of the information below begins to load after scrolling.

Lazy Load is one of the actions that Google is very excited to see and cares about your website. They have placed themselves, they must be used by force.

Note Note: We held a very useful and professional course to optimize the size and size of photos as well as SEO images in a principled way. To view the course topics, you can click on the photo below:

 

How does a lazy load work?

Lazy load works as follows:

  • The browser converts web pages to DOM, which does not load images and videos when the page loads.
  • JavaScript uses a technique called Determine to download and display images and videos based on the content that is viewed after loading the page. Images and videos at the bottom of the page are downloaded and displayed in the same way after scrolling.
  • Delays the download and display of additional files until the user scrolls to the specified location of the video file, and then after scrolling, all the specified files are loaded for the lazy load of that part.

The end result is that images are not downloaded at initial load, and videos are not loaded until needed. This can significantly improve the performance of websites that contain high resolution images and embedded videos, thus improving site speed. If you use large images on your website, lazy loading will quickly load your page. It helps a lot.

 

Lazy WordPress Load:

Like other problems that occur on the website, WordPress has plugins for lazy loading that can enable lazy loading and slow down page loading. In fact, there are so many free plugins in the WordPress plugin repository that you can use to load your images and videos lazily.

After reviewing 12 plugins related to lazy loading and activating and testing several times, we have identified 4 very professional plugins that will significantly improve the performance of your website and we intend to introduce more but before that Answer the question:

 

Are images and videos really effective in slowing down the site?

We want to show you the effect of images and videos on the speed of the site with a small evaluation. To show the evaluation, we decided to install a WordPress on SEO teaching host. We have activated the WordPress 2016 theme, which was available in WordPress without any optimization plugins and caching techniques. The image below shows the results of the analysis and evaluation of SEO and site speed in the online pingdom tool before adding images and video.

As you can see, the website is very light and the page size is less than 155 KB and the page load time is less than half a second and we have to be very strict to find and solve problems in this situation. What do you think happens to these results when we put a large image and an embedded video from YouTube on the page?

Yes, the word wow is very appropriate in this situation. Page size increased to 1.7 MB and load time tripled.

The WordPress 2016 theme is lightweight in every way you look, which is why it still loads quickly by adding bulky images and videos. However, with this small evaluation, we found that images and videos are very effective in slowing down the load and increasing the page size too much.

 

Improve page loading speed through lazy loading plugins

BJ Lazy Load, Lazy Load XT, a3 Lazy Load and Rocket Lazy Load are four plugins that significantly increase the delivery speed of web pages. Let’s take a look at what each of these plugins does in turn. Several other plugins were tested, but they did not affect the speed of the website as they should.

As you try lazy loading plugins, check the changes before and after activating to gauge your satisfaction and make sure you reach the speed you envisioned.

 

1 – BJ Lazy Load

BJ Lazy Load plugin is a very popular plugin among WordPress users and has been installed and active in more than 40,000 WordPress websites and has received a rating of 4.1 out of 5 based on 60 reviews from critics.

There is a series of painless installation and activation, and just enter the plugin addition section in WordPress, search for BJ Lazy Load, install it after finding the plugin, then activate it. After activation, a submenu called BJ Lazy Load will be created in the settings menu.

All lazy load settings will be done by default for you, and if one of the settings could not be done by your skin, you can identify the problem and solve the problem by disabling that part.

An option introduced in this plugin and in the other two plugins is the ability to add a link to an image to be placed when loading images and videos, which is removed after loading images and replaces the original image and video. Of course, to use this option, you need to design a small, low-resolution image that does not damage the website load.

For the lightest and most unique result possible, I recommend creating a monochrome image with a png skin background.

You can also put some of the CSS classes in the html file of the page in the pass (deprived) list so that those classes are not loaded lazily. Then after that you can give those classes to the videos and images that you do not want to be loaded lazily to load normally. Finally, you can know the amount of proximity needed to display images before downloading and displaying.

Let’s take a look at how fast our website has changed with BJ Lazy Load.

This is an incredibly fast loading time. I tested the website twelve times at different times of the day and found that the average website load time was between 300 and 400 milliseconds. Testing the website immediately after activating the plugin is not a criterion and must be tested several times.

While we have seen the speed of the website increase, the size of the website has increased by 0.3 MB and has increased from 1.7 MB to 2 MB. What happened to the volume? According to our theory, by activating the lazy load, the page size should be reduced and the page should be lighter. After examining the current situation, this is what I came up with:

By default, WordPress uses an attribute called srcset for images in the img tag to present a large number of image file sizes in browsers. The browser fills the available space with a list of sizes and loads the smallest version of the image. This means that if you upload a large image, WordPress, by its default techniques, converts the image into several smaller versions and then sends the generated small size to the visitor browser relative to the screen size and shell settings. The visitor browser will receive the smallest appropriate image based on the number of pixels available at the location of the image.

BJ Lazy Load plugin completely changes the default WordPress behavior for images. The data-lazy-srcset property replaces the srcset property, and the end result is that instead of lowering the image size and resolution, the full-resolution image will be loaded lazily.

This is not ideal, but you can reduce the size of the images by optimizing the images before uploading to increase the size of the website, although there are already WordPress optimization plugins that can replace the default WordPress resize behavior. And no longer have this problem.

With a visual experiment, you load your website and see what happened. For example, if you use a non-white background in the background of your website, you must add an alternative image to display before the images load lazily. By default, the plugin puts a white gif image for you that you can change in the settings.

 

2 – Lazy Load XT

The Lazy Load XT plugin performed well in our tests and is another good lazy WordPress plugin. With about 1000 active installs, it is definitely not as popular as BJ Lazy Load, but it has a rating of 4.9 out of 5, which did not give the plugin a single 5-point feedback.

Once activated, the plugin creates a Lazy Load XT submenu in the settings menu, and you can configure the plugin through it. After the first visual inspection of the website, you will notice that this plugin works more than lazy loading of images and videos. In addition to lazy loading, you can minify JavaScript and CSS files. Load JavaScript and CSS libraries with CDN types such as CloudFlare and move the scripts to the WordPress footer. If you want to use Loadflare free CDN, do not miss the Cloudflare installation tutorial article.

There are several additional options in this plugin that you can use to improve the speed of your WordPress site. Anyway, since we started the lazy load test, I left the plugin settings by default, Minified the JavaScript and CSS files and did not transfer them to the footer, I did not clear the server cache. With that in mind on the Pingdom website, I tested my website’s current speed status.

After testing by pingdom, the website size remained the same at 2 MB, but the page load time was slightly longer than the BJ Lazy Load plugin. Although this plugin achieved a 50% reduction in page load time, this test shows that this plugin is less powerful than BJ Lazy Load. After viewing the files tree menu, we realized that exactly the same files that are loaded in BJ Lazy Load are loaded by activating Lazy Load XT, and instead of optimized images, after activating the plugins, exactly the same image uploaded to the same quality. The lazy face is loaded.

After reviewing this issue, there was no reason why the BJ Lazy Load load was better than the Lazy Load XT until I noticed the preview image before loading the original image, which was transparent and therefore loaded the previous images. The show was not going well and the server was busy loading more. In this plugin, like BJ Lazy Load, it is possible to change the preview image, and you can reduce the loading speed a bit by choosing a better and more optimal image.

 

3 – Plugin a3 Lazy Load

A3 Lazy Load plugin is another popular WordPress repository plugin in the field of lazy load. The plugin has about 10,000 active installs, and has a score of 4.7 out of 5 based on 40 feedback.

Activate the plugin and then you will see that a submenu called a3 Lazy Load has been added to the settings menu. To test the plugin, I set its settings to the default. I used the background color loading option to preview images so that the preview color matches the background color of my webpage. Due to this change and setting the settings by default, the performance of the website became very good.

Our website load time came back below half a second, this speed is significant considering the number of images and videos.

Compare the results obtained

Undoubtedly, you have noticed a decrease in requests and page size. What makes this dramatic difference? On the pingdom website, you can compare two experiments at any time by taking a screenshot or emailing the results.

The image below shows the volume of website content when the a3 Lazy Load plugin is enabled.

A total of 151 KB of images have taken up the page size, which is less than reality. The two plugins BJ lazy load and Lazy Load TX show a page size of 2 MB. The image below shows how the website is 2 MB in size with this add-on enabled.

JavaScript, CSS and HTML code sizes are almost the same. However, the size of the images is 1.86 MB, which is the size of the images with the same resolution that are uploaded, but in contrast to a3 lazy load, this size is 151 KB. What do you think happened? As I said before, after uploading images, WordPress starts optimizing and creating different sizes of images by default, and users download and view the smallest size related to their screen.

In BJ lazy load and Lazy Load TX plugins, the default optimization of WordPress images is disabled, but in a3 Lazy Load plugin, the images are displayed according to the WordPress default image optimization technique, resulting in smaller images.

One of the most interesting points in this comparison is the page load time, which with the BJ lazy load plugin, the load time is about 100 milliseconds less than a3 Lazy Load. For this reason, I speeded up the web pages several times by activating and deactivating all three test plugins to make sure that these results were not unrealistic. The only change in the results was the number of HTTP requests. At first glance, the number of HTTP requests in the BJ lazy load plugin seems to be higher. However, if we look at the menu tree of files, we will understand the reason for the requests.

The site files generate about 20 data: image / gif requests with the BJ lazy load plugin enabled.

This is URI data, not HTTP requests, which actually tells the browser to load the Gif file locally (with Base 64 code) and not as a download from the server. As a result, the BJ lazy load plugin requires 17 HTTP requests to load the page, which is faster than the a3 Lazy Load, which requires 27 HTTP requests to load the page, and is a very good reason for pages to load quickly.

The Lazy Load TX plugin requires a higher value than the BJ lazy load HTTP requests, which is more of a reason for not receiving the same results.

 

4 – Rocket Lazy Load plugin

And the fourth option to use if none of the above plugins meet your requirements, is the Rocket Lazy Load plugin. Free plugin from WP Rocket plugin manufacturers. Currently, this plugin has more than 6,000 active installs and has received a score of 4.2 out of 5 points. If you are looking for a simple and fast loading lazy plugin, this plugin is one of your best choices. This plugin creates settings on index images, all images in articles and widgets, avatars and emoticons.

One of the advantages of this plugin is that it does not have any JavaScript library like JQuery and its script code is less than 2 KB. It has no adjustment options and is very easy to install and lazy load is activated.

 

Conclusions and recommendations

All four options make the most of improving your website speed, lazily loading images and videos, and ultimately for photo SEO. Which one to choose to work on your website is a personal choice and depends on the performance as well as the way you prefer images and videos to load.

  • If you do not optimize your images before uploading and you definitely need them, it is better to use the a3 Lazy Load plugin, because this plugin will give you optimized images.
  • If you optimize your images before uploading and are looking to deliver the best possible delivery to the user with minimal effort, you will not have any problems with the BJ lazy load plugin. Rocket Lazy Load plugin can also be your choice.
  • If you optimize your images before uploading and you want to have more options in addition to lazy loading, such as shrinking JavaScript and CSS files as well as moving them to the footer, it is better to use the Lazy Load TX plugin. use.

Lazy loading is one of several techniques available to speed up your WordPress website. However, if you use a lot of images and videos on your website, you should know that lazy loading has the potential to have a profound effect on speed. In addition, when you use lazy loading, there are several other techniques that you can consider and implement the best speed of performance on your website.

Do you know another plugin in the field of lazy WordPress loading that works better than the introduced plugins? Share it with us in the comments section.

Some images and text are taken from kinsta.

Leave a Comment