How to achieve lazy loading of WordPress pictures and videos (graphic tutorials)

If your WordPress site relies heavily on visual content, you may need to add lazy loading to it. This WordPress feature helps improve the page speed and performance of your site, making it critical to your SEO work.

According to HTTP Archive, the average web page volume is 3719 kB, of which images and videos account for nearly 78 per cent of the total volume. This is a lot of bytes for website visitors’ browsers to download and render, and the future trend is for web pages to become larger and use more images or video content. WordPress is leading the trend in sharing media and integrating media files into website design. With WordPress, you can easily integrate images and videos into the background of articles, pages, and even topics.

However, too many media resources make the web page load very slowly, because users have to wait to download large files (including files that are not initially displayed) before viewing the web page. This is why we do lazy loading (delayed loading) of pictures or videos on WordPress.

• What is lazy loading and how does it work?
• Advantages and disadvantages of WordPress lazy loading
• Why do images load lazily?
• How to add lazy loading to your WordPress
• The influence of lazy loading on SEO
• Delayed loading skills of WordPress

What is lazy loading and how does it work?

Lazy loading (also known as lazy loading) is an optimization technique for loading visible content, that is, delaying downloading and rendering what needs to be displayed at the bottom of the first screen. Delayed loading does not load all images at once, but downloads only those images that are visible on the user’s screen. It replaces all other images with placeholder images or white space. When the user scrolls down, your site loads images that are visible in the browser viewing area.

This is also Google’s highly promoted web optimization strategy to “reduce the size of the first screen content”, which should be considered if your WordPress articles and pages contain a large number of embedded videos and high-resolution images.

Deferred loading works as follows:

• Browsers build web pages DOM without downloading images and preloading videos.
• JavaScript is used to determine which images to download and which videos are preloaded based on what is initially visible when the page loads. These images and videos are downloaded and preloaded as needed.
• Downloading and rendering other videos will be delayed until the site visitor scrolls down the page and other content enters the view.

The end result is that images and videos are not downloaded and loaded until they are actually needed. This can achieve significant performance improvements for websites that contain a large number of high-resolution images and embedded videos.

Delayed loading is good for your WordPress site.

• It reduces the initial page loading time, so users will see your site faster
• It saves bandwidth and hosting costs by providing only viewable images

The release of WordPress 5.5 adds delayed loading as the default feature.

However, if you want to customize how image delay loads and background image delay loads, you need to use the WordPress plug-in.

Note: although delayed loading helps improve site loading speed, you should always optimize images for the network for best performance before uploading to WordPress.

Advantages and disadvantages of WordPress lazy loading

If you still want to know whether image delay loading should be implemented in WordPress, here are the pros and cons of this feature:

Advantages:

• Reduce bandwidth usage and hosting costs.
• Improve the speed of the website and make the visitors’ browsing experience better.
• Enhance the mobile experience.
• Optimize the maximum content drawing score
• Improve the work of SEO and improve the search ranking of your website.

Disadvantages:

• Causes content buffering, which affects the loading speed.
• Slow down the fast scrolling.

Why do images load lazily?

Delayed loading of your WordPress images can speed up your site and provide a better user experience.

No one likes slow websites. In fact, a performance study found that an one-second delay in page loading reduced the number of conversions by 7%, page views by 11%, and customer satisfaction by 16%.

Any search engine doesn’t like sites that load slowly. This is why the faster the site, the higher the ranking in the search results.

Compared with other network elements, images take the longest to load on your site. If you add a large number of pictures to the article, each picture will increase your page load time.

One way to deal with this situation is to use CDN services, such as cloud CDN. CDN will allow users to download images from the nearest Web server and slow down the loading speed of the site.

However, your image will still be loaded and affect the overall page load time. To solve this problem, you can delay image loading by implementing delayed loading on your website.

How to add lazy loading to your WordPress

Like many other website performance problems, WordPress delayed loading can be solved by plug-ins. In fact, the WordPress plug-in library has many plug-ins that can be used to load images and videos lazily. There are so many such plug-ins that we have selected five plug-ins that can significantly improve the performance of the website. If you are ready to implement lazy loading, consider these five plug-ins.

Do images and videos really slow down websites?

First of all, make sure that the optimization has been performed before uploading any image to WordPress (for image volume optimization, please refer to the image optimization section in the article “how to achieve a full score / 100 on the Google PageSpeed Insights test”).

We need a baseline score so that we can see the impact of adding images and videos on the loading speed of the site. If there is no problem at the beginning, there is no need to solve the problem. To test me, I installed the standard WordPress on the test host, enabled the default theme TwentySixteen, and did not enable techniques such as optimization plug-ins or caching.

The screenshot below is the result of a speed test of the site using Pingdom (see more website speed tools) before adding any pictures or videos.

Do not add any pictures or video sites to measure speed.

As you can see, the page is very small, with less than 155 kb and loaded in less than half a second. What will be the result of the speed test if the website loads a large picture file and embedded YouTube video?

Do not use lazy loading plug-in to perform website speed measurement

After adding pictures and videos to the test site, we can see that the page size has increased to 1.7 MB and the page loading time has increased to 1.3 seconds. We can see that the addition of images and videos makes the page larger and slows down the page loading speed greatly.

1. Upgrade to WordPress 5.4 or later

WordPress 5.4 and later include delayed load images by default. Updating your WordPress to the latest version automatically enables deferred loading.

Although it is the easiest way, it does not allow you to configure images to be loaded late. As a result, your website may overuse this feature, thus showing the above shortcomings.

Another factor to consider is the different nature of the delayed loading feature in each WordPress release. Recently, WordPress released WordPress 5.9 with improvements to address the poor rendering scores of large content in older versions.

This means that websites running on older versions of WordPress will not get the same benefits as using WordPress 5.9.

two。 Enable native lazy loading through the browser

Popular browsers such as Chrome, Firefox and Opera support lazy loading of native images. All you need to do is setLoad attributes are added to the target image and video to enable it automatically.

In native WordPress lazy loading, the loading property supports these three values:

• Auto-triggers the default deferred load, which is the same as excluding the load property.
• Lazy-assigns the load of resources until each asset reaches the specified distance from the viewport.
• Eager-all assets are loaded immediately after the page is loaded, regardless of their location.

Here is an example of how to use it:

This method is ideal for delaying the loading of some images, providing each image with a load attribute indicating when they appear in the viewport. However, it may take some time to delay loading a single image, especially if your site has a large number of media files.

3. Use lazy loading plug-ins to improve page loading speed

This time we will test five WordPress delay loading plug-ins BJ Lazy Load,Lazy Load XT,a3 Lazy Load and Lazy Load (Lazy Load for Videos). Let’s take a look at how each plug-in is realized. When you try to delay loading plug-ins using WordPress, be sure to do a pre-and post-test to make sure you achieve the desired results.

• BJ Lazy Load
• Lazy Load XT
• a3 Lazy Load
• Lazy Load
• Lazy Load for Videos
• WP Rocket
• Optimole

1. BJ Lazy Load

BJ Lazy Load is a very popular lazy add-on. It currently has a 4-star rating in more than 9w + enabled installations.

WordPress delay loading plug-in-BJ Lazy Load

The plug-in is easy to install and set up. Just search for the plug-in through “plug-in-install plug-in” and install and enable it. When enabled, you can enter the plug-in settings interface through “Settings” & gt; “BJ Lazy Load”. All deferred loading options are selected by default, and you do not need to perform too many settings for the plug-in unless you encounter a problem at the front end of the site after you enable the plug-in.

This plug-in provides an option, and neither of the other two options can add URL to the image to use as a placeholder for delayed loading of images and videos until the actual image and video resources are downloaded. Of course, if you use this option, you will need to use very small files instead of high-resolution images.

In order to make the page beautiful and not destroy the page as a whole, it is recommended that you create a solid color image that is the same as the background color of your website and save it in png format.

You can also specify HTML classes that exclude deferred loading. You can then apply this class to any image or video that you want to exclude from delayed loading. Finally, you can set the time to lazily load pictures and videos (that is, trigger pictures and videos from the target of download and rendering away from the current visual window position value)

After using the lazy loading plug-in BJ Lazy Load, the page loading speed changes as follows:

Speed measurement after using delay loading plug-in BJ Lazy Load

After many tests and statistics, the conclusion is that using the BJ Lazy Load plug-in can keep the page load time between 300 and 400 milliseconds.

Although the page loading speed is amazing after installing this plug-in, the page size actually increases. What’s going on? In theory, after activating delayed loading, the page size should also be reduced, because not all images are downloaded when the initial page loads.

After some investigation into this situation, it is found that:

Default picture reading rules for WordPress

When WordPress embeds an image, a srcset attribute is added to the img element to display images of various sizes to the browser. Browsers load images of the most appropriate size according to different device resolutions.

This means that if you upload a very large image file, WordPress will automatically provide multiple sizes of the image to your website visitors, and the browser will select one of the most appropriate image Size based on the device resolution.

BJ Lazy Load changes the rules for reading WordPress pictures

BJ Lazy Load overrides WordPress’s default image reading. The srcset property has been replaced with the data-lazy-srcset property used with the plug-in script. The end result, however, is not to download the best-sized version of the image, but to download and render the full-resolution image.

This also explains the previous page speed test, why the page size does not change much. Therefore, it is recommended that when you use this plug-in to perform lazy loading, make sure that the picture is optimized before uploading the picture, that is, uploading the picture with a more appropriate resolution.

2. Lazy Load XT

Lazy Load XT performed well in our tests and is another WordPress lazy loading plug-in worth considering. It is important to note, however, that this plug-in is not as popular as BJ Lazy Load and has not been updated for three years (due to technical support and security concerns, it is not recommended to give priority to this plug-in).

WordPress lazy load plug-in-Lazy Load XT

After enabling the plug-in, configure the plug-in through the WordPress dashboard “Settings & gt; Lazy Load XT”. You will notice that this plug-in not only provides delayed loading of pictures and videos, but also provides functions such as compressing JS and CSS files, loading JavaScript and CSS libraries using Cloudflare CDN, and moving scripts to the footer of the site.

You can use other options to fine-tune site performance. However, since we are only testing delayed loading this time, we only use the default settings this time, and we do not shrink or move CSS and JavaScript to clear the server cache. Finally, the results of running the speed test through the Pingdom website are as follows:

Speed measurement after WordPress delay loading plug-in Lazy Load XT

After enabling the Lazy Load XT plug-in, the page size is still 2 MB, and the page loading time is not as fast as BJ Lazy Load, but the page loading time is 50% less than that when lazy loading is not enabled.

Take a quick look at the file tree in the test results and enable the Lazy Load XT plug-in as we saw in BJ Lazy Load. Enabling both plug-ins does not load an optimized version of the image, but downloads and renders a full-resolution version of the image.

Although the plug-in does not produce the same speed boost as BJ Lazy Load, Lazy Load XT supports eyeball testing. Unlike BJ Lazy Load, the placeholders used by Lazy Load XT are transparent. Therefore, when loading images and videos, there are no ugly blank boxes, and you don’t have to worry about creating and uploading placeholder images.

3. a3 Lazy Load

A3 Lazy Load is one of the most popular WordPress delayed loading plug-ins in the WordPress plug-in market. This plug-in has more than 10w + active installations and has a 4.5 star rating.

WordPress lazy load plug-in-A3 Lazy Load

After the plug-in is enabled, the Settings & gt;a3 Lazy Load menu is added to the WordPress dashboard. For testing purposes, the default settings of the plug-in are used, with one exception, the “Loading Background Colour” option matches the placeholder color to the background color of the page.

Speed measurement after installing and enabling A3 Lazy Load plug-in

After the plug-in is enabled, the speed is measured again, and the page loading time is less than half a second. Considering the number of images and videos contained on this page, this efficiency is very good.

Comparison of velocity measurement results

No doubt you will notice that the page size and the number of requests have been greatly reduced. What causes this dramatic difference between different plug-ins? We provided a snapshot of the content size through Pingdom, and found the answer after a quick comparison. First of all, this is the content size snapshot when activating A3 Lazy Load, as shown in the following figure:

Enable the page content size of the A3 Lazy Load plug-in

After enabling the A3 Lazy Load plug-in, the page image takes up a small amount of space, a little more than 150 kb. Both BJ Lazy Load and Lazy Load XT generate a page size of 2.0 MB. The following is a screenshot of the composition analysis of the content of the Lazy Load XT plug-in enabled page.

Enable the page content size of the Lazy Load XT plug-in

The script for the page after enabling A3 Lazy Load and Lazy Load XT to defer loading plug-ins, HTML,CSS and other content are almost the same size. But the page image size of the latter is 1.86 MB-instead of just 150 kb of the former. What happened? As I mentioned earlier, WordPress automatically provides images of various sizes, and browsers present versions of images of different sizes depending on the device’s screen resolution.

Both BJ Lazy Load and Lazy Load XT override WordPress’s default rules for reading images and eventually provide full-resolution images. However, A3 Lazy Load retains the default WordPress rules for reading images, and the image files transferred are much smaller.

Oddly enough, although the page size is different, the site loads faster when you activate BJ Lazy Load than when you activate A3 Lazy Load. After each plug-in is installed, the site is tested several times to ensure that the speed test results are no exception. Ultimately, the difference boils down to the number of HTTP requests required to load the page. At first glance, it looks like BJ Lazy Load needs more requests. But if we look at the file tree, we can see what’s actually happening.

Enable Data URIs for the Lazy Load plug-in

The BJ Lazy Load-activated site file contains about 20data:image/gifThe initial request. These are data URIs, not HTTP requests. In fact, they tell the browser to create a gif locally instead of requesting that gif from the server. Therefore, BJ Lazy Load actually needs only 17 HTTP requests to build the page instead of the 27 required by A3 Lazy Load. This explains why pages load so fast.

Lazy Load XT uses a similar strategy, but still requires more requests than the BJ Lazy Load plug-in, which explains why it can’t produce exactly the same results.

4. Lazy Load

The fourth recommended plug-in is Lazy Load, a free plug-in developed by the well-known WP Rocket team. The plug-in has been activated for 4w + and has a 4-star rating. If you are looking for a fast and simple WordPress lazy loading solution, this plug-in is a good choice.

WordPress lazy loading plug-in developed by WP Rocket-Lazy Load

This plug-in applies to all images, avatars and emoticons in thumbnails, article content, or widget text. The biggest advantage of this plug-in is that it does not use JavaScript libraries, such as jQuery, and the script size is less than 10 KB. There is no configuration option, just install the plug-in and delay loading.

5. Lazy Load for Videos

If you only need to delay loading the video, the Lazy Load for Videos plug-in is fine. Although some of the above plug-ins also support video delay loading, Lazy Load for Videos is a good solution for video content.

Lazy Load for Videos plugin

6. WP Rocket

We recommend using the WP Rocket plug-in to delay loading images in WordPress. It is the best WordPress cache plug-in on the market and allows you to easily turn on image delay loading.

In addition, it is a very powerful plug-in that can help you optimize the speed of your site without having to understand complex technical terms.

Right out of the box, all of their default recommended cache settings will greatly speed up your WordPress site.

To enable delayed loading of images, you only need to check a few boxes. You can even enable delayed loading for videos, which will further improve the speed of your website.

For more details, see the guide on how to properly install and set up WP Rocket in WordPress.

7. Optimole

This method uses the free Optimole plug-in. It is one of the best WordPress image compression plug-ins that allow you to easily enable image delay loading.

If you have more than 5000 visitors per month, you will need Premium Edition.

First, you need to install and enable the plug-in. Go to Media »Optimole, and then you need to register an API key.

Just click “Register & Email API key” and it will be sent to you by email.

Then, enter your API key and click Connect to Optimole Service.

After that, click the Setting tab.

Here, you can make sure that the “Scale images and & Lazy load” setting is enabled. This will generate an image based on the visitor’s screen size and increase the loading speed.

Next, click the Advanced menu option and select Lazyload.

On this screen, there are some different settings that allow you to customize how images are delayed to load.

First, you can adjust the “Scale images and & Lazy load” setting. This prevents delayed loading of the image at the top of the article or page, so the image above the fold will always be displayed.

If you want each image to load late, you can set it to 0.

Next, you can enable the “Scale Images” switch.

This zooms the image to the visitor’s screen size and makes your page load faster.

After that, you can turn on the Enable lazyload for background images setting.

This will delay loading your background pictures, which may be some of the largest pictures on your site.

Another setting that you can enable is to delay loading embedded video and iframe. If you have a lot of embedded video content, you need to enable this setting.

This loads the placeholder image instead of the video. When it is clicked, the full video will be loaded.

You can continue to customize these settings and view the settings that best suit your site and images.

Before you exit the plug-in settings, be sure to click the Save changes button.

The influence of lazy loading on SEO

No matter which plug-in you end up using for delayed loading of WordPress, consider the impact on SEO. There are two things you need to ensure:

1. Make sure the search engine can still crawl delayed loaded images. You can check using the “Fetch as Google” tool under the crawl menu in Google Search Console. In fact, if you can see the content of the image in the source code, then it is probably not a problem.
2. Be sure to use alt on lazily loaded images, as this is important for search engine image search rankings

Delayed loading skills of WordPress

The key to making full use of delayed loading is to use it correctly. Here are some tips for performing deferred loading on your WordPress site:

• Do not delay loading the image above the fold. Because images placed at the top of the page are visible at load time, there is no benefit in delaying loading them.
• Select the appropriate placeholder. We recommend using solid, dominant, or low-quality images as placeholders for images.
• Add the buffer time for image loading. This way, your image can be ready before entering the visitor’s viewport, eliminating any wait time.
• Defines the size of the image container. Doing so will help avoid sudden layout changes and make your web page look neat when loaded.
• Delayed loading is implemented only on long pages. Long pages include those that require more than two scrolls to reach the end and have more than five images below the front screen.

Summary

What will that leave us? All four options increase page loading speed by delaying the loading of images and videos. Which one is best depends on your preferences and how you prepare the image before uploading it to the WordPress website.

• If the image is not optimized before uploading-A3 Lazy Load is recommended because the plug-in has built-in image optimization capabilities.
• If you optimize the image before uploading and are lazy, then BJ Lazy Load and Lazy Load are more suitable.
• If you optimize the image before uploading and want to have additional options for configuring CSS and JS resources to send processing, then it is recommended that you choose Lazy Load XT.

Lazy loading is just a technique that can be used to optimize WordPress sites. However, if you use a lot of images and videos, it can have a profound impact on the speed of the site. However, once you have implemented delayed loading, you can consider and implement several other techniques to improve the performance of your site. About the WordPress delayed loading solution? Or if you have any better suggestions, please feel free to leave a message.

In addition, there are many things we can do for WordPress to achieve better performance, such as CDN acceleration, WP caching, extremely simplified files such as CSS and JS, necessary Gzip compression, and so on. To know the performance of your WordPress website, you can use some professional website speed measurement tools for comprehensive testing, and then targeted optimization. If you can get a full score on the Google PageSpeed Insights test (actually more than 90), the site will be very OK.