current position:Home>Influence of lazy loading of Web front-end training on Web Performance

Influence of lazy loading of Web front-end training on Web Performance

2022-04-29 12:16:53InfoQ

Now in order to improve application performance , Lazy loading is widely used in  Web  Application . It helps developers reduce website loading time , Save traffic and improve the user experience .
However, the overuse of lazy loading will have a negative impact on application performance . So in this article , The impact of lazy loading on performance will be described in detail , To help you understand when to use it .
What is lazy loading ?
Lazy loading is a common technique , Reduce data usage on Web pages by loading resources on demand _
Front end training
Now lazy loading is a kind of  Web  standard , Most mainstream browsers support the use of  loading="lazy"  Properties use lazy loading .
// with img tag
alt=&quot;an image of a laptop&quot;
// with IFrame
Once lazy loading is enabled , Only when the user scrolls to the place where the content needs to be displayed will it be loaded .
Lazy loading can certainly improve application performance and user experience , This is why it has become the preferred optimization measure for developers when developing applications . But lazy loading is not always guaranteed to improve application performance . So let's look at the impact of lazy loading on performance .
Impact of lazy loading on performance
Many studies show that , Developers can achieve two advantages by lazy loading .
  • Reduce page load time (PLT):
    Reduce the first screen page loading time by delaying resource loading .
  • Optimize resource consumption :
    Optimize the use of system resources through lazy loading of resources , This works better on mobile devices with low memory and processing power .
per contra , Excessive use of lazy loading can have some significant impact on performance .
Slow down fast scrolling
If you have one  Web  application , For example, online stores , You need to allow users to quickly scroll up and down and navigate . Using lazy loading for such applications will slow down the scrolling speed , Because we need to wait for the data to load . This will reduce application performance and cause user experience problems .
Delays due to content changes
If you haven't defined for lazy loaded images  width  and  height  attribute , Then there will be a significant delay in the image rendering process . Because the resource was not loaded when the page was initialized , The browser does not know the content size for the page layout .
Once the content is loaded , And the user scrolls to a specific view , The browser needs to process the content and change the page layout again . This will shift other elements , It can also lead to a bad user experience _
web Front end training
Content buffer
If you use unnecessary lazy loading in your application , This causes content buffering . This happens when the user scrolls down quickly while the resource is still downloading . This happens especially when the bandwidth connection is slow , This will affect the rendering speed of web pages .
When should lazy loading be used
You must be thinking about how to make rational use of lazy loading , Make it give full play to its effect, so as to create better  Web  performance . Here are some suggestions to help you find the best starting point .
1.  Lazy loading the right resources in the right place
If you have a lengthy web page that requires a lot of resources , Then you can consider using lazy loading , However, it can only be used for content outside the user's view or collapsed .

Make sure you don't lazy load the resources needed for background tasks , such as  JavaScript  Components , Background pictures or other multimedia content . and , You must not delay loading these resources . You can use Google browser's  Lighthouse  Tools to check , Identify resources that can add lazy load attributes .
2.  Lazy loading content that doesn't hinder the use of web pages
Lazy loading is best used for unimportant and non essential  Web  resources . in addition , If the resource is not loaded lazily as expected , So don't forget error handling and providing a good user experience . Please note that , Native lazy loading is still not generally supported by all platforms and browsers .
and , If you're using a library or custom  JavaScript  Script , Then this will not work for all users . especially , Those prohibitions  JavaScript  Your browser will face the problem of lazy loading technology .
3.  Lazy loading on search engine optimization (SEO) Unimportant resources
As the content lazily loads , The website will gradually render , That means , Some content is not available when the first screen is loaded . How can I hear that , It seems that lazy loading helps improve  SEO  Web page ranking , Because it makes the page load much faster .
But if you overuse lazy loading , There will be some negative effects . When  SEO  When indexing , Search engines crawl websites to grab data to index pages , But because of lazy loading , The web crawler cannot get all the page data . Unless the user interacts with the page , such  SEO  You won't ignore this information .
But as a developer , We don't want to  SEO  Missing our important business data . So I suggest not to use lazy loading for  SEO  On the content of , Such as keywords or business information .
The article is reprinted from front-end development enthusiasts

copyright notice
author[InfoQ],Please bring the original link to reprint, thank you.

Random recommended