Kakao Releases Case Study on Performance Optimization for Angular-Based Chatbot Admin Center

The Kakao FE Platform organization released a case study on the performance optimization of the 'Chatbot Admin Center' based on Angular/RxJS/TypeScript. They aimed to raise the performance scores of key pages to 85 or higher using 'Pharus', a Lighthouse-based tool they developed in-house.

Minimizing CLS Layout Shifts To resolve layout shift (CLS) issues caused by screen updates upon data load completion and asynchronous class application in common components, they applied Angular ResolverFn to ensure rendering occurs after data loading. Additionally, they controlled DOM update timing using Renderer2 and the ngAfterViewInit hook, and resolved DOM update order issues caused by BrowserAnimationModule.

Reducing Main Thread Load for TBT To reduce main thread load from chart library rendering and other factors, they utilized Angular 17's Deferrable Views (@defer) to prioritize loading only components within the viewport. This significantly reduced the number of method calls related to chart rendering and decreased TBT metrics by approximately 150ms. They also changed code causing reflows, such as getComputedStyle calls, to a CSS class-based approach, and applied ngx-quicklink instead of the PreloadAllModules strategy to prevent unnecessary module loading.

Optimization Results Through a project lasting approximately 2 months, the average performance score increased from 81 to 91. All pages recorded scores of 80 or higher, with the Scenario page showing significant improvement, rising from 69 to 93 points, an increase of 24 points.