LCP 개선은 왜 첫 상품 이미지에서 시작되는가

문제

상품 상세에서 LCP가 나쁘게 나오는 경우, 범인은 추상적인 "페이지 전체"가 아니라 첫 화면의 대표 상품 이미지인 경우가 많습니다. 고객은 상품을 보려고 들어왔는데, 가장 중요한 이미지가 늦게 뜨면 페이지가 아직 준비되지 않았다고 느낍니다. 가격이나 옵션이 먼저 보여도 상품 이미지를 보지 못하면 구매 판단은 시작되지 않습니다.

문제는 운영 화면에서는 이미지가 정상적으로 등록되어 보인다는 점입니다. 관리자 페이지에는 이미지가 있고, PC 사무실 네트워크에서는 그럭저럭 보일 수 있습니다. 하지만 실제 고객은 모바일 네트워크, 저사양 기기, 캐시가 없는 첫 방문 조건에서 페이지를 엽니다. 4000px 원본 이미지가 모바일 화면에 그대로 내려오면, 고객은 400px 정도로 보는 이미지를 받기 위해 불필요하게 큰 파일을 다운로드합니다.

이 현상은 광고 랜딩이나 프로모션 상품에서 더 커집니다. 유입이 몰리는 순간 첫 이미지가 늦으면 광고비로 데려온 고객이 상품을 보기 전에 이탈합니다. 그래서 LCP 개선은 보통 "전체 성능 개선"이 아니라 "첫 상품 이미지가 고객에게 언제 보이는가"에서 시작해야 합니다.

원인

첫 번째 원인은 원본 크기와 표시 크기의 불일치입니다. 상품 이미지는 촬영·디자인·등록 과정에서 큰 해상도로 올라오지만, 실제 모바일 화면에서는 훨씬 작게 표시됩니다. 브라우저가 큰 원본을 받은 뒤 작게 줄여 그리면 네트워크와 디코딩 비용을 모두 낭비합니다.

두 번째 원인은 포맷입니다. 같은 품질이라도 AVIF나 WebP는 JPEG보다 훨씬 작은 경우가 많지만, 모든 브라우저가 같은 포맷을 지원하지는 않습니다. 단순히 원본 파일을 AVIF로 일괄 변환하면 구형 브라우저, 일부 앱 내 브라우저, 캐시 분기에서 사고가 날 수 있습니다. 포맷 전환은 변환 기술보다 운영 분기와 폴백이 더 중요합니다.

세 번째 원인은 로딩 순서입니다. lazyload는 하단 이미지에는 도움이 되지만 첫 화면 대표 이미지에 걸면 LCP를 늦춥니다. 브라우저 입장에서는 중요한 이미지를 일부러 뒤로 미루는 셈입니다. 흔한 오해는 "lazyload를 많이 걸수록 성능이 좋아진다"는 것입니다. 실제로는 첫 화면 밖에만 적용해야 하고, 대표 이미지는 우선 로드되어야 합니다.

해결

내부에서 바로 할 수 있는 기본 조치는 명확합니다. 대표 이미지의 실제 표시 크기를 기준으로 원본 전송 크기를 줄이고, 첫 화면 이미지는 lazyload 대상에서 제외합니다. 이미지 영역의 width·height 또는 aspect-ratio를 지정해 로딩 전에도 레이아웃이 불안정해지지 않게 합니다. 가능하다면 브라우저가 이미지를 빨리 발견하도록 HTML 상단에서 대표 이미지가 늦게 등장하지 않게 해야 합니다.

대량 운영에서는 이 작업이 어려워집니다. 수십만 장의 기존 이미지가 있고, 셀러가 외부 이미지 URL을 직접 넣으며, 오늘 최적화해도 내일 새 이미지가 다시 올라옵니다. 이때 재업로드 방식은 비용이 큽니다. 원본을 바꾸지 않고 요청 시점에 브라우저·디바이스·화면 크기에 맞게 변환하는 앞단 방식이 필요한 이유입니다.

M2 Live Cloud의 이미지 최적화는 원본은 그대로 두고, 요청 환경에 맞는 응답으로 바꾸는 접근입니다. 브라우저가 AVIF를 받을 수 있으면 AVIF, 아니면 WebP, 그래도 안 되면 원본 계열로 폴백합니다. 디바이스 기준으로 크기를 줄이고, 결과는 Edge Cache에 얹어 반복 요청 비용을 낮춥니다. 중요한 조건은 첫 화면 대표 이미지를 더 늦게 만드는 최적화가 아니라, 먼저 보이게 만드는 최적화여야 한다는 점입니다.

지금 실행

• 직접 확인: Chrome DevTools Network에서 대표 상품 이미지의 natural size, 실제 표시 크기, transferred size, resource type을 확인하세요. PageSpeed Insights의 LCP element가 대표 이미지인지도 같이 봅니다.
• 내부 조치: 첫 화면 대표 이미지에 lazyload가 걸려 있으면 제거하고, 실제 표시 크기보다 지나치게 큰 원본이 내려오면 리사이즈 정책부터 적용하세요. 이미지 영역에는 aspect-ratio 또는 width/height를 지정해 CLS를 줄입니다.
• 구조 검토: 대상이 수십만 장의 원본 이미지, 셀러 외부 이미지, 브라우저별 AVIF/WebP 폴백, 캐시 분리까지 확장된다면 수동 재업로드로는 운영 비용이 커집니다. 이 경우 이미지 최적화 가이드를 기준으로 앞단 변환과 PoC 범위를 검토하세요.