이미지 최적화를 통한 Page Weight 79% 감소 및 LCP 1.3s 달성

Context

웹 페이지 전체 용량의 약 50%를 차지하는 이미지 데이터로 인한 렌더링 병목 현상 발생. 특히 LCP 지표 악화 및 모바일 사용자 이탈률 증가라는 비즈니스 리스크 직면.

Technical Solution

• WebP 및 AVIF 포맷 채택을 통한 이미지 압축률 극대화 및 전송량 감소
• srcset과 sizes 속성을 활용한 Device-specific 이미지 서빙 구조 설계
• 이미지 품질 60~85% 가변 적용을 통한 시각적 손실 최소화 및 용량 최적화
• loading="lazy" 및 decoding="async" 적용으로 메인 스레드 블로킹 방지
• fetchpriority="high" 설정을 통한 LCP 대상 이미지의 우선순위 제어
• Width/Height 명시적 선언을 통한 Layout Shift 방지 및 CLS 개선

Impact

• Page Weight: 4.2MB에서 890KB로 79% 감소
• LCP: 4.1s에서 1.3s로 개선
• PageSpeed Score: 62점에서 94점으로 상승

Key Takeaway

단순한 압축을 넘어 포맷 최적화, 반응형 서빙, 로딩 우선순위 제어라는 다층적 전략을 통한 Frontend 성능 최적화 달성