What Is Lazy Loading? What to Know About Lazy Loading

Images play a very important role on every website because they appear almost everywhere, from the logo and banners to product images. Quality images attract users and give them the best experience on your website. But many images come with a large file size, which affects page loading, and that can frustrate users when the wait is too long. Yet you cannot simply remove images. This is when we need the technique of Lazy Loading. So what is lazy loading? Let's find out together with us in the article below.

What Is Lazy Loading?

Lazy loading ("lười tải" in Vietnamese) is exactly what the term describes. Lazy loading is an "action" that browsers perform when instructed. When a page has a lot of data to load, loading all of it slows down the page and hurts traffic and page quality. Most users who visit a website do not scroll straight to the bottom, so loading everything and "waiting" for users wastes the website's resources.

So when lazy loading is applied to a website, data is "loaded late", and when users scroll to that part, the data loads right away. Put simply, lazy loading means content appears when needed. Data appears as you scroll to it, to avoid slowing down page loading.

Advantages of lazy loading

The big plus of lazy loading is its effect on website performance. Because it loads only the data that is needed and within the user's view, it is no exaggeration to call lazy loading one of the most effective techniques for optimizing website performance today. It limits the delay of loading everything on the page at once, but only when you know how to implement it properly.

See more:

• How to check your website speed
• 10 effective ways to speed up a WordPress website
• What is Google PageSpeed Insights? How to improve your PageSpeed Insights score
• What is a CDN? How to speed up website access in Vietnam and international markets

Why use lazy loading?

Improve website performance

When all data has to load at once and there is a lot of traffic, the browser takes quite a long time to do it, and worse, the page may lag and the browser has to reload everything from the start.

In addition, when the browser is "overloaded", errors can occur and some data may fail to load, leaving the site with hidden content.

This leaves a bad impression in both appearance and user experience, making the website look unappealing. It also reduces traffic and engagement. With lazy loading, data loads only when users scroll to it, which gives users results faster, makes the website look more "professional", and helps it "preserve" all its data.

Save resources

Applying lazy loading to "defer" data that is not needed yet saves memory, CPU and GPU, and is especially useful for users browsing on mobile devices with slow connections.

Improve the user experience

User experience (UX) has many criteria for judging whether a website meets users' needs.

One of the criteria many people care about is page load speed. When a website has to load too much data it does not yet need, it slows down page loading and the data on the page.

In addition, more and more people access the internet from mobile devices (according to VPN Mentor, in 2021 mobile devices accounted for 48.2% of global web traffic), so mobile optimization is also a criterion that deserves attention.

Lazy loading improves page load speed and reduces hidden-data errors, which improves user experience effectively.

Raise your website's score

Users and Google both prefer sites that load faster over slow ones, because fast sites deliver search results faster and gain more visits.

If you care about "scores", lazy loading is a great technique to use on your website's data.

Lazy loading makes your website load faster because it does not spend time loading all data in sync, which raises your website evaluation score based on page load speed measures.

Lazy loading techniques

Lazy loading only works when you use it for the right purpose, at the right time and for the right audience. Be careful with lazy loading because it also has drawbacks:

• It can cause flickering with content that has not loaded yet.
• Implementing lazy loading simply requires more Javascript work, is more complex and is more error-prone. When the JavaScript fails to download because of a network error, or the JavaScript cannot run, the data set to lazy load will not appear.

When to use lazy loading

When a page has too much data to load (images, special character strings, commands that run the page's interface and so on), slowing down page load speed and lowering site performance.

When the site needs mobile optimization and faster page loading. The site's target users should have devices with a broadband connection and a fast network, so they do not run into problems with the lazy-load JavaScript.

If the site has data that serves sales (sites similar to e-commerce sites), lazy loading is not appropriate, because customers may not find the products they need if those products are "hidden".

Getting ready to use lazy loading

Before using any technique, the first thing to do is to understand it and what it brings to your website. The same applies to lazy loading.

Lazy loading is just an attribute that "controls" when data appears on a page (usually images). You can use lazy loading with the loading attribute.

The loading attribute has three values matching their functions: lazy, eager and auto.

• Lazy – lazy loading: the browser should lazy-load this data.
• Eager – eager (keen, enthusiastic): this value "tells" the browser to load the data immediately or as early as possible. If data that was loading with the lazy mechanism is changed to eager, it will load right away.
• Auto – auto (automatic): the browser decides whether to lazy-load the data or not.
  Ways to apply lazy loading to data (images).

Use the loading attribute

This approach is fairly simple. You don't need JavaScript, and you don't have to worry about errors with the images on your page. All you need to do is tell the browser which images to lazy-load with the loading attribute and its three values: lazy, eager and auto.

Use a fallback or polyfill

For browsers that don't support the loading attribute, we can implement lazy loading with a fallback (a backup option) and a polyfill (code that implements a feature the web browser doesn't support).

Likewise, with a fallback or polyfill we write the code around the loading attribute to lazy-load the images.

Use the Intersection Observer API

• The Intersection Observer API: lets you watch for the moment users scroll to the data (images) you care about and then run an action on it.
• The Intersection Observer API can lazy-load images too, but it doesn't use the loading attribute like the two methods above. You only use the lazy image command when you want to lazy-load images on the page. In addition, the Intersection Observer API can lazy-load background images as well, with the lazy-background command.

See more:

• What is an API? The definition of a Web API and how it is used in website design

Things to keep in mind when using lazy loading.

The methods above each have their own quirks, depending on the browser. For example, the Intersection Observer API is not supported in Internet Explorer and Opera Mini, although it supports lazy loading in all other web browsers.

If you have to use Internet Explorer to lazy-load data, you can use a polyfill to emulate the Intersection Observer API and then use it as normal.

About layout shift:

• When you apply Lazy Loading to images or to data in general, the data loads as users scroll, and the page may jump because the browser can't work out the image size in advance. Content gets pushed around the page, which looks messy.
• So before using lazy loading, specify the exact size of each image. When users scroll down, the image then loads without shifting anything else on the page.

Also remember not to overuse lazy loading. If your website has few images (fewer than 5 images), don't apply lazy loading, because it won't change page load speed much. You can optimize the images instead of lazy-loading them. Be careful when you lazy-load with the Intersection Observer API.

When you use the Intersection Observer API to lazy-load images, the command scr becomes data-scr and Googlebot doesn't understand data-scr. Googlebot will then treat your images as broken and won't index them. With the lazy value of the loading attribute, this method does not lazy-load background images. Avoid lazy-loading images at the top of the page, to keep layout shift to a minimum.

See more:

• What is Google Index? Ways to help Google index faster

You know what your website is missing, but … you is never are not a website management expert and lack the skills for:

• Build a pixel-perfect design that looks exactly the way you want
• Build the features you need to attract users
• Speed and security optimization
• Meet every SEO requirement
• …

MONA Media offers website optimization and upgrade plans tailored to your needs so your website turns out exactly the way you want.

We hope the information above has helped you understand more about the technique Lazy Loading.