• Effects of Too Much Lazy Loading on Web Performance
  • Yasas Sri Wickramasinghe
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: tong – h
  • Proofreader: Isildur46 Xionglong58

The impact of excessive lazy loading on Web performance

Lazy loading is widely used in Web applications to improve application performance. It helps developers reduce site load times, save traffic and improve the user experience.

However, the excessive use of lazy loading can have a negative impact on application performance. So in this article, I’ll detail the performance impact of lazy loading to help you understand when to use it.

What is lazy loading?

Lazy loading is a common technique for reducing data usage on a web page by loading resources on demand.

Lazy loading is now a Web standard, and most major browsers support lazy loading with loading=”lazy”.

// with img tag

<img 
  src="bits.jpeg" 
  loading="lazy" 
  alt="an image of a laptop" 
/>



// with IFrame

<iframe 
  src="about-page.html" 
  loading="lazy">
</iframe>
Copy the code

Once lazy loading is enabled, the content is loaded only when the user scrolls to the point where it needs to be displayed.

As you can see, lazy loading certainly improves performance and user experience, which is why it has become the number one optimization for developing apps.

But lazy loading doesn’t always guarantee better application performance. So let’s take a look at the performance impact of lazy loading.

Impact of lazy loading on performance

Many studies have shown that developers can achieve two advantages through lazy loading.

  • ** Reduces page load time (PLT) : ** Reduces the first screen page load time by delaying resource loading.
  • ** Optimizes resource consumption: ** Optimizes system resource usage through lazy resource loading, which works best on mobile devices with low memory and processing power.

On the other hand, excessive use of lazy loading can have some noticeable performance impacts.

Slow down fast scrolling

If you have a Web application, such as an online store, you need to allow users to quickly scroll up and down and navigate.

Using lazy loading for such applications slows scrolling because we need to wait for the data to finish loading. This can degrade application performance and cause user experience issues.

Delays due to content changes

If you do not have the width and height attributes defined for lazily loaded images, there will be significant delays in the image rendering process. Because resources are not loaded when the page is initialized, the browser does not know the content size that applies to the page layout.

Once the content has loaded and the user has scrolled into a particular view, the browser needs to process the content and change the page layout again. This displaces other elements and leads to a poor user experience.

Contents of the buffer

If you use unnecessary lazy loading in your application, this can cause content buffering. This happens when the user quickly scrolls down while the resource is still being downloaded.

This can happen especially with slow bandwidth connections, which can affect web page rendering speed.

When lazy loading should be used

By now you’re probably wondering how lazy loading can be used to its maximum effect to create better Web performance.

Here are some tips to help you find the best place to start.

1. Lazy loading of the right resources in the right places

If you have a long web page that requires a lot of resources, you can consider using lazy loading, but only for content that is out of user view or collapsed.

Make sure you don’t lazily load resources needed to perform background tasks, such as JavaScript components, background images, or other multimedia content. Also, you must not delay the loading of these resources.

You can use the Lighthouse tool in Google’s Browser to check for resources that you can add lazy loading properties to.

Lazy loading of content that doesn’t interfere with web usage

Lazy loading is best used for non-essential Web resources that are not important. Also, if resources don’t load as lazily as expected, don’t forget about error handling and providing a good user experience.

Note that native lazy loading is still not universally supported across all platforms and browsers. Also, if you’re using a library or custom JavaScript script, this won’t work for all users. In particular, browsers that disable JavaScript face problems with lazy loading techniques.

3. Lazy loading of resources that are not important for search engine optimization (SEO)

Sites tend to render gradually as content loads lazily, which means that some content is not available on the first screen. At first glance, it sounds like lazy loading helps SEO page rankings because it makes pages load much faster. But if you overuse lazy loading, it can have some negative effects.

When SEO indexing, search engines crawl sites to capture data in order to index pages, but due to lazy loading, web crawlers cannot capture all page data. Unless the user interacts with the page, SEO won’t ignore this information.

But as developers, we don’t want SEO to miss out on our important business data. So I don’t recommend lazy loading for SEO specific content, such as keywords or business information.

conclusion

Lazy loading can increase page usage and performance and is a handy tool for Web developers. “Overcooking spoils the soup,” and overusing this technology can also degrade website performance.

In this article, we look at the performance impact of lazy loading with a few suggestions to help you understand when to use it. If you use this technology carefully and know where and when to use it, your site will see significant performance improvements.

Hope you have got useful knowledge points, thank you for reading!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.