Shopify를 위한 Core Web Vitals: 완벽 가이드 (2026)

Shopify와 Core Web Vitals: 서버를 제어할 수 없습니다

Core Web Vitals 최적화에 있어서 Shopify는 WordPress나 맞춤형 웹사이트와 근본적으로 다릅니다. WordPress에서는 서버, 데이터베이스, 캐싱 레이어, 모든 코드 라인 등 모든 것을 제어할 수 있습니다. 반면 Shopify에서는 일부 요소가 완전히 통제 범위를 벗어나는 관리형 플랫폼 내에서 작업하게 됩니다.

Core Web Vitals Technology Report에 따르면, 모바일 CWV 통과율에서 Shopify가 WordPress를 앞서고 있습니다 (2025년 말 기준 약 65% 대 44%). 이는 기본적으로 빠른 서버, Cloudflare를 통한 글로벌 CDN, 자동 이미지 형식 변환 및 사전 최적화된 기본 테마 등 Shopify의 인프라가 뛰어나기 때문입니다. 이 플랫폼은 서버 측면을 매우 잘 처리합니다.

문제는 스토어 운영자가 그 위에 추가하는 것들, 즉 앱, 서드파티 스크립트, 커스텀 테마 수정, 너무 큰 이미지, 과도한 폰트 로드 등에서 발생합니다. 바로 이 지점에서 Shopify 스토어가 Core Web Vitals에 실패합니다. 또한 서버 및 핵심 코드에 대한 접근이 제한적이므로 최적화 전략이 달라야 합니다.

수치로 보는 Shopify Core Web Vitals

Shopify는 Core Web Vitals 통과율에서 CrUX Technology Report 전체 2위를 차지했으며, 덜 널리 사용되는 플랫폼인 Duda 다음입니다. CrUX 및 독립적인 벤치마크 데이터의 수치는 다음과 같습니다.

출처: CrUX Technology Report(2025년 6월), SearchEngineJournal CMS 분석, Shero Commerce 1,000개 스토어 벤치마크(2025년 11월). *CrUX p75가 아닌 Shero 벤치마크의 중간값.

1,000개의 실제 Shopify 스토어를 대상으로 한 Shero Commerce 벤치마크에 따르면 모바일에서 세 가지 Core Web Vitals를 모두 통과한 비율은 48%에 불과했습니다. 이는 CrUX Technology Report가 전체 Shopify에 대해 보여주는 수치보다 낮으며, 이는 CrUX에 나타나는 스토어(충분한 Chrome 트래픽 필요)가 더 크고 잘 최적화된 스토어에 편향되어 있음을 시사합니다. 모바일 LCP 중간값인 2.26초는 2.5초의 "우수(good)" 기준치에 아슬아슬하게 근접해 있으며, 이는 아주 작은 추가 요소(앱 하나 추가, 최적화되지 않은 히어로 이미지 한 장)만으로도 스토어가 통과에서 실패로 넘어갈 수 있음을 의미합니다.

CLS와 INP는 문제가 되지 않습니다. Shopify의 CLS 중간값 0.01은 우수하며, INP 중간값 153ms는 우수 범위 내에 여유 있게 속합니다. Shopify 스토어가 Core Web Vitals에서 실패하는 지점은 바로 LCP입니다.

Shopify 스토어의 CoreDash 실제 사용자 데이터도 이러한 패턴을 확인해 줍니다. CWV에 실패하는 스토어는 거의 항상 LCP에서 실패합니다. 8개 이상의 서드파티 앱 스크립트를 로드하는 스토어는 3.0초 이상의 모바일 LCP 중간값을 보여줍니다. 3개 이하의 앱 스크립트가 있는 스토어는 2.0초 미만의 LCP 중간값을 유지합니다. 설치된 앱 수와 LCP 간의 상관관계는 데이터에서 볼 수 있는 가장 강력한 Shopify CWV 실패 예측 요인입니다.

Shopify에서 제어할 수 없는 것들

최적화를 시작하기 전에 먼저 제약 사항을 이해해야 합니다. Shopify에서는 다음을 수행할 수 없습니다.

• 서버나 호스팅 변경. Shopify는 자체 인프라에서 실행됩니다. 더 빠른 호스트로 전환하거나, 서버 레벨 캐싱을 구성하거나, PHP 설정을 조정할 수 없습니다. 좋은 소식은 Shopify의 TTFB가 전반적으로 훌륭하다는 것입니다(대부분의 지역에서 300ms 미만).
• content_for_header 제거. Shopify는 이 Liquid 태그를 통해 모든 페이지에 필수적인 JavaScript를 주입합니다. 여기에는 Shopify 자체 분석, 결제 스크립트 및 앱 로딩 인프라가 포함됩니다. 이를 제거할 수 없으며, 로딩을 지연시킬 경우 결제 및 앱 기능이 손상될 위험이 있습니다.
• CDN 제어. Shopify는 CDN으로 Cloudflare를 사용합니다. 자체 Cloudflare 설정에서 하듯 캐싱 규칙, 에지 워커 또는 사용자 지정 헤더를 구성할 수 없습니다.
• 데이터베이스 또는 백엔드 코드 접근. Shopify의 Liquid 템플릿 언어는 서버 측에서 실행되지만, Liquid가 제공하는 것 이상으로 데이터베이스 쿼리나 서버 측 렌더링을 최적화할 수는 없습니다.

즉, 여러분의 전체 최적화 전략은 제어 가능한 대상인 테마 코드, 설치된 앱, 이미지, 폰트, 그리고 서드파티 스크립트에 집중되어야 합니다.

Shopify CWV의 가장 큰 문제: 앱 비대화(App Bloat)

설치된 Shopify 앱은 Shopify 스토어에서 Core Web Vitals 실패의 가장 큰 단일 원인입니다. 모든 앱은 해당 앱이 사용되지 않는 페이지라도 스토어의 모든 페이지에 JavaScript와 CSS를 주입할 수 있습니다. 홈페이지에서 로드되는 리뷰 앱, 연락처 페이지에서 로드되는 제품 추천 위젯, 세일이 진행되지 않을 때도 모든 제품 페이지에서 로드되는 카운트다운 타이머가 그 예입니다.

앱이 코드를 주입하는 방식

Shopify 앱은 여러 가지 방식으로 코드를 주입하며, 이는 정리 작업에서 매우 중요합니다.

• App Embeds (테마 편집기): 테마 편집기의 "App Embeds"에서 이를 끄거나 켤 수 있습니다. 이것이 가장 깔끔하고 관리하기 쉬운 방법입니다.
• Theme snippets: 일부 앱은 설치 중에 테마 파일에 직접 코드를 추가합니다. 앱을 제거하더라도 이 코드가 지워지지 않을 수 있습니다. snippets/ 및 sections/에서 남아있는 파일이 없는지 수동으로 확인해야 합니다.
• ScriptTag API: 앱은 테마 파일을 건드리지 않고 프로그래밍 방식으로 스크립트를 주입할 수 있습니다. 이 스크립트들은 Shopify의 content_for_header를 통해 로드됩니다. 앱을 제거하면 스크립트도 삭제되지만 스크립트가 캐시되어 있을 수 있습니다.
• 서드파티 로더: 일부 앱은 자체 CDN에서 외부 JavaScript를 로드하여 추가적인 DNS 조회 및 네트워크 요청을 생성합니다.

앱 감사(Audit) 프로세스

성능에 미치는 영향을 파악하기 위해 Shopify 앱을 감사하는 방법은 다음과 같습니다.

1. 홈페이지, 제품 페이지, 컬렉션 페이지, 그리고 장바구니 페이지를 PageSpeed Insights에서 실행하세요. LCP, INP, CLS 점수를 기록합니다.
2. Chrome DevTools를 열고 Coverage 탭으로 이동합니다. 페이지를 새로 고치고 사용되지 않은 JavaScript의 비율을 확인하세요. 비대해진 Shopify 스토어에서는 로드된 JavaScript의 60%에서 80%가 해당 페이지에서 사용되지 않습니다.
3. JavaScript로 필터링된 Network 탭을 확인합니다. 크기순으로 정렬하세요. 어떤 스크립트가 앱에서 오고 어떤 스크립트가 테마에서 오는지 식별합니다. "Initiator(개시자)" 열은 각 스크립트를 로드한 주체를 알려줍니다.
4. 앱을 하나씩 비활성화(또는 App Embeds를 끔)하고 다시 테스트하세요. 각 앱이 INP와 LCP에 미치는 영향을 개별적으로 측정합니다.
5. 각 앱에 대해 판단하세요. 비즈니스 가치가 성능 저하 비용을 감수할 만큼 가치가 있는가? 더 가벼운 대안으로 교체할 수 있는가? 특정 페이지 유형에서만 로드되도록 할 수 있는가?

Shopify 최적화 프로젝트의 CoreDash 데이터는 앱 정리의 전형적인 효과를 보여줍니다. 불필요한 리뷰 위젯 스크립트 하나를 제거했더니 한 스토어에서 INP 중간값이 45ms 향상되었습니다. 사용하지 않는 3개의 앱(이전에 비활성화된 팝업 도구, 로열티 프로그램, 작동하지 않는 채팅 위젯)을 제거했더니 전체 페이지 JavaScript가 380KB 줄었고 모바일 LCP가 1.1초 향상되었습니다. 적극적으로 사용하지 않는 모든 앱은 아무 이유 없이 스토어를 느리게 만듭니다. 삭제하세요.

Shopify에서 LCP 해결하기

Shopify 스토어에서 LCP 요소는 거의 항상 홈페이지의 히어로 배너 이미지, 제품 페이지의 대표 제품 이미지 또는 컬렉션 페이지의 컬렉션 배너입니다. Shopify CDN은 브라우저에 자동으로 WebP 형식의 이미지를 제공하므로 도움이 됩니다. 하지만 직접 처리해야 할 최적화 작업이 몇 가지 있습니다.

히어로 이미지 미리 로드(Preload)

Shopify의 image_tag Liquid 필터에는 preload 매개변수가 내장되어 있습니다. 이를 true로 설정하면 Shopify는 서버에서 rel=preload가 포함된 Link HTTP 헤더를 전송합니다. 브라우저는 HTML 파싱을 시작하기도 전에 이를 수신하므로 가능한 가장 이른 preload 신호가 됩니다. 또한 태그의 imagesrcset과 imagesizes를 자동으로 포함하므로, URL 불일치 위험이 전혀 없이 반응형 preload가 올바르게 작동합니다.

이를 <img>의 fetchpriority: 'high' 및 스크롤 아래(below the fold) 섹션에 대한 Shopify의 기본 lazy 로딩을 덮어쓰기 위한 loading: 'eager'와 결합하세요. 히어로 이미지의 경우 다음과 같이 보입니다.

{{ section.settings.hero_image | image_url: width: 1200 | image_tag:
    preload: true,
    fetchpriority: 'high',
    loading: 'eager',
    sizes: '100vw'
}}

이 한 줄의 코드로 다음 효과를 얻을 수 있습니다. HTTP 헤더 preload(가장 빠름), <img>의 fetchpriority="high", lazy 대신 eager 로딩, 자동 width 및 height 속성 할당(CLS 방지), 그리고 자동 srcset 생성. preload를 사용하지 않더라도 히어로 이미지에는 항상 fetchpriority="high"를 설정하세요.

테마가 히어로 영역에 CSS Background Image를 사용하는 경우

일부 Shopify 테마는 히어로 배너를 <img> 태그 대신 CSS background-image로 렌더링합니다. 이는 LCP의 안티패턴(antipattern)입니다. fetchpriority를 잃고, 자동 srcset을 잃고, Shopify의 HTTP 헤더 preload를 잃으며, 브라우저는 CSS 파일을 다운로드하고 파싱할 때까지 이미지 가져오기를 시작조차 할 수 없습니다.

올바른 해결책은 CSS background를 <img> 태그로 변환하여 image_tag를 제대로 사용할 수 있도록 하는 것입니다. 테마 코드를 변경해야 하지만 이것이 올바른 방법입니다.

템플릿을 절대 변경할 수 없는 경우, theme.liquid에 수동으로 preload 힌트를 추가할 수 있습니다.

{%- if template == 'index' -%}
  <link rel="preload" as="image" href="{{ section.settings.hero_image | image_url: width: 1200 }}">
{%- endif -%}

주의하세요: preload의 URL은 Shopify의 ?v= 버전 스탬프와 &width= 매개변수를 포함하여 CSS의 URL과 정확히 일치해야 합니다. 단 하나의 매개변수라도 다르면 브라우저가 이미지를 두 번 다운로드하게 되어 성능이 향상되기는커녕 더 나빠집니다.

전체 LCP 이미지 미리 로드 전략에 대한 내용은 LCP 이미지를 미리 로드하는 방법을 참조하세요.

스크롤 위(Above the Fold) 영역에서 Lazy 로드를 하지 마세요

많은 Shopify 테마가 히어로 이미지를 포함한 모든 이미지에 loading="lazy"를 적용합니다. 이는 페이지에서 가장 중요한 이미지의 우선순위를 낮추라고 브라우저에 지시하는 것과 같습니다. 테마가 스크롤 위의 이미지를 lazy 로딩에서 제외하도록 하세요. Shopify의 image_tag 필터를 사용하는 최신 테마의 경우 히어로 이미지에 loading: 'eager'를 사용합니다.

이미지 크기 최적화

Shopify CDN은 URL 매개변수를 사용하여 즉석에서 이미지 크기를 조정할 수 있지만 Liquid 템플릿이 올바른 크기를 요청해야 합니다. 800px로만 표시되는데 2000px 너비의 이미지를 로드하지 마세요. 적절한 srcset 및 sizes 속성과 함께 Shopify의 반응형 이미지 마크업을 사용하세요. 이미지 최적화 가이드를 참고하세요.

Shopify에서 INP 해결하기

Shopify에서의 INP 실패는 거의 전적으로 JavaScript가 메인 스레드를 차단하기 때문에 발생합니다. Shopify 자체의 content_for_header 주입은 제거할 수 없는 기본적인 JavaScript를 이미 추가합니다. 그 위에 추가하는 모든 것들이 문제를 더 악화시킵니다.

비핵심 서드파티 스크립트 지연

채팅 위젯(Tidio, Zendesk, Intercom), 리뷰 앱(Judge.me, Yotpo, Loox), 개인화 도구(Klaviyo 팝업, Privy) 및 분석(Google Analytics, Facebook Pixel, Hotjar)은 초기 페이지 렌더링 중에 로드되어서는 안 됩니다. 올바른 접근 방식은 requestIdleCallback을 사용하는 것입니다. 이 경우 브라우저는 메인 스레드가 유휴 상태일 때, 일반적으로 페이지가 렌더링된 후 몇 초 뒤에 이러한 스크립트를 로드합니다.

상호작용 기반 지연(첫 번째 스크롤, 클릭 또는 탭 시 스크립트 로드)을 사용하지 마세요. 사용자가 버튼을 탭하고 사이트가 동일한 이벤트에 응답하여 500KB의 서드파티 JavaScript를 로드하면 메인 스레드가 차단되고 해당 상호작용은 끔찍한 INP 점수를 받게 됩니다. 지연의 핵심 목적은 메인 스레드를 사용자 상호작용을 처리할 수 있도록 자유롭게 유지하는 것이지, 상호작용과 경쟁하게 만드는 것이 아닙니다.

비핵심 스크립트의 src 속성을 data-src로 바꾼 다음, 브라우저가 유휴 상태일 때 원래대로 되돌려 놓으세요.

<script>
(window.requestIdleCallback || function(cb) { setTimeout(cb, 1); })(function() {
  document.querySelectorAll('script[data-src]').forEach(function(s) {
    s.src = s.dataset.src;
  });
});
</script>

setTimeout fallback은 requestIdleCallback을 지원하지 않는 Safari를 커버합니다. requestIdleCallback과 달리 진정한 유휴 창을 기다리지는 않습니다. 하지만 여전히 메인 스레드를 분할하고 동적으로 주입된 스크립트가 로드 스캐너를 우회하도록 하기 때문에 실제로는 꽤 훌륭한 fallback으로 기능합니다.

더 많은 JavaScript 지연 전략은 JavaScript를 지연하는 14가지 방법을 참조하세요.

테마 JavaScript 줄이기

Shopify의 온라인 스토어 2.0 테마(Dawn 등)는 가볍게 구축되었지만, 많은 서드파티 테마는 메가 메뉴, 제품 슬라이더, 퀵 뷰 모달 및 애니메이션을 위해 무거운 JavaScript를 추가합니다. Chrome DevTools의 Coverage 탭을 사용하여 테마의 JavaScript를 감사합니다. 테마가 200KB 이상의 JavaScript를 로드한다면 비활성화하거나 CSS 대안으로 교체할 수 있는 기능이 있는지 찾아보세요.

Shopify에서 CLS 해결하기

Shopify 스토어에서 Cumulative Layout Shift는 보통 크기가 지정되지 않은 이미지, 폰트 교체(swapping), 그리고 앱에서 동적으로 주입된 콘텐츠라는 세 가지 원인으로 인해 발생합니다.

Liquid 템플릿에 이미지 크기 설정하기

Liquid 템플릿에서 width 및 height 속성이 누락된 <img> 태그가 있는지 확인하세요. Shopify의 image_tag 필터는 이를 자동으로 출력할 수 있습니다.

{{ product.featured_image | 
   image_tag: widths: '200,400,800', sizes: '(max-width: 768px) 100vw, 50vw' }}

이렇게 하면 적절한 크기가 설정된 반응형 이미지가 생성되어 이미지가 로드될 때 레이아웃 시프트를 방지합니다.

동적 콘텐츠를 위한 공간 확보

페이지 로드 후 리뷰 별점, 신뢰도 배지, 카운트다운 타이머 또는 공지 표시줄을 주입하는 App Embeds는 CLS를 유발합니다. 각 동적 요소에 대해 CSS min-height로 공간을 확보하여 요소가 나타날 때 주변 콘텐츠가 밀리지 않도록 하세요. 이는 기존 콘텐츠 위쪽에 주입되는 요소에 특히 중요합니다.

폰트 로딩 최적화

Shopify 테마에서 커스텀 웹 폰트를 로드하는 경우, 잘 어울리는 fallback 폰트와 함께 font-display: swap을 사용하고 있는지 확인하세요. 기본 폰트 파일을 미리 로드(Preload)하여 텍스트가 올바른 폰트로 렌더링될 때까지의 시간을 줄입니다. 실제로 사용하는 폰트 두께와 스타일만 로드하세요. 폰트 최적화 가이드를 참조하세요.

Shopify 테마 선택 및 성능

테마 선택은 스토어의 성능 기준선을 설정합니다. ThemeVitals 프로젝트는 Shopify 테마에 대한 실제 CrUX 데이터를 추적합니다. 주요 발견 사항은 다음과 같습니다.

• Dawn (Shopify의 기본 무료 테마)은 성능을 우선으로 구축되었기 때문에 Core Web Vitals에서 일관되게 우수한 성능을 보여줍니다.
• 섹션, 애니메이션, 내장 기능(메가 메뉴, 제품 퀵 뷰, AJAX 장바구니 드로어 등)이 많은 테마는 더 많은 JavaScript를 포함하고 INP가 더 나빠지는 경향이 있습니다.
• 온라인 스토어 2.0 테마는 Shopify의 최신 섹션 아키텍처와 에셋 로딩을 사용하기 때문에 일반적으로 기존 레거시 테마보다 더 빠릅니다.

새 테마를 선택하는 중이라면 구매 전 ThemeVitals에서 해당 테마의 CrUX 데이터를 확인하세요. 가장 비용 효율적인 성능 최적화는 빠른 테마로 시작하는 것입니다.

Shopify가 기본적으로 잘하는 것들

Shopify는 설정 없이 기본적으로 제공하는 많은 것들을 훌륭하게 수행합니다.

• 빠른 인프라: Shopify 서버와 Cloudflare CDN은 전 세계적으로 일관되게 낮은 TTFB를 제공합니다.
• 자동 WebP: 브라우저가 지원하는 경우 Shopify CDN이 이미지를 WebP 형식으로 자동 변환합니다.
• HTTP/2 및 Brotli: 모든 Shopify 스토어에서 기본적으로 활성화되어 있습니다.
• 즉석 크기 조정이 가능한 이미지 CDN: URL 매개변수를 통해 원하는 너비의 이미지를 요청할 수 있습니다.
• Preconnect 힌트: Shopify는 자사 CDN 도메인에 대한 preconnect 힌트를 자동으로 추가합니다.

이러한 기본 설정 덕분에 Shopify의 기본 성능이 뛰어난 것입니다. 여러분이 할 일은 과도한 앱과 스크립트를 추가하여 이러한 이점을 훼손하지 않는 것입니다.

Shopify 스토어 모니터링

Shopify의 관리자 대시보드에는 "Speed Score(속도 점수)"가 포함되어 있지만, 이는 실제 Core Web Vitals를 반영하지 않는 단순화된 Lighthouse 기반 수치입니다. 실제 성능을 모니터링하려면 다음을 사용하세요.

• Google Search Console: 스토어 전체의 필드 데이터에 대한 Core Web Vitals 보고서를 확인합니다.
• CoreDash: 가벼운 RUM 스니펫(theme.liquid에 코드 한 줄 추가)을 설치하여 페이지 유형, 기기 및 국가별로 세분화된 실시간 Core Web Vitals 데이터를 확보합니다.
• PageSpeed Insights: 개별 제품, 컬렉션, 홈페이지 URL을 테스트하여 진단 데이터를 얻습니다.

앱을 설치하거나, 테마를 업데이트하거나, 시즌 캠페인을 런칭할 때마다 모니터링하세요. Shopify에서의 성능 저하는 거의 항상 최근에 추가된 무언가에 의해 발생합니다.

CoreDash 모니터링 데이터에 따르면 Shopify CWV 성능 저하의 가장 흔한 원인은 JavaScript를 전역적으로 주입하는 새 앱 설치입니다. 평균적으로 새로운 Shopify 앱은 모든 페이지 로드에 50KB에서 150KB의 JavaScript를 추가합니다. LCP 임계값(2.3초~2.5초)에 아슬아슬하게 걸쳐 있는 스토어의 경우 앱 설치 단 한 번으로 인해 기준을 초과하여 실패할 수 있습니다. 두 번째로 흔한 원인은 시즌별 변경 사항입니다. 블랙 프라이데이 캠페인 배너, 홀리데이 팝업 및 할인 이벤트를 위해 추가했다가 지우는 것을 잊어버린 프로모션용 카운트다운 타이머가 이에 해당합니다.