웹 성능의 80%는 이미지에서 결정된다
웹사이트 로딩 속도를 늦추는 주범은 대부분 거대한 이미지 파일이다. 특히 의류 쇼핑 플랫폼처럼 고화질 이미지를 다량으로 보여줘야 하는 서비스에서 이미지 최적화는 선택이 아닌 필수다.
단순한 img 태그를 넘어 Next.js의 Image 컴포넌트가 내부적으로 어떤 마법을 부려 LCP(Largest Contentful Paint) 지표를 개선하는지 분석해 보았다.
포맷 최적화: WebP와 AVIF의 도입
브라우저에 최적화된 차세대 포맷(WebP/AVIF)을 자동 서빙하여 데이터 전송량을 획기적으로 줄인다."
- 기존의 JPEG나 PNG는 압축률에 한계가 있다.
- Next.js는 브라우저의 지원 여부에 따라 이미지를 자동으로 WebP나 AVIF 포맷으로 변환하여 서빙한다.
- 이를 통해 화질 손실은 최소화하면서 파일 크기를 최대 60~80%까지 줄일 수 있었다.
Lazy Loading과 Layout Shift 방지
필요할 때만 로드하고 미리 공간을 확보하여, 사용자가 느끼는 시각적 불안정성(CLS)을 제거한다.
- 사용자의 시야(Viewport)에 들어오지 않은 이미지는 로드하지 않는 Lazy Loading이 기본으로 적용된다.
- 또한, 이미지가 로드되기 전 영역을 확보하지 않아 레이아웃이 덜컥거리는 CLS(Cumulative Layout Shift) 현상을 막기 위해 width와 height를 강제하거나 blur-up 효과를 제공한다.
Responsive Images (srcset): 기기에 맞는 사이즈 제공
사용자의 기기 환경에 맞춰 '딱 필요한 크기'의 이미지 파일만 전송하여 효율을 극대화한다.
- 4K 모니터용 이미지를 작은 스마트폰 화면에서 그대로 다운로드하는 것은 낭비다.
- Next.js는 deviceSizes와 imageSizes 설정을 바탕으로 사용자의 기기 해상도에 최적화된 이미지 크기를 생성하여 전달한다.
프로젝트를 진행하며 Image 컴포넌트의 priority 속성을 활용해 메인 배너의 LCP를 1.5초 단축했던 경험은 성능 최적화의 희열을 느끼게 해주었다.
단순히 기능을 구현하는 것을 넘어, 브라우저의 렌더링 원리를 이해하고 자원을 효율적으로 사용하는 개발자가 되고자 한다.
안녕하세요 프론트엔드 관련 포스팅을 주로 하고 있습니다