이미지 최적화만으로 PageSpeed 20점 올리기 — 36MB를 0.8MB로

1문제 — 이미지 6장, 36MB

사이트에 사용된 이미지는 총 6장이었습니다. 디자인 단계에서 고해상도 원본을 그대로 WebP로 변환만 한 상태였는데, 해상도는 원본 그대로였고 압축 수준도 기본값이었습니다.

Google PageSpeed Insights는 Mobile을 Moto G Power + 슬로우 4G (1.6Mbps) 환경으로 시뮬레이션합니다. 이 속도로 36MB를 다운로드하면 약 180초가 걸립니다. LCP가 110초로 측정된 건 당연한 결과였습니다.

2sharp로 압축하기

sharp는 Node.js에서 가장 빠른 이미지 처리 라이브러리입니다. libvips 기반이라 Photoshop이나 온라인 도구보다 훨씬 빠르고, 스크립트로 자동화할 수 있습니다. 구체적인 빌드 스크립트는 sharp 자동화 글을 참고하세요.

npm install sharp --save-dev

const sharp = require('sharp');

// WebP — 일반 이미지
await sharp('input.webp')
  .resize(1920)            // 너비 기준 리사이즈
  .webp({ quality: 80 })   // quality 80이면 충분
  .toFile('output.webp');

// AVIF — Hero 이미지 (더 공격적 압축)
await sharp('hero.webp')
  .resize(900)             // 모바일 기준 너비
  .avif({ quality: 40, effort: 6 })
  .toFile('hero.avif');

압축 기준

압축 결과

3WebP vs AVIF

두 포맷 모두 최신 브라우저에서 지원되지만, 용도에 따라 선택이 달라집니다.

4로딩 전략 — fetchPriority와 lazy loading

이미지를 압축하는 것만으로는 부족합니다. 어떤 이미지를 먼저 로드할지 브라우저에게 알려줘야 합니다.

<img
  src="/images/hero.avif"
  alt="설명"
  width={900}
  height={1118}
  fetchPriority="high"
/>

<img
  src="/images/card.webp"
  alt="설명"
  width={600}
  height={448}
  loading="lazy"
/>

width와 height는 왜 필요한가

img 태그에 width와 height를 명시하면 브라우저가 이미지 로드 전에 정확한 공간을 확보합니다. 이미지가 로드되면서 아래 콘텐츠가 밀리는 현상(CLS)을 방지합니다. CSS로 크기를 제어하더라도 HTML 속성은 넣어두는 것이 좋습니다. 브라우저가 intrinsic aspect ratio를 계산하는 데 사용합니다. Next.js Image 컴포넌트와의 선택 기준은 img vs Image 비교를 참고하세요.

5Preload의 함정

“중요한 이미지는 preload하면 더 빠르겠지?” — 맞습니다. 하지만 LCP 이미지 1개에만 적용해야 합니다.

<link
  rel="preload"
  href="/images/hero.avif"
  as="image"
  type="image/avif"
/>

실제로 아래 fold 이미지 3장에 lazy를 빼먹었을 때 preload가 4개(Hero + 3장)나 생성되어 있었습니다. lazy를 추가하고 preload를 Hero 1개만 남기자 LCP가 개선되었습니다.

6결과