페이지 무게 37% 점유하는 이미지 최적화를 통한 LCP 개선 및 탄소 배출 1,500배 절감

Context

웹 페이지의 중앙값 무게가 모바일 2.56MB, 데스크톱 2.86MB까지 증가하며 이미지 리소스가 전체 무게의 약 37%를 차지하는 병목 현상 발생. 이미지 요청 수는 감소했으나 개별 이미지의 Pixel Count가 25% 증가하며 단일 리소스의 고용량화로 인한 로딩 지연 가속화.

Technical Solution

• JPEG/PNG 중심의 레거시 포맷을 WebP(25~34% 절감) 및 AVIF로 전환하여 전송 페이로드 최소화
• Image CDN 도입을 통한 자동 Format Conversion, Dynamic Resizing, Edge Caching 구조 설계
• Hero Image의 loading="lazy" 제거 및 fetchpriority="high" 설정을 통한 LCP(Largest Contentful Paint) 최적화
• srcset 및 명시적 Dimension 설정을 통한 브라우저 렌더링 최적화 및 Layout Shift 방지
• Below-the-fold 리소스에 대한 Native Lazy Loading 적용으로 초기 렌더링 시 불필요한 네트워크 요청 차단

Impact

• Image CDN 도입 시 로드 속도 30~50% 향상 및 사용자 Engagement 20~40% 증가
• 최적화 미적용 시 로드 시간 3~5초 추가 지연 발생
• 텍스트 기반 최적화 사이트(0.02g) 대비 고용량 이미지 사이트(30.39g)의 CO2 배출량 1,500배 차이 확인

Key Takeaway

단순한 포맷 변경을 넘어 리소스 우선순위 제어(Priority Hinting)와 전송 계층의 자동화(Image CDN)를 결합한 다각적 최적화 전략 필요