In recent times we are often focusing on the issues of technical SEO and, in particular, the increasing importance of the speed of page loading, a factor now crucial for the performance of the site. Today we continue in this wake and we deepen the discussion on lazy loading, one of the most frequently recommended systems in particular to try to increase the speed of service of images: that’s what it is, how it works and how to avoid errors with slow or lazy loading.

What is the lazy loading

Simply put, lazy loading is a technique based on asynchronous resource loading and on downloading scripts on demand, that is only at the time when that portion of the page serves the user or when those resources are actually necessary for the continuation of the application.

In more technical terms, Google defines lazy loading (which can be translated into English as lazy or slow loading) as a UX best practice that involves deferring the loading of non-critical or non-visible content, which are loaded later than the main content.

What is lazy loading for

In theory, we can apply slow loading to all types of scripts, but in practice the lazy loading system finds more frequent use for images or videos: in any case, its ultimate aim is to lighten the weight of all the contents that can make slow the use of the page.

This technique in fact speeds up the loading of the page and offers a better user experience to the user, who does not have to wait for the loading of all the images and scripts present on page to begin to interact with the content. Thanks to the lazy instructions, the system automatically loads only the portion of page that really serves the user at that time, allowing you to streamline the download speed and optimize the viewing time.

This strategy becomes essential to ensure a good use of the page to all users, regardless of the level of connection and the capacity of the network, and in particular to those who browse with mobile devices where loading is generally less fast than desktop devices (and in fact Google has cited lazy loading also talking about the best practices for the mobile-first indexing)

In this way, users do not suffer excessive slowdowns caused by connection problems and the overall weight of the overall content of the page, but they can view the necessary resources related to the part of the page they are viewing at that time.

The benefits of lazy loading

As a result, lazy loading has some interesting advantages:

  • It reduces the initial loading time and initial page weight and the use of system resources, all of which have a positive impact on performance.
  • Avoids wasting processing time, battery and other system resources. After downloading a media resource, the browser must decode it and render its content in the viewport.
  • Makes initialization of the application faster.
  • Allows you to prioritize the main content and upload only when appropriate non-critical resources.
  • It reduces the overall bandwidth load, as it only downloads the scripts, resources and Javascript needed at that time.
  • It reduces the waste of data, as it allows you to use all the bandwidth to download only the resources that are actually displayed by the user.
  • It offers the ability to create a custom Javascript to be put on stand-by and download only as a result of specific user behaviors and interactions.
  • It allows to download scripts from any domain, even different from the current one, and therefore to bypass the “same-domain policy”.

Moreover, starting from August 2019, Google has integrated native support to lazy loading at the browser level: in the latest versions of Chrome you can in fact use an attribute to load resources in lazy mode-loading, without the obligation to write a custom code or use a separate Javascript library.

Lazy loading of the images

The field of action where lazy loading is most frequently found is the loading of videos and images, which are as we know often very heavy resources, that can help generate blocking points in the rendering phase – as well as being increasingly relevant to user engagement.

Thanks to the “energy saving” guaranteed by lazy loading – as we already wrote talking about the tips to optimize the images for SEO – the user immediately sees the resources present in the section of page that is consulting, while everything that is off-screen is loaded only when it actually scrolls the page or performs an action and reaches that portion of content.

Examples of lazy loading

Going back to the definition given by Google, lazy loading allows you to postpone the loading of non-critical content: in reference to images, this adjective is often synonymous with “out of field” and it is precisely in this sense that in the vast majority of cases this technique is used.

In the classic example of slow loading in action, the user reaches a page and starts scrolling as he reads the content; in this process a placeholder image appears (placeholder), which in a few moments is replaced by the final image.

This technique is very useful especially for e-Commerce, because it allows you not to have to load at the same time all the products of the page, which are often hundreds or even more, but to start downloading such resources only following the request of the user, therefore making the page lighter and above all faster.

Lazy loading and SEO, Google’s tips and warnings

With many advantages and practical effects, also come however some warnings regarding the use of lazy loading because – when not implemented correctly – this technique risks to cause a negative impact on the indexing of images.

Google explained that Googlebot is able to scan, index and classify web pages correctly where lazy loading is implemented correctly, but otherwise we may inadvertently hide content to the search engine, because in the presence of errors the crawler may not be able to view the content and then process it properly.

The first advice is therefore to avoid lazy loading of main content by linking it to user interactions (such as scrolling, clicking or typing), because Googlebot will not activate these commands and therefore the resources can not be analyzed.

Techniques to correct the content loaded through lazy loading

The Mountain View team then described in a specific guide the three steps to verify to use lazy loading correctly and avoid errors and problems, to which is added the use of an images sitemap signaling the presence of the resource.

First, we must load the content when it is visible in the viewport area, testing the actual functionality of this implementation. In addition, we need to verify that the page supports split loading for infinite scroll, which is important for both users and Google.

On the user side, in fact, continuous scrolling allows you to share and interact with content; for Google, it shows a link to a specific point of content, instead of at the top of a scrolling page. The best practice is to provide a unique link to each section that users can share and upload directly and to use the History API to update the URL when content is loaded dynamically.

No less important is the testing phase of the implementations made, so be sure of their actual operation: Google suggests using a Puppeteer script (a Node.js library for controlling Chrome headless) to test the intervention locally.

How to implement images lazy loading

From a technical point of view, there are at least three ways to implement lazy loading on the pages of the site, which require basic skills on programming languages; alternatively, you can use as we said a Javascript library among the countless available or specific plugins on WordPress, with which to customize various loading parameters to reach the goal of postponing the download of the resource only in conjunction with the scroll or user action.

On modern browsers that implement native slow loading, enabling is using the loading attribute on images and iframes.

Those who know how to manipulate the code can work on HTML, Javascript and CSS: from his blog, Marmonti explains three basic methods, simple and light that require the writing of very few lines of code.

It starts on HTML, using a “little trick” to postpone loading: that is, use the attribute data-src instead of the classic src, so that the browser – not finding the path of the image – temporarily ignores loading

We can also use a jQuery-based script, which replaces the data-src attribute for all images with src to allow the browser to load and display images:

$( document ).ready(function() {

[].forEach.call(document.querySelectorAll(‘img[data-src]’), function(img) {

img.setAttribute(‘src’, img.getAttribute(‘data-src’));

img.onload = function() {

img.removeAttribute(‘data-src’);

};

});

});

Finally, we can add specific properties to the CSS to produce an appearance effect (fade in) of the images and prevent them from appearing immediately:

img {

   opacity: 1;

   transition: opacity 0.3s;

}

img[data-src] {

   opacity: 0;

}

A valid technique to use carefully

In conclusion, lazy loading is really a very advantageous technique that allows you to greatly reduce the initial loading time and payloads of pages on the site, especially in the presence of images and videos in areas not immediately visible.

With this system, users will not have to support unnecessary network activities and multimedia resource processing costs that they may actually never see, but they can still view those resources if they wish and if they reach the given page portion.

And so, especially for sites that have lots of images to upload, lazy loading is a perfect way to reduce unnecessary uploads, as long as you do not block any resource!

Call to action