웹사이트 이미지 최적화 — LCP·Core Web Vitals와 검색 순위

구글 서치 콘솔을 열면 '불량: LCP' 경고가 찍혀 있다. 원인을 추적하면 대부분 이미지 한 장이다. 히어로 이미지 3MB짜리가 로딩을 붙잡고, LCP가 4초를 넘어간다. 이 순간 구글은 해당 페이지를 '느린 페이지'로 분류하고 검색 순위 산정에 불이익을 준다.

이미지 압축 바로 사용하기 →

LCP란 무엇이고, 왜 이미지가 핵심인가

LCP(Largest Contentful Paint)는 페이지에서 가장 큰 콘텐츠 요소가 화면에 완전히 그려지는 시간이다. 구글이 Core Web Vitals 지표 중 하나로 채택했으며, 2024년부터 검색 순위 알고리즘에 공식 반영되고 있다.

HTTP Archive 2024년 데이터 기준, 전체 웹페이지에서 LCP 요소의 약 70%는 이미지(<img> 태그 또는 CSS background-image)다. 텍스트나 동영상이 LCP를 결정하는 경우는 드물다. 즉, 이미지를 최적화하는 것이 곧 LCP를 잡는 가장 직접적인 방법이다.

구글의 LCP 기준: 2.5초가 경계선

구글은 페이지 내 실사용자 데이터(CrUX, Chrome User Experience Report)를 기반으로 이 점수를 측정한다. 내 PC에서 빠르게 보인다고 해서 안심할 수 없다. 3G 환경의 모바일 사용자 데이터가 함께 반영되기 때문이다.

이미지가 LCP를 망치는 3가지 패턴

• 압축하지 않은 원본 업로드: DSLR 촬영 JPG를 그대로 올리면 5~10MB다. 품질 80% 수준으로 압축하면 500KB 이하로 줄이면서 육안 차이는 거의 없다.
• 구형 포맷 고집: PNG나 JPEG 대신 WebP를 쓰면 동일 품질 기준 25~35% 용량이 줄어든다. AVIF는 추가로 20% 더 절감되지만 구형 브라우저 호환성을 확인해야 한다.
• 히어로 이미지에 lazy loading 적용: 스크롤해야 보이는 이미지에는 lazy loading이 맞지만, 페이지 최상단 히어로 이미지에 loading="lazy"를 달면 오히려 LCP가 늦어진다. 히어로 이미지는 반드시 loading="eager" 또는 속성 생략이 정답이다.

Core Web Vitals 전체 구조에서 이미지의 위치

Core Web Vitals는 LCP 외에도 INP(Interaction to Next Paint)와 CLS(Cumulative Layout Shift)를 포함한다. 이미지는 CLS에도 영향을 준다. 이미지에 width와 height 속성을 명시하지 않으면, 이미지가 로드되면서 주변 텍스트가 밀려 내려가는 레이아웃 이동이 발생한다. 구글은 이를 나쁜 사용자 경험으로 간주한다.

<!-- CLS 유발 — 크기 미지정 -->
<img src="hero.webp" alt="히어로 이미지">

<!-- CLS 방지 — 크기 명시 -->
<img src="hero.webp" alt="히어로 이미지" width="1200" height="630">

한국 웹사이트에서 자주 발생하는 문제

국내 쇼핑몰과 블로그 플랫폼은 이미지 최적화가 취약한 경우가 많다. 네이버 스마트스토어는 상품 이미지를 자동으로 WebP로 변환하지만, 카페24나 고도몰 기반 자체 쇼핑몰은 업로드한 원본을 그대로 서빙하는 경우가 흔하다. 구글 서치 콘솔에서 '페이지 경험' 탭을 열면 현재 사이트의 LCP 불량 비율을 확인할 수 있다.

WordPress 기반 사이트라면 Imagify 또는 ShortPixel 플러그인이 업로드 시 자동으로 WebP 변환과 압축을 처리한다. Next.js 환경이라면 next/image 컴포넌트가 자동 WebP 변환, 리사이즈, lazy loading을 기본 제공한다.

자주 묻는 질문

Q. 이미지를 압축하면 SEO에 바로 반영되나요?
구글이 페이지를 재크롤링하고 CrUX 데이터가 누적되는 데 보통 28일 정도 걸린다. 개선 후 구글 서치 콘솔에서 URL 검사 → 색인 재요청을 하면 크롤링을 앞당길 수 있다.

Q. LCP 측정은 어떻게 하나요?
Chrome DevTools의 Lighthouse 탭에서 '성능' 항목을 실행하면 LCP 수치와 원인 요소를 함께 알려준다. PageSpeed Insights(pagespeed.web.dev)에 URL을 입력하면 실사용자 데이터 기반 결과도 확인할 수 있다.

Q. WebP 변환만으로 LCP 2.5초 이하를 달성할 수 있나요?
포맷 변환은 필요조건이지 충분조건이 아니다. 서버 응답 속도(TTFB), CDN 사용 여부, 이미지 용량 압축이 함께 이루어져야 한다. WebP 변환 후에도 LCP가 개선되지 않는다면 이미지 자체의 용량을 추가로 줄이거나, <link rel="preload">로 히어로 이미지를 우선 로딩하는 방법을 검토한다.

이미지 파일의 용량을 줄이는 첫 단계는 Tooly 이미지 압축 도구에서 시작할 수 있다. 설치 없이 브라우저에서 바로 압축 후 WebP 또는 JPEG로 저장하면 된다.