Kakao Improves Business Form FE Performance from 60 to 85–93 Points

The Kakao FE Platform team performed bundle optimization, changed component loading methods, and optimized images to raise the performance metrics of the Business Form service to over 90 points. The performance score, initially in the 60s, stabilized at 85–93 after improvements.

Bundle and CSS Optimization Using webpack-bundle-analyzer to analyze unnecessary JavaScript files, the team separated the amCharts library into asynchronous loading, reducing the entry point file size from approximately 2.2MB to 1.2MB. Additionally, applying Nuxt's extractCSS option and nuxt-purgecss separated CSS and removed unused styles. This reduced FCP by 0.4s and LCP by 0.6s on the list page.

Layout Shift (CLS) Improvement To resolve layout shift issues caused by Dynamic Import, some components were changed to immediate loading, and a method was applied where empty data is rendered first and then updated, instead of conditional rendering. As a result, the CLS metric improved from 0.359 to 0.097, and the performance score rose from 73 to 82 at this stage.

Network and Image Optimization By adjusting the loading order of the GNB module to prioritize survey data loading, the LCP metric was improved. On the image side, lazy loading using IntersectionObserver was implemented, and images were lossy compressed to 85–90% quality using imagemin-pngquant. Image size on the list page decreased from 413KB to 128KB.