게시일: 2026년 6월 24일
Nuvemshop (스페인어권 라틴 아메리카에서는 Tiendanube로 알려짐)은 이 지역의 선도적인 전자상거래 플랫폼으로, 180,000개 이상의 온라인 상점을 지원합니다. 판매자가 여러 테마와 동적 콘텐츠 배열을 통해 스토어를 맞춤설정하므로 이러한 다양성 전반에서 페이지가 빠르게 로드되도록 하는 데는 고유한 기술적 문제가 있습니다.
- 최대 콘텐츠 페인트 (LCP) 상태가 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% 증가하는 것으로 나타나 Google의 투자 방향이 타당한 것으로 확인되었습니다.
문제: 동적 전자상거래 레이아웃에서 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" alt="Featured product"> <!-- After --> <img src="slide-1.webp" alt="Featured product">명시적 우선순위 신호가 추가되었습니다.
fetchpriority="high"를 추가하면 브라우저의 미리 로드 스캐너에 LCP 이미지가 최우선순위 리소스임을 알려 레이아웃과 렌더링이 완료되기 전에 더 빨리 검색되고 다운로드될 수 있습니다. 요소가 실제로 LCP 후보가 될 수 있는 위치에 있는 경우에만 우선순위 신호가 적용되도록 검증 로직을 추가했습니다. 모든 항목의 우선순위가 높으면 아무것도 우선순위가 높지 않으므로 너무 많은 이미지에fetchpriority="high"을 추가하는 것은 역효과를 낼 수 있습니다.<!-- Before --> <img src="slide-1.webp" alt="Featured product"> <!-- 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% 증가하는 등 측정 가능한 이점을 누렸습니다. 빠른 스토어는 기술적 성과일 뿐만 아니라 판매자의 성공을 직접적으로 이끌어냅니다.