Next.js 기반 프로젝트 LCP 최적화를 위한 이미지 및 폰트 최적화 전략: CRITIX 프로젝트 경험 공유

핵심 기술

이 콘텐츠는 디프만 16기 CRITIX 프로젝트에서 사용자 이탈을 막기 위해 LCP(Largest Contentful Paint) 지표를 개선하는 데 중점을 둔 실제 경험과 기술적 접근 방식을 공유합니다. 주요 최적화 대상은 이미지와 폰트이며, Vite 빌드 환경에서의 동적 경로 처리 및 최적화 기법을 다룹니다.

기술적 세부사항

• LCP 개선 목표: 사용자 경험 향상을 위해 LCP 지표를 2.5초 이하로 개선하는 것을 목표로 설정했습니다.
• 성능 병목 분석: Lighthouse Performance 탭을 통해 번들 파일 크기, 긴 폰트 로드 시간, 불필요한 이미지 동시 요청 등을 LCP 저하의 주요 원인으로 파악했습니다.
• 이미지 최적화 전략:
  • src/asset 경로에 저장된 PNG 이미지를 WebP 형식으로 자동 변환하는 optimize-images.ts 스크립트를 빌드 타임에 실행합니다.
  • Next/Image에서 영감을 받은 커스텀 <Image /> 컴포넌트를 개발하여, name prop을 통해 로컬 이미지 경로를 지정하면 WebP 우선 적용 및 자동 해시 경로 매칭을 구현했습니다.
  • react-intersection-observer를 활용하여 이미지가 뷰포트에 들어올 때만 로드되도록 최적화했습니다.
  • LCP 이미지에는 loading='eager' 및 fetchpriority='high' 속성을 적용하고, react-intersection-observer에서 즉시 inView로 동작하도록 설정했습니다.
  • Vite의 import.meta.glob()와 query: '?url' 옵션을 사용하여 해시값이 포함된 동적 URL을 imageMap으로 생성하고, 이를 통해 빌드 환경에서 파일 경로 참조 문제를 해결했습니다.
• 폰트 최적화 전략:
  • 기존에 src 경로에 woff2 형식으로 저장되어 있던 Pretendard 폰트(약 2.1MB)가 LCP 병목의 원인임을 파악했습니다.
  • 이를 해결하기 위해 동적 서브셋팅된 폰트 파일들로 교체하여 각 파일의 크기를 25KB 수준으로 줄였습니다.
  • preload 및 preconnect 속성을 사용하여 폰트 로딩을 최적화하고, 기본 폰트 렌더링 시 깜빡임 현상을 제거했습니다.

개발 임팩트

• LCP 지표 개선을 통한 전반적인 웹사이트 성능 향상 및 사용자 경험 증대.
• 빌드 프로세스와 연동된 자동 이미지 최적화 구현으로 개발 생산성 향상.
• Vite의 에셋 처리 방식을 이해하고 이를 활용한 동적 경로 관리 능력 향상.
• 폰트 로딩 최적화를 통해 페이지 로딩 속도 개선 및 TTF(Flash of Unstyled Text) 방지 기법 적용.

커뮤니티 반응

(원문에서 특정 커뮤니티 반응에 대한 언급은 없었음)