어학당 홈 성능 최적화 — 1편

간단 소개

크리에이트립 어학당 홈 성능 개선을 위해 CSR 전환, 코드 스플리팅, 레이지 로드, 서드파티 스크립트 최적화를 적용하여 성능을 향상시킨 사례.

AI Summary

어학당 서비스 성능 개선 배경
- 크리에이트립 어학당 서비스는 외국인 유저를 대상으로 어학당 정보를 제공하고 지원 절차를 간소화하는 중개 서비스임.
- SEO-TFT 활동 중 웹 페이지 성능이 검색 엔진 순위에 미치는 영향에 주목, Core Web Vitals 지표 개선을 목표로 함.
- 라이트하우스 분석 결과, 어학당 홈 화면의 성능 저하를 확인하고 개선 작업 시작.
주요 성능 개선 작업
- 부분 CSR 전환: 초기 로딩에 필요한 데이터만 SSR로 처리하고 나머지는 CSR로 전환하여 초기 로딩 시간 단축.
- 코드 스플리팅 & 서스펜스: next/dynamic을 활용하여 동적 컴포넌트 지연 로딩 및 React 서스펜스를 통해 로딩 UI 제공.
- 레이지 로드: IntersectionObserver API를 사용하여 뷰포트에 노출되는 컴포넌트만 렌더링하여 초기 렌더링 시간 단축.
- 서드파티 스크립트 최적화: Partytown 라이브러리를 도입하여 서드파티 스크립트를 웹 워커에서 실행, 메인 스레드 병목 현상 방지.
개선 결과 및 결론
- 라이트하우스 성능 점수가 29점에서 90점으로 향상되었으며, LCP, TBT 등 Core Web Vitals 지표에서 큰 개선이 있었음.
- 작은 최적화의 중요성을 깨닫고, 지속적인 성능 개선을 통해 사용자 경험과 SEO를 향상시킬 계획임.