WebP 품질 60 vs 80, LCP는 얼마나 차이날까? 실제 계측 리포트

요약

동일 페이지에서 WebP 품질(Q) 60과 80만 바꿔 LCP를 실측했습니다. 결과적으로 Q60은 저속 네트워크에서 LCP가 8~20% 개선되는 경향을 보였고, Q80은 화질 안정성은 높지만 용량 증가로 모바일 저속 환경에서 LCP가 악화될 수 있었습니다. 추천은 히어로 이미지는 Q80, 그 외는 Q70~75 혼합 전략입니다.

문제 정의

이미지가 첫 화면 속도에 결정적 영향을 줍니다. 실무에서는 Q값을 감으로 정하는 경우가 많은데, 본 글은 동일 조건에서 Q만 변경해 기준점을 제시합니다.

테스트 환경

디바이스: 중급 안드로이드, 데스크톱 중급
브라우저: 최신 크롬
네트워크: 4G 기본, 3G·광랜 추가
페이지: 히어로 1장(1600px), 썸네일 6장(800px), 본문 4장(1200px)
도구: Lighthouse, Chrome DevTools
변수: 포맷 WebP 고정, Q=60 vs Q=80

항목	값
디바이스	안드로이드 중급기, 데스크톱 중급
브라우저	크롬 최신
네트워크	4G 기본, 3G/광랜 추가
페이지 구성	히어로 1, 썸네일 6, 본문 4
포맷/변수	WebP 고정, Q=60 vs Q=80
측정 도구	Lighthouse, DevTools
반복	각 5회, 중앙값 사용

방법

A: 모든 이미지 Q60, B: 모든 이미지 Q80. 각 5회 측정 후 중앙값 사용. 히어로의 영향도 별도 관찰. 시각적 품질은 확대 비교로 평가

결과 요약

• 4G: Q60에서 LCP 8~15% 개선, INP/CLS 변화 미미
• 3G: Q60에서 LCP 12~20% 개선, 히어로가 클수록 개선폭 확대
• 광랜: 두 시나리오 차이 거의 없음, Q80 화질 우수
• 품질 체감: 텍스트 포함·그라디언트·얼굴 클로즈업에서 Q60의 노이즈 관찰 (비교 캡처 자리)

해석

네트워크 병목 환경에서는 용량 절감이 곧 LCP 개선입니다. 다만 브랜딩 이미지는 Q80이 안전합니다. 실무적으로 히어로 Q80, 나머지 Q70~75의 혼합이 효율적입니다.

한계

이미지 내용·색역·디스플레이에 따라 체감 품질이 달라집니다. 실제 운영에서는 CDN/캐시 등 변수가 추가됩니다.

실무 체크리스트

• 히어로 별도 프로필(Q80, 1600~1920px)
• 썸네일/본문 Q70~75 기본
• 텍스트·그라디언트·얼굴 이미지는 하한선 재검토
• 4G/3G 스로틀링으로 계측 필수
• 빌드에서 품질 값을 위치별 변수화
• 히어로만 preload, 나머지는 lazy
• 월 1회 LCP 리포트 자동화

결론

Q60은 저속 환경에서 확실히 유리하고, 브랜딩 핵심은 Q80이 안전합니다. 혼합 전략과 정기 계측으로 품질-속도 균형을 잡으세요.독자 액션히어로만 Q80, 나머지 Q70 적용 후 4G에서 LCP 5회 측정하여 전/후 비교해 보세요.