Lazy Loading, a Performance improvement Technique

What is Lazy Loading?

Lazy Loading is a design pattern where the browser renders only the necessary resources and doesn't serve or render non-essential resources.
To put it simply, it's when a browser loads only what's needed at a given time.

Why Lazy Loading?

The quantity and size of assets being sent to users has experienced an exponential increase from 2011 - 2019. Hence there's need to optimize the steps taken to convert HTML, CSS, and Javascript on the users' screens. 

Take this scenario, a website that uses lazy loading for its images. Instead of loading all the images on the page at once, the website only loads the images that are visible to the user. As the user scrolls down the page, more images are loaded dynamically. This approach can significantly improve the website's loading time, especially for pages that contain a lot of images.

When does Lazy loading occur?

On many occasions, it occurs when a user makes interactions with the website content. 

1. User scrolling: This is the most common occurrence of lazy loading. As the user scrolls down the page, images and other resources are loaded dynamically.
2. Page navigation: When a user clicks on a link to go to another page on the website, lazy loading can be used to load only the essential resources needed for the new page.
3. Tab switching: In a website with multiple tabs, lazy loading can be used to load only the resources needed for the active tab.
4. Conditional loading: Lazy loading can be used to load resources conditionally based on certain user actions or device characteristics.

Overall, lazy loading helps to reduce the load time of a website by only loading the necessary resources, resulting in a faster and more efficient user experience.

How to apply Lazy Loading?

1. Code Splitting
This is the practice of splitting the code a website depends on, into small chunk files that can be downloaded independently on client request.

In most cases, if not all, your website accumulates javascript code to be used to render the resources of your website. Most applications have one entry point, for example, index.js, and zero or more secondary entry points.

Take this example of the file layout of a package in angular, the @angular/core. The index.d.ts has the bundled .d.ts and is the primary entry point for@angular/core.


A large Javascript entry point means the website will render once all the Javascript bundle file has been downloaded by the client (Browser etc).

Code Splitting is therefore necessary to split the Javascript into several bundle files that can be downloaded by the browser separately commonly known as chunk files that are now only loaded when a user requests to use the files. 

There are two ways of code splitting

• Entry point splitting
• Dynamic splitting, where the import()expression is used

2. CSS Optimization 

CSS is a render-blocking resource: the browser blocks page rendering until it receives and processes all the CSS. Since it's Cascadiing, some elements inherit from others and the idea of traversing nodes in the DOM tree can contribute to performance decay if not well optimized.

3. Font Optimization

By default, font requests are delayed until a render tree is constructed. Font Display is one of the techniques to consider when lazy loading fonts. It informs the browser on how it should proceed with ext rendering if the required font has not loaded.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

We have 5 font-display timelines to consider

Checkout here for in-depth font performance optimization techniques

4. Media Optimization

Media contributes to the most performance issues on websites. Lazy loading can be applied to media resources such as images and videos to only load what's necessary at a given time, resulting in faster loading times and a more efficient user experience. 

Additionally, optimizing media files by compressing and resizing them appropriately can further improve website performance.

Also, the loading attribute can be used to lazy load media like mages and iframes.

In summary, lazy loading is a design pattern that helps optimize the loading time of a website by only loading essential resources, resulting in a faster and more efficient user experience. It can be applied to various website elements such as images, videos, fonts, and CSS, through optimization techniques such as code splitting, media optimization, and font optimization. By implementing lazy loading, website owners can significantly improve their website's performance and user experience.

Let me know if I have left anything out.

SHALOM!