🔧 LCP가 낮다? 로딩 이미지가 범인

처음 Lighthouse 기준 LCP가 2,560ms로 빨간세모 판정을 받았다.
원인을 추적해보니,로딩 페이지의 이미지가 너무 커서 주요 컨텐츠로 잡히고 있었고, 이로 인해 렌더링이 더 지연되고 있었다.

✅ 1단계 : PNG → WebP 변환

기존 Groupie.png은 1.5MB로 너무 무거웠다.
webp을 사용하면 훨씬 가볍고 최적화에 유리하기에, 아래처럼 변환을 진행했다.

# macOS에서 cwebp 설치
brew install webp

# PNG를 WebP로 변환 (품질 80%)
cwebp -q 80 public/Groupie.png -o public/Groupie.webp

• 파일 크기: 1.5MB → 28KB
• LCP: 2,560ms → 2,090ms
  → 포맷만 바꿨을 뿐인데도 500ms 가까이 개선되었다.

---

✅ 2단계 : fill → width/height로 변경

fill 속성을 사용하면 브라우저가 이미지 크기를 렌더링 시점에 계산하게 되므로, LCP 지연의 원이 될 수 있다.
그래서 width/height 속성을 명시해 불필요한 계산을 줄이고자 했다.

• LCP는 이미지 최적화 이후에도 다른 리팩토링 작업들 덕분에 자연스럽게 2,090ms → 1,680ms까지 개선되었고,

• 여기에 width/height를 적용하면서 최종적으로 1,380ms까지 줄일 수 있었다.

  항목	최적화 전	중간 단계	최종
  LCP	2,560ms 🔺	1,680ms ⚠️	1,380ms ✅
  Load Delay	1,610ms (63%)	860ms (51%)	690ms (50%)
  TTFB	810ms (31%)	630ms (37%)	630ms (46%)

  

---

📌 정리

• ✅ WebP로 포맷 최적화
• ✅ Image 크기 명시
• ✅ LCP 기준 '나쁨' → '양호' 개선 성공