Core Web Vitals LCP 개선: 이미지 최적화로 2.5초 달성하기

이미지 최적화는 LCP 개선의 핵심이며, 특히 데스크톱과 모바일에서 이미지가 차지하는 비중이 매우 높습니다. 최신 포맷과 적절한 크기 조정으로 로딩 시간을 획기적으로 줄일 수 있습니다. 프리로드와 CDN을 함께 활용하면 LCP를 2.5초 이하로 달성할 가능성이 크게 높아집니다.

LCP와 이미지의 관계 이해하기

Largest Contentful Paint(LCP)는 페이지 로딩 성능을 측정하는 핵심 지표 중 하나입니다. 이미지는 데스크톱 페이지의 85%, 모바일 페이지의 76%에서 LCP 요소를 차지합니다. Google Core Web Vitals에서 LCP는 2.5초 이하를 ‘Good’으로 평가합니다. 또한, 디코딩해야 할 큰 이미지가 많으면 INP 점수가 낮아질 수 있습니다. Amazon의 내부 데이터에 따르면 페이지 속도가 100ms 느려질 때마다 매출이 1% 감소합니다. Deloitte의 연구에 따르면 모바일 페이지 속도가 0.1초 개선될 때마다 소매업 전환율이 8.4% 향상됩니다.

이미지 최적화 단계 개요

아래는 LCP 개선을 위한 이미지 최적화의 주요 단계입니다.

최신 이미지 포맷 (WebP, AVIF)으로 변환
반응형 이미지로 디바이스별 최적화
LCP 이미지 프리로드로 우선 로딩
이미지에 명시적 width와 height 설정
이미지 CDN 또는 최적화 도구 활용

반응형 이미지 적용하기

모바일 기기에 데스크톱용 대형 히어로 이미지를 전송하는 것은 LCP 문제의 주요 원인입니다. srcset과 sizes 속성을 사용하면 디바이스 해상도에 맞는 이미지를 제공할 수 있습니다. 예를 들어, <img src="hero-small.webp" srcset="hero-small.webp 480w, hero-medium.webp 1024w, hero-large.webp 1920w" sizes="(max-width: 600px) 480px, 1024px" alt="메인 비주얼" width="1200" height="600">와 같이 마크업합니다.

LCP 이미지 프리로드하기

페이지의 가장 큰 콘텐츠가 이미지라면 브라우저가 HTML을 파싱하는 동안 미리 로딩하도록 <link rel="preload" as="image" href="hero-image.webp" fetchpriority="high">를 <head>에 추가합니다. 프리로드된 LCP 이미지가 있는 페이지 로드의 83%가 LCP에서 ‘우수’ 점수를 받았습니다.

이미지에 명시적 width, height 설정하기

이미지가 적절한 크기로 지정되지 않으면 레이아웃 변동이 발생할 수 있습니다. 데스크톱 페이지의 65%에는 여전히 명시적 크기가 없는 이미지가 하나 이상 있습니다. 따라서 width와 height 속성을 항상 포함하세요.

이미지 CDN 또는 최적화 도구 활용하기

이미지 CDN을 사용하면 서버에서 자동으로 이미지 리사이징, 포맷 변환, 압축을 수행해 줍니다. 실제로 Weekerp Image CDN을 적용한 사례에서는 이미지 로딩 속도가 36ms에서 3ms로 약 10배 개선되었습니다. 소규모 사이트라면 소규모 사업자 홈페이지 유지보수 체크리스트의 다른 최적화 항목도 함께 점검해 보세요.

결과 측정 및 모니터링

PageSpeed Insights나 Lighthouse로 측정한 LCP가 2,500ms 이하를 목표로 삼습니다. 개선 전과 후를 비교하여 단계별 효과를 확인하고, 새로운 이미지가 추가될 때마다 동일한 최적화 루틴을 반복하세요.

참고 자료

Core Web Vitals: 이미지 최적화 — 확인일 2026-07-29
LCP 이미지 최적화 가이드 — 확인일 2026-07-29
Core Web Vitals 최적화 — 확인일 2026-07-29
IT 인사이트 — 확인일 2026-07-29
web.dev: Top CWV — 확인일 2026-07-29