How Lazy Loading Images Improves WordPress Website Performance

Written by Suresh Kalyanasundaram

06/02/2020

reach your audience

What is lazy loading & why is it required for any website?

 

In this article, I will tell you how lazy loading works and how it can improve site performance. As well as how to implement lazy loading in WordPress.

Lazy loading is a way to increase the page display speed by delaying the loading of non-critical resources that are located below the visible area of ​​the browser window. Such resources include images that we do not see yet. Images are ideal for lazy loading, as they are resource-intensive. Videos, scripts and comments can also be left for later.

With lazy loading, resources are not loaded until they are needed. And if the user does not scroll the web page to the end, they will not be displayed on the page at all.

Why is lazy loading better?

 

Lazy loading images in WordPress improves website performance, SEO and user experience. It reduces the weight of the start page and loads its elements as needed.

In this case, the browser first creates the DOM so that the user can start interacting with the site, even if the web page has not yet been fully loaded.

With lazy loading, image files and a web page are not reduced. If the page’s “weight” is 3 MB, then it will remain that way with or without lazy loading.

At Google, page loading speed is a ranking factor. Therefore, the search engine recommends using lazy image loading to improve performance.

I created a web page with several huge images. Then I audited the test site with Google PageSpeed ​​Insights. The score increased from 89 to 91 after I added lazy loading to Smush Pro.

After activating lazy loading with Smush Pro

And lazy loading reduces the amount of data transferred. Visitors with a slow internet connection will be grateful to you for this.

How does lazy loading work?

 

First of all, you need to determine which images should be postponed. This is the graphic content that is not currently visible to the user. And also the one whose absence will not affect the structure of the web page.

For example, the logo image used in the header of the site or in banners above the main text should not be downloaded using lazy loading.

In addition, you need to “lazily” upload images that are 500 pixels lower from the viewing area so that they can fully load before the user reaches them.

    • Disable regular image uploadIf you are using lazy loading on a site, you must prevent downloading in the usual way. One way to do this for <img> tags is to remove the image URL from the src attribute and move that address to the data-src attribute for temporary storage.
    • Determine how the browser will detect images in the viewportYou need to determine how the browser will find images in the viewing area. You can use the Javascript event handler or the Intersection Observer API to do this.
    • Javascript event handlerUsing JavaScript event handlers scroll, resize, and orientation change is an ideal way to determine if an element has reached the viewport. Since this approach is compatible with all browsers. But you also need to implement element visibility identification using getBoundingClientRect. This may cause a slight delay in rendering images. An example can be seen here.
    • Intersection Observer APIThe Intersection Observer API is the most efficient way for browsers to determine when an image has entered the viewing area. This approach is faster than using event handlers. To implement it, register an observer to view the elements and set the browser action when the image enters the viewport area. Intersection Observer API has good browser support but has not yet received widespread distribution. Therefore, you need to use Javascript event handlers as a fallback for incompatible browsers.
    • Move image URL to the src attributeOnce the browser detects that the image has appeared, it will need to insert the URL into the src or srcset attribute to load and display the image. After that, you need to remove the classes added to the image to help Javascript identify it. Then remove the observer.

How to use lazy loading in WordPress

 

You can add lazy uploads to your WordPress site using plugins or Javascript. Both options give similar results.

Option 1: Use JavaScript to delay loading hidden images in WordPress

The best way to do this is to create a plugin for your JavaScript code. There are two examples on this page. One shows how to use event handlers, and the other shows how to use the Intersection Observer API.

Option 2: Using the JavaScript Lazy Loading Library

If you want to use the JavaScript library, there are many options:

  • react-lazyload – React deferred loading library, does not use Intersection Observer.
  • js – uses only Intersection Observer, a super lightweight.
  • blazy is also lightweight but does not use the Intersection Observer.
  • js – uses Intersection Observer and event handlers.
  • lazysizes – suitable for lazy loading of videos and frames.

You can also use jQuery since this library is already contained in the core of WordPress.

Option 3. Using the lazy loading plugin

The easiest way to add lazy uploads to your website is to use a specialized WordPress plugin. Most paid image optimization plugins (e.g. Smush Pro) have built-in lazy loading functionality. It is also available for free on WordPress.org.

The process of activating lazy loading in the Smush plugin extremely simple. All you need to do is go to the ” Lazy Download ” section of the Smush Pro plugin and click the ” Activate ” button.

Install Smush Pro and activate lazy loading in less than two minutes

What you need to know when using lazy loading for images

 

  • Lazy loading does not add extra weight to the site. But if implemented incorrectly, it can prevent search engines from crawling the site.
  • Keep in mind that the folding line (above the fold line) of a web page varies depending on the user device.
  • Use the placeholder attribute instead of leaving the src attribute empty. And specify the height and width of the image so that the content does not move when it is downloaded.
  • Use the <noscript> markup to indicate what action should happen if the visitor has JavaScript disabled.

Conclusion

Delayed loading is an efficient and easy way to improve site performance. This method will work for all images specified in the <img> tag.

If you need to lazily load background images in CSS, then you should use a similar method designed to target images. You will also need to use CSS selectors.

Have you already used lazy loading on your site? Did it boost site performance in Google Pagespeed Insights? Write to us, we are happy to help speed up your website.

 

 

Liked the article? Share it with your friends!
SEMrush
Digital Marketing Course in Chennai