thnkr
copy markdown

한샘몰 웹 서비스 성능 최적화 프로젝트

· 3 min

프로젝트 개요

한샘몰 모바일 웹 서비스의 성능 개선을 위한 프로젝트를 진행했습니다. 주요 목표는 Google의 Core Web Vitals 지표인 LCP (Largest Contentful Paint), TBT (Total Blocking Time), CLS (Cumulative Layout Shift) 중심으로 성능을 개선하는 것이었습니다.

Google Lighthouse의 점수는 테스트 시점 및 환경에 따라 편차가 크기 때문에 Google Page Speed Insights API를 활용한 자체 모니터링 시스템을 구축하였습니다. 자사 및 경쟁사의 애플리케이션을 대상으로 1시간 간격의 테스트를 통해 일간/주간 평균 성능 지표를 측정하며 개선 여부를 추적했습니다.

성능 개선 전략

pages-insights

문제점 분석 및 개선 작업

LCP (Largest Contentful Paint)

  1. 이미지 렌더링 차단 요소 제거

    • 메인 배너 Swiper 초기화 이전에 이미지 로드를 막는 로직 존재
    • 해당 로직 제거 후, 이미지 비율 계산 → placeholder 렌더링 → 이미지 로드 순서로 구조 개선

  2. LCP 인식 대상 요소 전환

    • background-image로 처리된 배너 div 요소 → 실제 <img> 태그로 전환
    • 이미지 로드 우선순위 재조정하여 하단 요소보다 배너 이미지가 먼저 렌더되도록 수정

  3. 폰트 렌더링 차단 이슈 해결

    • Pretendard 폰트 stylesheet가 렌더링 차단 유발
    • 해당 리소스를 preload 처리하여 렌더링 블로킹 최소화

  4. Next/Image 및 커스텀 로더 적용

    • 디자인 시스템 이미지 컴포넌트에 Next/Image 적용
    • 기존 DevOps에서 제공하던 CDN + Lambda 기반 이미지 최적화 로직을 customLoader와 함께 연동하여 적용 (unoptimized 옵션 사용)

lcp lcp2 lcp3 lcp4

TBT (Total Blocking Time)

  1. 스크립트 평가 시간 단축

    • Script Evaluation만으로 약 7초의 메인 스레드 블로킹 발생
    • 원인: 대형 번들 파일 (design-system-mobile.esm.js)의 비효율적 로딩

  2. 불필요한 코드 제거 및 ESM 분리

    • design-system-mobile.esm.js 모듈에서 약 74.3%가 Unused Bytes로 확인됨
    • 라이브러리 구조를 ESM 기반으로 재정비하여 Code Splitting 가능하도록 변경
    • package.json의 exports 필드를 활용해 Entry Point 단위로 import할 수 있도록 설정

tbt

개선 결과

디자인 시스템 및 전시 컴포넌트 번들 사이즈

빌드 시간

LCP (Largest Contentful Paint) 개선

TBT (Total Blocking Time) 개선

모니터링 자동화 시스템 구축

결론