Kakao Open Chat Lite Achieves Lighthouse Score in the 90s by Implementing Virtual Scrolling and Message Queue

Kakao Open Chat Lite undertook frontend performance optimization to resolve rendering bottlenecks occurring in high-traffic environments. Starting from an initial Lighthouse score in the 70s, it achieved a significant rise to the 90s.

Rendering Structure Optimization

To reduce the number of DOM nodes in environments where hundreds or thousands of messages accumulate, Virtual Scroll was introduced. React.memo was applied alongside it to suppress frequent re-renders during scrolling, and an uncontrolled component approach was adopted to reduce memory usage (a). Specifically, to resolve the severe interaction blocking issues on iOS, button tags were replaced with span tags and assigned role="button", reducing rendering time by more than 1.5x.

Event Loop and Message Queue Introduction

Rendering messages received from the server immediately caused the call stack to be occupied, resulting in user interactions being ignored. To resolve this, render functions were converted to asynchronous processing, and a Message Queue was introduced to bridge the gap between server reception speed and screen rendering speed. Messages accumulated in the queue are processed via Batching according to the setInterval cycle and rendered all at once, thereby securing call stack headroom and preventing the creation of unnecessary timers.

Zustand State Management Improvement

In the useBubbleAction hook, the approach was changed from subscribing to the entire chatMap to directly fetching only the necessary chat room data, significantly reducing resource consumption. Additionally, the useModal hook, which was called in all bubble components, was removed. Instead of using useTranslation, the t function from i18next was imported directly, and Zustand's getState() method was utilized to convert it into a vanilla utility function that calls functions without subscribing to state. This eliminated unnecessary function creation and hook overhead during bubble rendering.