What is lazy loading and how does it help to increase website performance?

Since Google announced that site speed would affect web search ranking, webmasters reading the announcement understood that website speed optimization should be at the top of their development plans.

Web page load times are important in determining how many users remain on your website. A one second delay in load time could lead to a ~20-30% reduction in conversion!

A significant part of a website load consists of images, static files, and videos. The size of the website and overall site speed does matter a lot! Even with an ever-increasing page load, there are things that you can do to improve how your site handles things.

And one of the best techniques to optimize images is Lazy loading, a comprehensive task that can undertake to make sure your website load times are minimal.

When the page first loads, it is important to only load the images that are actually ‘required’ and need to be displayed. When the user then scrolls down the page, the images can be loaded as and when they are required.

Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program's operation if properly and appropriately used. The opposite of lazy loading is eager loading. The performance gains are especially significant if the initialization of the object is costly, such as in the case of accessing network services. This makes it ideal in use cases where network content is accessed and initialization times are to be kept at a minimum, such as in the case of web pages.

Lazy loading is a programming practice in which you only load or initialize an object when you first need it. This can potentially give you a big performance boost, especially if you have a lot of components in your application.

The concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user. Putting in simple words on demand object loading rather than loading the objects unnecessarily. For instance, if you have a "Customer" class which has "Orders" object aggregated. So you like to load the customer data but the orders objects you would like to delay until your application needs it. Using lazy-loading the rest of the information will be fetched only if it is needed. So it is actually 'efficient-loading' in certain scenarios.

 

There are four common ways of implementing the lazy load design pattern, and each has its own advantages.

Lazy initialization

Lazy initialization is the tactic of delaying the creation of an object, the calculation of a value, or some other expensive process until the first time it is needed. It is a kind of lazy evaluation that refers specifically to the instantiation of objects or other resources.

With lazy initialization, the object to be lazily loaded is originally set to null, and every request for the object checks for null and creates it "on the fly" before returning it first.

If objects have properties that are rarely used, this can improve startup speed. Mean average program performance may be slightly worse in terms of memory (for the condition variables) and execution cycles (to check them), but the impact of object instantiation is spread in time ("amortized") rather than concentrated in the startup phase of a system, and thus median response times can be greatly improved.

Virtual proxy

A virtual Proxy is an object with the same interface as the real object. The first time one of its methods is called it loads the real object and then delegates.

Ghost

A "ghost", in computer programming, is the object that is to be loaded in a partial state. It may only contain the object's identifier, but it loads its own data the first time one of its properties is accessed.

Value holder

A value holder is a generic object that handles the lazy loading behavior and appears in place of the object's data fields.

Pros of lazy loading

• Unnecessary code execution is avoided.

• On-demand loading reduces time consumption and memory usage thereby optimizing content delivery. As only a fraction of the web page, which is required, is loaded first thus, the time taken is less and the loading of the rest of the section is delayed which saves storage. All of this enhances the user’s experience as the requested content is fed in no time.

• Optimal usage of time and space resources makes it a cost-effective approach from the point of view of business persons.

• Users connect to content faster, since only a portion of the website needs to be downloaded when a user first opens it.

• Businesses see higher customer retention as the content is continuously fed to the user, reducing the chances the user will leave the website.

• Businesses see lower resource costs since the content is only delivered when the user needs it, rather than all at once.

Cons of lazy loading

• Lazy loading may affect the website’s ranking on search engines sometimes, due to improper indexing of the un-loaded content.

• The extra lines of code, to be added to the existing ones, to implement lazy load makes the code a bit complicated.

How does lazy loading work?

When someone adds a resource to a web page (image, video, etc.), the resource references a small placeholder. As a user browses the web page, the actual resource is cached by the browser and replaces the placeholder when the resource becomes visible on the user’s screen. For instance, if the user loads a webpage and immediately leaves it, then nothing beyond the top portion of the web page is loaded.

 

So it's a win for making your site load faster as well as giving your users a better experience. The techniques used to achieve lazy loading are fully supported in the majority of major browsers including Chrome, Firefox and Microsoft Edge. A lazy load can be helpful for page speed optimization, to save your visitors’ bandwidth and to improve the user experience. Since its effect is objectively measurable, search engines might also honor your improved page speed.