카카오, 비즈니스폼 FE 성능 개선으로 점수 60점에서 85~93점으로 상승

카카오 FE플랫폼팀이 비즈니스폼 서비스의 성능 지표를 90점 이상으로 끌어올리기 위해 번들 최적화, 컴포넌트 로딩 방식 변경, 이미지 최적화 등을 진행했다. 초기 60점대였던 성능 점수는 개선 후 85~93점 수준으로 안정화되었다.

번들 및 CSS 최적화 webpack-bundle-analyzer를 활용해 불필요한 JavaScript 파일을 분석하고, amCharts 라이브러리를 비동기 로딩으로 분리해 엔트리포인트 파일 사이즈를 약 2.2MB에서 1.2MB로 감소시켰다. 또한 Nuxt의 extractCSS 옵션과 nuxt-purgecss를 적용해 CSS를 분리하고 미사용 스타일을 제거했다. 이를 통해 목록 페이지 기준 FCP 0.4초, LCP 0.6초가 단축되었다.

레이아웃 시프트(CLS) 개선 Dynamic Import로 인한 레이아웃 시프트 문제를 해결하기 위해 일부 컴포넌트를 즉시 로딩 방식으로 변경하고, 조건부 렌더링 대신 빈 데이터로 먼저 렌더링 후 업데이트하는 방식을 적용했다. 그 결과 CLS 지표가 0.359에서 0.097로 개선되었고, 해당 단계에서 성능 점수는 73점에서 82점으로 상승했다.

네트워크 및 이미지 최적화 GNB 모듈의 로딩 순서를 조정해 설문 데이터 로딩을 우선시함으로써 LCP 지표를 개선했다. 이미지 측면에서는 IntersectionObserver를 활용한 레이지 로딩을 구현하고, imagemin-pngquant를 사용해 이미지를 85~90% 품질로 손실 압축했다. 목록 페이지 기준 이미지 용량은 413KB에서 128KB로 줄었다.