Boost Web Responsiveness: Design‑First Strategies for Infinite Scroll Lists

In today's rapidly evolving technology landscape, web users demand ever‑higher page load speed and responsiveness.

Responsiveness is not merely an implementation issue but also a design challenge; performance tweaks and faster hardware alone cannot fully address it.

This article uses the common “infinite scroll list” scenario to illustrate how to view and enhance user experience from an interaction perspective, thereby improving page responsiveness.

User Experience Is Productivity

Perceived responsiveness may seem less important than effectiveness, but the opposite is true. Researchers over the past 50 years have consistently found that a system’s ability to keep up with the user, promptly inform the current state, and avoid unnecessary waiting is the most critical factor for user satisfaction. From: Designing with the Mind in Mind – Jeff Johnson

Google’s RAIL performance model aims to satisfy users rather than merely make pages run fast.

We want users to spend most of their time on a site not waiting for loads but waiting for responses while using it.

How Much Time Does the Brain Need to “Feel” and “Cognize”?

Events take time to occur, and our perception of objects and events also requires time.

The human brain and nervous system are not a single organ but a collection of neuron‑based subsystems that provide a wide range of sensory, regulatory, and cognitive functions, each operating at different speeds—some extremely fast, others taking hours.

Cognitive and sensory functions operate within a series of time constants, and many unconscious actions are faster than those requiring deliberate control.

For example, our auditory system can detect differences within 1 ms of sound reaching the ear, allowing us to locate sound sources via inter‑aural time differences.

Similarly, humans have measurable reaction times for perceiving delays and pauses.

The “Pause Feeling” When Scrolling a List

User scrolls

Data loads

New data renders

User continues scrolling to view the newly rendered content

The mechanism “scroll event → async data fetch → render” can take more than 500 ms to respond and render new content.

Even with friendly feedback such as spinners, users still experience a “loading wait” and must scroll again to view the new content.

How to Improve Responsiveness

1. Preloading

Preloading is a common optimization technique that sets a threshold to fetch and render the next page’s data before the user reaches the bottom of the current page.

While preloading can significantly improve experience, in weak network conditions or when users scroll quickly, loading indicators at the bottom may still appear frequently.

Simply raising the preloading threshold is not ideal, as network conditions vary and excessive preloading can generate redundant data requests.

2. Non‑Blocking Scroll

This ideal list behavior never interrupts user scrolling; when data is insufficient, the component loads on demand based on scroll position, inserts placeholder elements, and replaces them with real content once data arrives.

mui‑infinite‑list Working Principle

The list component only cares about rendering elements within a limited range (visible viewport plus a pre‑buffer before and after).

When scrolling causes elements to leave the viewport, the component calculates the changed portion of the render range, fills it, and recycles excess DOM nodes.

If elements within the render range lack data, placeholder elements are rendered first, and the missing data count is reported to the caller; once the asynchronous data returns, the placeholders are replaced with real elements.

Feature

DOM Node Recycling

In a test case rendering 200 rows of data and scrolling to the bottom, the final node count without recycling was 1,610, while enabling recycling reduced it to 339.

On‑Demand Data Loading

In typical pagination scenarios, the frontend sets a fixed pageSize and the backend returns a fixed‑length data set. When users scroll rapidly, a too‑small pageSize leads to a surge of requests, while a too‑large pageSize wastes resources.

This component can return the number of missing list items based on actual scroll conditions, allowing the caller to flexibly set the pageSize.

Normal Flow

In promotional scenarios, layouts often combine a header, slots, and a list; a single list rarely appears alone.

The component uses native body scrolling and can be combined with other modules.

Coming Soon…

Precise exposure tracking, a React version of the component, and support for waterfall‑style layouts are planned.

Conclusion

Interaction guidelines and theory help us infer and explain differences between solutions, reducing trial‑and‑error costs. However, final value judgments still rely on A/B testing and data results.

Although device performance continues to improve, programs impose ever‑greater loads on devices. Responsiveness remains a challenge and will persist, and continuously focusing on it will bring tangible business value.