Be Lazier

Lazy Loading

Do you want to increase the performance of your applications without compromising on user experience?

Fast page loads are absolutely critical for web applications. The initial load time of an app effects everything about the users experience.

 - Audience Retention - If they'll stay 
 - Audience Conversion - If they'll come back 
 - Overall user experience 

Over time users have come to expect an increasingly rich and interactive experience. They want more features, more content, and they want it faster. As developers this means more Javascript, more data sent back and forth, but when we're working with so much more how could we possibly make our application faster. Especially when are devices and network conditions are not the same.
 
So the problem is we want more, faster. But in general if you want to load faster then you simply load less. This is a total contradiction!
While most strategies for speeding up page load include reducing the size of your initial payload this doesn't mean you need to strip features and content from your app. 

You can get pretty far by simply reconsidering what is absolutely critical for the initial load. Do you really need everything all at once to make give the user? Defer the non-critical resources for later.

 
So instead of having one massive file that you send, try splitting up the resources so that you can deliver them on demand. There are several ways you can do this

 - Code Splitting 
 - Lazy Load images and videos 
 - Lazy load application data

What is Lazy Loading

At this point you can probably guess what lazy loading is all about. But just to reiterate the main idea behind it, Lazy Loading is loading the content as its needed, not all at once. 

Here is a simple example to help solidify the concept.

Let's say you're visiting reddit/r/cats, and ofcourse there are thousands if not millions of cat pictures / content. If reddit was to try to send you all of these when you first visited the site you'd be waiting quite some time before you could look at all your favorite cats. Instead what reddit does is it only sends you a limited amount of cats when you first load the page, after that more and more cats are brought in as you scroll down. 

Load on Scroll

This kind of lazy loading works off of an event listener that monitors the scroll bar. When you hit the bottom of the page the event fires thus loading more cats giving the user the feeling of being able to infinitely scroll down the page. 

Intersection Observers 

We take the idea of only loading what's needed even further by trying to only load what the user is looking at. This behavior can be accomplished by using an intersection observer. For example you can find an Intersection Observer API at here. 

The Intersection Observer API lets code register a callback function that is executed whenever an element they wish to monitor enters or exits the viewport, or when the amount by which the two intersect changes by a requested amount. 

This does mean that you will need placeholders for all of your content and when the viewport intersects with that placeholder then the callback function is fired. In this call back you perform a fetch to quickly retrieve (typically) one resource to populate the placeholder with. In most circumstances it's faster to fetch one resource rather than 10.
 

Asynchronous Rendering 

While a component is loading or fetching the rendering of it is suspended. That means that the component will only show up when it's ready. While its not ready a fallback component takes its place. There are multiple ways to achieve this behavior. 

-High Order Components

React Suspense

import React, { Component, lazy, Suspense } from 'react';
import './App.css';;
const MyComp = lazy(() => import('./components/myComp'));

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <div>another component</div>
          <Suspense fallback={<div>Loading.....</div>}>
            <MyComp />
          </Suspense>
        </header>
      </div>
    );
  }
}

export default App;

import React from "react";

export default function myComp() {
  return <div>Hi there I am now loaded!</div>;
};

References

YouTube Channel
techsith - https://www.youtube.com/watch?v=tV9gvls8IP8&list=LL-3Wvw55vza7tgX28XooW1Q&index=18&t=288s

Geeks for Geeks
https://www.geeksforgeeks.org/what-is-lazy-loading/