PHPMatters Help You Better Hosting Your PHP-based Sites
How to Enable WordPress Lazy Loading for Images and Videos

How to Enable WordPress Lazy Loading for Images and Videos

Without doubt, the graphical and video components can achieve great diversity to your website content, with which you can better express your opinions in a vivid way and arouse reader’s attention in an effective manner. However, as these components require much longer time for loading than the plain textual content, embedding images and videos can slow down your page loading speed to some degree. In this case, if you want to display these attractive components on your WordPress powered website with the improved loading speed, you can consider the lazy loading function.

In the following, we’d like to showcase a general introduction of WordPress lazy loading along with how to enable this function on your webpages and blog posts.

Why to Enable WordPress Lazy Loading

In fact, lazy loading can be regarded as a front-end trick that delays the loading of images and videos until readers make a call-to-action for checking them, such as scrolling the pages or making a click. In this case, your whole webpage can be opened quickly without the need to load additional files and scripts that are brought by some multi-media components. To be frank, this is an effective way for speeding up WordPress sites that are coming with the heavy content. Even, as resources will only be loaded when they must do, you can reduce the unnecessary consumption of server bandwidth.

How to Enable WordPress Lazy Loading for Images

As for how to enable the lazy loading function, let’s begin with images. After all, instead of adding videos, the majority of webmasters are more likely to insert the large and full-width images into their websites. To achieve this, you simply need to leverage a related WordPress plugin. This time, we highly recommend you to have a try on A3 Lazy Load plugin.

Upon the installation of this rich-featured WordPress plugin, now, you need to click the Settings tab from the administrative panel of your WordPress site. Here, you can find the A3 Lazy Load button from the drop-down menu. Simply click it to make some configurations for this plugin, including the global settings, lazy loading activation, loading threshold and many more.

A3 Lazy Load

To begin with, you need to enable the lazy loading function in the Lazy Load Activation section. Simply turn on the special box.

Lazy Load Activation

After that, you need to open the Lazy Load Images section to decide which images will be delayed for loading, such as the images in blog content, in sidebar widgets, in the thumbnail section and in gravatars. Here, do not forget to turn on the option of enabling lazy load for images.

In addition, it is possible that you may have some critical images that you do not want to lazy load. Here, you can check the Skip Image Classes section, from which you can enter the related classes of your images for passing the lazy loading function. Note that if you want to enter multiple classes, you can use the comma for separation.

Also, you are even allowed to turn on the Noscript support, after which the Noscript tag will be activated automatically as a fallback for showing images to those who have disabled JavaScript in the browsers.

Lazy Load Images

The next step is to configure some minor settings. For instance, you choose to lazy load the images in your footer section or the header section, determine the loading effect between the options of spinner or fade in, decide the background color during the loading process and enter the exact pixels for the loading threshold of images.

Loading Effect

That’s it! Now, the images on your site can be lazy loaded based on your needs. However, this plugin has some shortcomings. For instance, it cannot disable the lazy loading function for some special webpages and for images with the proper sizes. Also, this plugin is not mobile friendly.

In this case, if you care about the above-mentioned aspects, you can consider the utilization of Image Lazy Load plugin, with which you can decide to lazy load images on mobile devices or only lazy load the images that are larger than your pre-determined pixels.

Image Lazy Load

In addition, in the post editing page, you can find a special Lazy Loading box at the end of the right hand section. By ticking the check-box, you can skip the lazy loading function of this special blog post or page.

Lazy Loading Box

How to Enable WordPress Lazy Loading for Videos

To lazy load the video components of your site, you can continue using the A3 Lazy Load plugin. As all the other settings are configured properly, now, you only need to enter the Lazy Load Videos and Iframes section to turn on this special function for all the HTML5 videos, WordPress embeds and any other content that is loaded using iframe.

In addition, just like the configurations of images, you can also decide whether to lazy load the videos that are showcased in the post content and widgets, enable the Noscript support and add some video classes for skipping.

Lazy Loading for Videos