Close
Privacy settings
We use cookies and similar technologies that are necessary to run the website. Additional cookies are only used with your consent. You can consent to our use of cookies by clicking on Agree. For more information on which data is collected and how it is shared with our partners please read our privacy and cookie policy: Cookie policy, Privacy policy
We use cookies to access, analyse and store information such as the characteristics of your device as well as certain personal data (IP addresses, navigation usage, geolocation data or unique identifiers). The processing of your data serves various purposes: Analytics cookies allow us to analyse our performance to offer you a better online experience and evaluate the efficiency of our campaigns. Personalisation cookies give you access to a customised experience of our website with usage-based offers and support. Finally, Advertising cookies are placed by third-party companies processing your data to create audiences lists to deliver targeted ads on social media and the internet. You may freely give, refuse or withdraw your consent at any time using the link provided at the bottom of each page.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
DevSecOps

Lazy Loading

These days, no website or app can function without pictures. Graphics are an integral part of every web page, whether they be promotional banners, photos of the goods being sold, or company logos. Unfortunately, photos are typically quite large, accounting for the bulk of a page's total data transfer.

The newest data from the HTTP Archive show that the average desktop page weighs in at 1511 bytes. About 45% of the entire page size comes from images. Those images take up nearly 650 KB. Now that we can't do without photos, we need to figure out how to get them onto our websites quickly without slowing them down.

This guide will cover angular lazy loading, a method for enhancing page load times and decreasing page sizes without sacrificing any of the images.

Author
Lazy Loading

An Overview of Lazy Loading

Dynamic loading delays loading certain webpage elements, such as photos, until they are desired. Instead of "eager" loading, the browser waits till the user engages to request content. When used correctly, lazy loading can reduce page load times.

It's termed "lazy" because it makes web browsers hesitate. When a browser displays a lazy loading webpage, it is effectively saying, "I will wait to load these images until I really need to." "I will take care of everything right away!" a browser meaningfully indicates when presenting an eager-loading webpage. Procrastination is generally more efficient in this instance.

For example, a blog post may feature an image at the top of the page and an illustration near the bottom. The browser waits to load the diagram until the viewer scrolls down the blog post, which could take several minutes. Since the browser only loads one image, the website loads faster.

How does it work?

Lazy loading usually occurs during user navigation. When a user scrolls down a page, the browser loads the images there.

The part of a webpage that a visitor sees is called "above the fold," whereas the part they don't see yet is "below the fold”. Images above the fold must load instantly or the user interface will suffer. Scrolling down reveals photographs below the fold. Thus, below-the-fold graphics can lazily load.

What does "fold" mean, exactly? "Above the fold" and "below the fold" come from newspaper layouts. The reader first sees the front half of a newspaper folded horizontally. A web layout's "fold" is the user's screen's bottom.

Lazy Loading

Pros and Cons of Lazy Loading

Pros:

  • Faster page load

When all else is balanced, webpages with reduced file sizes load faster. Optimal loading reduces the initial page size so that a website loads more quickly. Faster loading times have several positive effects on search engine optimization, user conversion rates, and overall website satisfaction.

  • Nothing extra

Let's say a page has several photos below the fold, but the user leaves the page before they have a chance to load. In this scenario, the browser's time and effort in downloading and rendering the photos were in vain. Lazy loading, on the other hand, delays the loading of these images until they are truly required. As a result, the website's owner can potentially save money on bandwidth costs and save time processing requests.

Cons:

  • Users can request assets quicker

For example, if a user rapidly scrolls down a page, they may need to wait for the images to load. This may have a deleterious impact on the user experience.

  • Additional server interaction

Rather than requesting all of the page content at once, the browser may need to submit multiple queries to the website's servers for material as the visitor engages with the page. This potential disadvantage is mitigated by the use of a content delivery network (CDN), which caches the images so that the browser does not have to submit a request to the origin server to retrieve them.

  • Additional script for the web browser to handle

If a programmer adds multiple lines of JavaScript to a webpage to tell the browser how to lazy load page supplies, the browser has to load and process more code. This minor additional loading and processing time may outweigh the time saved by lazy loading if executed inefficiently.

Eager Loading Vs Lazy Loading

When there is a chance or a requirement to load resources in the background, eager loading is advantageous. Some web apps display a "loading" page while others immediately begin downloading all the necessary files.

Smart loading puts off initializing a resource until later, while eager loading does it immediately. In addition to preloading the resource itself, eager loading also preloads any dependent entities. An example of eager loading is the loading of materials referenced in an included line in a PHP script.

Implementing Lazy Loading  

It can be implemented with a number of freely available libraries, some of which are:

  • blazy.js is a small JavaScript library for multi-serving and lazy loading of resources including photos, iframes, and video.
  • LazyLoad is a script that will only load images when they are actually visible in the viewport.

The following techniques can be used to introduce this loading into your code:

Lazy initialization

This method sets entities to null. When a component is invoked, its data is loaded only if and when it is not null.

  • Virtual proxy
  • When requesting a resource, invoke a virtual object with the same interface. Load the actual object and delegate control to it when the virtual object is invoked.
  • Ghost

import a file in a partial form employing only the object's identifier. For the first time an object's property is accessed, full information must be loaded.

Value holder

build a universal object that supports sluggish loading behavior. A data field for this object should be displayed instead.

Lazy Loading Video

The preload trait of the HTML5 cinematic element can be used to lazy-load a clip that does not auto-initiate.

Chrome includes automatic sluggish loading for auto-playing clips. If you want your video to play on non-webkit gateways, you'll need to add the following features to the video tag:

<video autoplay muted loop playsinline width="xx" height="xx" poster="placeholder-image.jpg">

Sluggish Calibration of Images

Shows a small thumbnail of the actual still and swaps it to implement slow loading of images. Slow image buffering can be accomplished in a number of different ways technically:

  • Event handlers for things like scrolling and resizing are attached to inline img> tags if the picture is visible in the viewport.
  • API for Intersection Observer
  • CSS's background-image attribute

Other Page Resources That Can Use Lazy Loading

  1. Iframes

They are a type of code that may be used to include material from an external source into a web page. The image loading attribute discussed below in HTML can also be used in iframe elements.

  1. JavaScript

The syntax of JavaScript is a render-blocking resource, indicating that a browser cannot render the page until the JavaScript code has loaded. The load time of websites that require to execute JavaScript can be decreased by breaking the code into smaller modules that are loaded on demand.

  1. CSS

It is another resource that delays rendering. The time spent waiting for a CSS file to load can be minimized by breaking it up into many conditionally loaded files. Non-blocking CSS files should have their own link with a media property to indicate when they should be loaded.

FAQ

Open
What is lazy loading and how does it work?
Open
What are the benefits of lazy loading?
Open
Does lazy loading impact SEO?
Open
How can I implement lazy loading on my website?
Open
What Does the Future of Lazy Loading Look Like?

References

Lazy Loading - Github topics

Lazyload - Github repository

Subscribe for the latest news

Updated:
February 26, 2024
Learning Objectives
Subscribe for
the latest news
subscribe
Related Topics