Hãy nhìn lại cuộc sống của bạn.

How to Lazy Load Images in WordPress to Defer Offscreen Images

1 54.581

Do you know how to Lazy Load Images in ­­WordPress to fix Defer Offscreen Images warning in Google Pagespeed Insights ? Learn how to lazy load images and videos in WordPress to speed up your website. PageSpeed has become an important element for user experience as well as search engine rankings. Therefore, every blogger and webmaster wants a fast loading website. Of course, you also want maximum PageSpeed for your WordPress site.

In this article, I will take you through how to lazy load images and videos to Defer Offscreen Images in WordPress – to speed up your site. You might ask, why lazy loading? Because Lazy Loading Images is an easy and tested trick to unlock more speed for your WordPress website. This article will cover what is lazy loading & how does it work, benefits of lazy loading images (& videos) in WordPress. How to Easily Lazy Load Images in WordPress to Speed Up Your Website and how to Defer Offscreen Images in WordPress, plugin(s) to use.

What is Lazy Loading? And How Does it Work?

If you have not come across this before, let me tell you ‘what is lazy loading?

Lazy Loading means loading of the specific resource (in this case: images, videos etc.) when the user scrolls down to that particular resource. In some cases, lazy loaded (deferred) resources load at a specified time or on-click of a button. [1]

In conclusion, if you have enabled lazy loading for images in WordPress, the web browser will download an image only when the user scrolls down to that image or at a certain time or on-click of a button (as you have defined).

Read more How to speed up WordPress site – images optimization

Benefits of Lazy Loading Images in WordPress

Why you should implement lazy loading in WordPress – the advantages.

As I have mentioned above the idea is, to improve pagespeed and load webpage faster.

Let’s see, how lazy loading helps to improve pagespeed.

Images and videos have become an integral part of today’s web content. The biggest demerit they bring is – increase in payload of the webpage.

Lazy loading images and videos is one of those solutions which lower the initial pay-load and load time without affecting the text content.

When lazy loading is implemented for images and videos – the HTML, CSS, JS and other resources of a webpage will be downloaded in the first attempt by web browsers. After that, the images will be downloaded at the specified place or time.

Hence lazy loading pre-optimized images and videos help to lower initial pay-load and load time in order to improve pagespeed.

And a fast loading website means better user experience and more love from search engines because Google already started taking into account PageSpeed as one of the ranking factors.

Defer Offscreen Images in WordPress by Lazy Loading

Google PageSpeed Insights might have showing Defer Offscreen Images waring for your WordPress site. The warning text says,

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.

To fix this warning, Google recommends the use of IntersectionObserver to implement lazy loading offscreen images more preciously. [2]

Here the catch is if you’re neither a coding ninja nor in position to hire a programmer to made a custom solution using IntersectionObserver to lazy load images in WordPress to defer offscreen images.

Then you’re left with an easy and popular solution i.e. using a reliable plugin to defer offscreen images in WordPress by lazy loading them.

How to Lazy Load Images in WordPress

We will Lazy Load Images to Defer Offscreen Images in WordPress.

There are several plugins in WordPress repository to Lazy Load Images in WordPress. Here I am listing the plugins which I found distinct based on their features and usability.

If you are not sure how to install a WordPress plugin, you can refer to this guide How to install WordPress Plugins Easily.

Plugins to Use to Lazy Load Images and Videos in WordPress

1. Lazy Load Optimizer

Lazy Load Optimizer is free plugin which lazy loads images, iframes in order to improve pagespeed. This plugin can lazy load images of posts, pages, custom post types, widgets and image gallery etc.

Also, the plugin is WooCommerce compatible hence it can lazy load product images, product category images in WooCommerce sites.

In addition to that, the plugin improves PageSpeed Insights score, by fixing defer offscreen images error.

How to use Lazy load Optimizer plugin ?

Step by step instructions to lazy load images in WordPress to fix defer offscreen images warning – Using Lazy Load Optimizer plugin:

  1. Install and activate Lazy Load Optimizer plugin.
  2. Go to WordPress Dashboard > Settings > Lazy Load Optimizer settings.
  3. From the plugin’s settings page, you can tweak CSS classes to exclude lazy loading, enable/disable iframes lazy load and few other settings.
  4. Also, you can access other plugin settings from WP Customizer > Lazy Load Setting. From here you can enable/disable lazy load spinner image & select its size, can choose from image transitions for lazy loading.

Later go to Adding lazy load style and done.

2. Lazy Load plugin

Lazy Load is quite popular and lightweight plugin. Automattic is one of the contributors & developers of this plugin. This plugin is written by WordPress VIP team, the TechCrunch 2011 Redesign team, and Jake Goldman. Literally, this plugin is real plug and play thing. As all you need is to install and activate this plugin. That’s all. All the images will start Lazy Loading. There are no settings in this plugin.

3. A3 Lazy Load

A3 Lazy Load is newer as compared to other plugins in this list. The major reason for inclusion of A3 Lazy Load plugin in this list is that it has some really good features. Also, this plugin has 5 out of 5 user rating in WordPress plugin repository.

Unlike above Lazy Load plugin, A3 Lazy Load allows you to tweak settings/options for lazy loading images.

With A3 Lazy Load you can configure to lazy load specific type of images like Images in content, Images in widgets, post thumbnails, gravatar images etc.

Do you know? How to speed up WordPress site – images optimization

In addition to image lazy loading, this plugin supports lazy loading for videos and iframes too.

You can also tweak the image loading effect: spinning or fade in.

BJ Lazy Load

BJ Lazy Load is also another popular plugin to Lazy Load Images in WordPress. This plugin also has settings page similar to the previous plugin, you can change plugin settings based on your requirement.

Bottom Line

Lazy Loading images in WordPress is definitely a performance-boosting feature which everyone should implement to his website. As far as the question is which plugin you should use. The answer is purely dependent if you want a tiny plugin then you should go with Lazy Load plugin. On the flip side, if you want to play with the Lazy Loading settings then you should try A3 Lazy Load plugin and if you are looking a fix for Defer Offscreen Images warning, you should give a shot to Lazy Load Optimizer plugin.

Do you know that you can also lazy load other resources in WordPress? Like you can How to speed up WordPress site – images optimization

Hope you find this article helpful to Lazy Load Images in WordPress. If you have a question regarding this topic, feel free to ask via comments. I will be happy to help.

Để lại bình luận

Địa chỉ email của bạn sẽ không được công bố.

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.