Kakao Order Service FE Performance Improvement: Achieving a Score of 90 from 20 with Lazy Loading and Windowing

The Kakao FE Platform team used the internal performance measurement tool Pharus to conduct a project aimed at raising the performance score of the delivery service 'Order' to over 90. The initial performance score of the Order home page was as low as 20 in the worst-case scenario, because all store information was loaded at once during the first page load, causing the DOM size to become excessively large and the JSON response to approach 1MB.

Implementing Lazy Image Loading

The existing loading=lazy attribute had issues functioning correctly on Safari and older versions of Android WebView. To resolve this, a custom lazy loading component LazyImage was developed using IntersectionObserver and a polyfill. The ObserverManager class was provided via React Context to be efficiently managed as a single instance. Upon applying this, the performance score rose to 43, and TBT (Total Blocking Time) decreased by roughly half, from 6050ms to 3080ms.

Applying Windowing Techniques

Lazy image loading alone had limitations in reducing the large DOM size. For stores with many menus, the number of DOM elements reached 6358, and due to the UX requirement of immediate navigation upon category clicks, pagination was difficult to implement. Consequently, the Windowing technique was directly implemented to render only the visible portion and virtualize the rest.

Through the WindowedList and Probe components, lists were divided into chunks and visibility was detected. Reflecting the characteristics of the Order home page where list item heights are dynamic, individual heights were managed as an array to resolve scroll jitter issues. As a result, the initial rendering DOM count was reduced from approximately 6000 to 500, TBT decreased to 560ms, and the performance score rose to 85. Subsequently, the final target score of 90 was achieved through other improvements such as package optimization.