게시일: 2026년 6월 24일
Nuvemshop (스페인어권 중남미에서는 Tiendanube로 알려짐)은 이 지역의 선도적인 이커머스 플랫폼으로, 180,000개 이상의 온라인 상점을 지원합니다. 판매자가 여러 테마와 동적 콘텐츠 배열을 통해 매장을 맞춤설정하는 경우, 이러한 다양성 속에서 빠른 페이지 로드를 보장하는 것은 고유한 기술적 과제입니다.
- 최대 콘텐츠 페인트 (LCP) 상태가 1년 만에 57%에서 96% 로68% 개선되어, 실제 사용자를 위해 표시 영역 상단에 콘텐츠를 렌더링하는 방식이 크게 변화했음을 보여줍니다.
- Core Web Vitals 통과율이 48% 에서 72%로 급증하여 이제 매장 4곳 중 거의 3곳이 Google의 기본 성능 기준을 충족합니다.
- 쇼핑 참여도가 눈에 띄게 개선됨: 2025년 1월과 2026년 1월에 활성 상태였던 브라질 매장의 동일한 동질 집단을 분석한 결과, Google 자연 검색을 통해 유입된 모바일 방문자는 다음과 같은 결과를 보였습니다.
- 전환율 (세션에서 유료 주문으로 전환) 8.9% 증가
- 장바구니 참여율 (세션에서 장바구니로 전환) 8.4% 증가
- 모바일이 가장 큰 성과를 거두었으며, 이는 LCP 개선이 가장 두드러진 부분과 일치합니다.
이러한 결과는 Google이 의뢰한 Deloitte 연구 (37개 브랜드에서 3천만 개 이상의 세션)와 일치합니다. 이 연구에서는 로드 속도가 0.1초 개선되면 소매 전환율이 8.4% 증가할 수 있음을 발견하여 투자 방향을 검증했습니다.
과제: 동적 이커머스 레이아웃의 LCP 감지
2025년 초에는 매장의 48% 만 Core Web Vitals 기준점을 통과했고 57% 는 정상적인 LCP 점수를 받았습니다. 초기 가설은 이미지 용량이나 서버 지연 시간이었습니다. 저희가 틀렸습니다.
수천 개의 매장을 대상으로 PageSpeed Insights 분석을 수행한 결과, Google 플랫폼을 통해 판매자가 홈페이지 섹션을 동적으로 정렬할 수 있다는 사실을 발견했습니다. 캐러셀, 배너, 제품 그리드, 맞춤 모듈을 어떤 순서로든 표시할 수 있습니다.
이러한 유연성으로 인해 예상치 못한 문제가 발생했습니다. 올바른 요소가 항상 LCP로 식별되지는 않았습니다. 매장 첫 페이지의 85%를 차지하는 캐러셀이 있는 매장에서는 페이지가 다양한 화면과 기기에서 렌더링되는 방식에 따라 표시 영역의 아래쪽에 있는 배너가 첫 번째 캐러셀 이미지 대신 LCP로 표시되는 경우가 있었습니다. 즉, 최적화 노력이 의도한 효과를 거두지 못했습니다. 실제로 LCP 요소가 아닌 요소를 최적화하고 있었습니다.
일반적인 SaaS 플랫폼과 달리 홈페이지를 수정하는 것만으로는 충분하지 않았습니다. 기존 스토어를 중단하거나 창의적인 자유를 제한하지 않으면서 가능한 모든 테마 구성, 섹션 정렬, 판매자 맞춤설정에서 작동하는 솔루션이 필요했습니다.
동적 레이아웃이 LCP 요소 선택에 미치는 영향
PageSpeed Insights 분석 및 실제 사용자 모니터링을 통해 브라우저의 LCP 감지 알고리즘에 요소가 표시될 때 캐러셀 및 배너의 CSS 전환이 지연된다는 사실을 발견했습니다. 사용자는 캐러셀이 먼저 로드되는 것으로 인식했지만 브라우저는 두 번째 섹션의 배너를 LCP 요소로 표시하는 경우가 있었습니다. 이 요소의 공개 상태가 전환 효과로 인해 지연되지 않았기 때문입니다.
근본 원인은 세 가지로 파악되었습니다.
- 요소가 표시되는 것으로 간주될 때 CSS 전환이 지연되어 LCP 감지가 잘못된 프레임으로 푸시되었습니다.
- 즉시 로드해야 하는 표시 영역 상단의 이미지에 지연 로드가 적용되었습니다.
- 우선순위 신호가 누락되어 가장 중요한 이미지가 먼저 로드되지 않았습니다.
또한 LCP 측정의 상당 부분이 홈페이지뿐만 아니라 카테고리 및 제품 페이지에서 발생했기 때문에 트래픽이 많은 모든 페이지 유형에 일관되게 수정사항을 적용해야 했습니다.
구현: 세 가지 근본 원인을 대규모로 해결
원인이 파악되자 해결 방법은 간단했습니다. 모든 핵심 테마와 페이지 유형에 일관되게 적용했지만, 새로운 문제가 발생하지 않도록 각 테마와 페이지 유형에 신중하게 범위를 지정해야 했습니다.
- 첫 번째 위치 섹션의 CSS 전환이 삭제되었습니다. 이제 페이지에 가장 먼저 표시되는 섹션이 즉시 렌더링되므로 브라우저가 인위적인 지연 없이 LCP 후보로 감지합니다.
표시 영역 상단의 이미지에서 지연 로드를 삭제했습니다. 첫 번째 섹션의 이미지의 경우 리소스 로드 지연을 없애기 위해 조건부로
loading="lazy"를 삭제합니다. 첫 번째 위치 섹션의 첫 번째 이미지로만 범위를 지정했습니다.<!-- Before --> <img src="slide-1.webp" loading="lazy" al>t<="Featu>r<ed product" !-- After -- img src="s>lide-1.webp" alt="Featured product"명시적 우선순위 신호가 추가되었습니다.
fetchpriority="high"를 추가하면 브라우저의 미리 로드 스캐너에 LCP 이미지가 최우선 리소스임을 알려 레이아웃과 렌더링이 완료되기 전에 더 빨리 검색하고 다운로드할 수 있습니다. 요소가 실제로 LCP 후보가 될 수 있는 위치에 있는 경우에만 우선순위 신호가 적용되도록 유효성 검사 로직을 추가했습니다. 너무 많은 이미지에fetchpriority="high"를 추가하면 역효과가 발생합니다. 모든 것이 우선순위가 높으면 아무것도 우선순위가 높지 않기 때문입니다.<!-- Before --> <img src="slide-1.webp" alt="Fe>a<tured produc>t<" !-- After -- img src="slide-1.webp" fetchpriority>="high" alt="Featured product"에지 캐싱을 통한 지연 시간 단축 캐싱은 로드 시간을 줄이는 데 효과적이지만 이커머스에서는 실제 위험을 초래합니다. 오래된 가격 책정 및 인벤토리 데이터를 제공하면 고객 신뢰와 수익에 직접적인 영향을 미칩니다. Google은 실적 데이터와 함께 비즈니스 측정항목을 모니터링하고 캐시 적중률을 극대화하는 동시에 판매자 또는 구매자 경험에 해를 끼칠 수 있는 콘텐츠를 캐시하지 않도록 주의를 기울였습니다.
영향 및 결과: LCP가 57% 에서 96% 로 개선됨
| 측정항목 (2025년 1월~2026년 1월) | 상대적 개선 |
|---|---|
| LCP (좋음) | +68% (57% ~96%) |
| Core Web Vitals (통과율) | +50% (48% ~72%) |
| 전환율 (세션에서 유료 주문으로) — 모바일 Google 자연 검색 | +8.9% |
| 장바구니 참여도 (세션에서 장바구니로) — 모바일 Google 자연 검색 | +8.4% |
이러한 개선사항 덕분에 Nuvemshop과 Tiendanube는 브라질, 아르헨티나, 멕시코에서 실적 순위 1위의 전자상거래 플랫폼으로 자리매김했습니다.
핵심 요점 및 사후 검토
Nuvemshop의 고도로 맞춤설정 가능한 아키텍처로 인해 표준 최적화 플레이북에 의존할 수 없었습니다. 진짜 문제는 이미지 가중치나 서버 지연 시간이 아니었습니다. 브라우저가 CSS 전환, 누락된 우선순위 신호, 표시 영역 상단의 이미지에 적용된 지연 로드로 인해 예기치 않은 요소를 LCP로 선택하고 있었습니다.
근본 원인을 파악한 후에는 첫 번째 위치 섹션에서 전환을 삭제하고, 표시 영역 상단의 이미지에서 지연 로드를 삭제하고, 명시적인 우선순위 신호를 추가하는 등 간단하게 수정할 수 있었습니다. 이러한 원칙을 모든 핵심 테마, 페이지 유형, 플랫폼에 있는 180,000개 이상의 매장에 일관되게 적용했습니다.
그 결과 LCP 통과율이 57% 에서 96%로 증가했고, 전반적인 Core Web Vitals 통과율은 48% 에서 72%로 급증했으며, 판매자는 전환율이 8.9% 증가하고 모바일에서 장바구니 참여도가 8.4% 증가하는 등 측정 가능한 이익을 얻었습니다. 빠른 매장은 기술적 성과일 뿐만 아니라 판매자의 성공을 직접적으로 이끕니다.