유저와 FE 팀원들을 위한 나만의 LCP 최적화
분야
프로그래밍/소프트웨어 개발
대상자
- *Front-end 개발자 및 팀원**
- 난이도: 중급 (성능 최적화 기법과 빌드 시스템 이해 필요)*
핵심 요약
- LCP(Largest Contentful Paint) 최적화는 사용자 경험 향상과 이탈 방지에 핵심
- 초기 번들의 크기, 폰트 로드 시간, 불필요한 이미지 요청이 LCP 저하 주요 원인
- WebP 이미지 변환,
- Vite의 빌드 시스템 이해와 정적 자산 경로 관리 필수
섹션별 세부 요약
1. LCP 최적화 목적과 현재 상태
- LCP 지표는 사용자 환경 향상에 직접적인 영향
- 프로덕션 배포 시 LCP가 2.5초를 넘어서는 문제가 발생
- LCP 최적화를 통해 이탈률 감소와 사용자 만족도 향상 기대
2. 이미지 최적화 전략
src/asset경로의 이미지들을.webp로 변환하여 크기 절반 이상 감소optimize-images.ts스크립트를 빌드 타임에 자동 실행- CI/CD 파이프라인에서
.webp파일을 S3에 업로드 - 이미지 변경 없을 시 빌드 과정 생략으로 빌드 시간 단축
3. `
- React에서 Next.js의
Image컴포넌트를 참고해 커스텀 컴포넌트 개발 IcomMap을 통해 정적 자산 경로와 해시값 관리- ```ts
// IcomMap 예시
const IcomMap = {
hero: {
png: '/assets/hero-[hash].png',
webp: '/assets/hero-[hash].webp'
}
};
```
import.meta.glob()로 Vite의 정적 분석 및 해시 기반 URL 생성
4. 폰트 최적화 및 빌드 경고 해결
- Pretendard 폰트의 용량(2.1MB)이 LCP 저하 주요 원인
- 가변 다이나믹 서브셋 적용으로 폰트 크기 25KB로 감소
preload와preconnect속성으로 폰트 로드 시간 단축- 빌드 경고 해결을 위해 정적 자산 경로 관리 및 해시 처리 필수
결론
- LCP 최적화를 위해 이미지 형식 변경, 커스텀 컴포넌트 개발, 폰트 서브셋 최적화를 병행
- Vite의 빌드 시스템 이해와 정적 자산 경로 관리가 성공적 최적화의 핵심
- 실무 적용 시,
IcomMap과optimize-images.ts스크립트를 통합하여 지속적 최적화 전략 수립 권장