Sick And Tired Of Fan-Activating Websites? Easy Ways To Improve Web Performance

Learn how to effortlessly manage large datasets in React while maintaining a sleek and responsive user interface through the implementation of windowing techniques.

Proof Of Concept — handling 5000 records gracefully

We all enjoy using sleek and efficient web applications like Twitter, where scrolling through tweets feels effortless and the user interface remains responsive. But have you ever wondered how they achieve this? The secret lies in techniques such as infinite scrolling and windowing. Infinite scrolling detects when the scroll position reaches the bottom of the container and loads more data, reducing loading time by retrieving data in chunks. Windowing, on the other hand, involves only displaying a small portion of the data at a time, further improving performance.

Twitter and Netflix employ the clever technique of windowing to enhance their user experience. On Twitter, a list of tweets is only loaded as you scroll, creating the illusion of an endless feed. Similarly, on Netflix, only the necessary cards are written to the DOM, giving the impression of an infinite carousel in the featured section.

What is Windowing?

Windowing is a powerful optimization technique that involves only rendering the visible portion of a large list in the DOM. This means that the parent element containing the list will only have a fixed number of elements. As the user scrolls, elements are added and removed from the DOM, maintaining a consistent number of child elements.

The window represents the visible section of the list

The window represents the visible section of the list. It’s important to note that windowing does not necessarily replace infinite scrolling. In fact, they can work together to create an even better user experience, as seen on Twitter. Without windowing, an infinite scroll would simply append new elements to the DOM, potentially causing the list to grow infinitely and affecting the smoothness of the user interface.

Efficiently Managing 5000 Records — Proof of Concept with Windowing Technique

I created a proof-of-concept web application that showcases the power of the windowing technique. The app generates a list of 5000 random records, each represented by a card displaying movie information. Despite handling such a vast dataset, the user interface remains smooth, lightweight, and has a minimal memory footprint of 55Mb.

The proof of concept for a movie catalog, which loads a list of 5000 randomly generated movies by implementing windowing, showcases a seamless user experience. As the user scrolls to the bottom of the page, the interface remains responsive and lightweight, with a considerable reduction in memory footprint, providing an optimal browsing experience.

Please take a closer look at the gif below. Notice how the parent element that holds the movie cards maintains a consistent number of child elements as you scroll. This is a result of the windowing implementation in our proof-of-concept. By only writing the visible portion of the list to the DOM, performance is greatly improved. In fact, I measured the performance of the proof-of-concept using a React Profiling Tool both before and after implementing windowing, and the results were truly impressive.

Proof Of Concept — only writes the visible portion of the list to the DOM.

Before implementing windowing, the rendering time was a sluggish 2.4 seconds.

Proof Of Concept with 5000 records— before implementing Windowing, it took 2.4 seconds to render

After implementing windowing, the rendering time improved by an impressive 97%, with a total time of only 0.094 seconds.

Proof Of Concept with 5000 records — after implementing Windowing, it only took 0.094 seconds to render

Deep Dive into Amazon Video Prime UI Poor Performance

I’ve always been intrigued by this UI’s poor performance, particularly because it was developed by Amazon. Scrolling to the bottom of the page causes the user interface to become almost unresponsive, leaving a memory footprint of approximately 310Mb. And attempting to click on a carousel button at this point takes an excessive amount of time to respond.

Amazon Prime Video UI — When scrolling to the end on Amazon Prime Video, a noticeable memory footprint of 312Mb is left behind, causing the user interface to become unresponsive and clunky.

Warning: Please proceed with caution! Conducting the following experiment may cause strain on your device.

Experiment: Begin by clicking the ‘>’ button on every carousel once. Then, as you scroll down, click the ‘>’ button on each carousel that appears until you reach the bottom of the page.

Keep in mind, this experiment may cause your device to freeze.

There are several factors that contribute to the poor performance of this UI. One major issue is that the carousels do not utilize the windowing technique. When a user clicks the ‘>’ button, all of the carousel cards are loaded into the DOM, even if they are not currently visible. This can quickly add hundreds of elements to the page. Additionally, the carousels are not infinite, making this problem even worse.

Another problem is the implementation of infinite scrolling when scrolling down the page. This only exacerbates the performance issue by allowing more and more data to be loaded into the DOM. Unfortunately, this UI also does not implement windowing when scrolling up and down the page.

Amazon Prime Video UI — The Amazon Prime Video user interface implements an infinite loading technique, however, it falls short in its approach to virtualizing the carousel list. As a result, the carousels continue to attach to the Document Object Model (DOM) as the user scrolls down, creating a less than optimal experience.

In conclusion, understanding techniques like windowing and infinite scrolling can make all the difference in the performance and overall user experience of a website.