Shopify의 Critical CSS: 렌더링 차단 CSS 제거

Arjen Karel
linkedin

간단히 알아보는 Shopify의 Critical CSS

Critical CSS는 첫 번째 렌더링에 필요한 CSS 규칙의 모음입니다. 이 규칙들은 페이지의 head에 인라인으로 배치되므로 브라우저가 외부 CSS 파일이 다운로드되기를 기다리지 않고 렌더링을 시작할 수 있습니다.

Shopify는 자동화된 Critical CSS를 지원하지 않습니다. 훌륭한 인프라를 갖추고 있지만(2025 Web Almanac 데이터에 따르면 Shopify는 데스크톱에서 좋은 TTFB 95%, 좋은 LCP 92%로 모든 이커머스 플랫폼을 선도합니다), 모바일에서 모든 Core Web Vitals를 통과하는 Shopify 스토어는 48%뿐입니다. 렌더링 차단 CSS가 주요 원인 중 하나입니다. 2025 Web Almanac에 따르면 모바일 페이지의 85%가 여전히 render-blocking resources 감사에 실패합니다.

최종 검토자: Arjen Karel (2026년 3월)

Critical CSS란 무엇인가요?

모든 최신 브라우저는 외부 CSS 파일이 다운로드되고 파싱될 때까지 렌더링을 차단합니다. 페이지가 하나 이상의 CSS 파일을 로드할 때 렌더링이 쉽게 100ms 이상 차단될 수 있습니다.

Critical CSS는 페이지의 표시되는 부분(스크롤 전 영역)을 렌더링하는 데 필요한 CSS 규칙만 추출하여 <head>에 인라인으로 배치함으로써 이 문제를 해결합니다. 브라우저는 즉시 렌더링을 시작할 수 있으며, 전체 스타일시트는 백그라운드에서 다운로드됩니다. 이는 First Contentful Paint (FCP) 및 Largest Contentful Paint (LCP)를 직접적으로 개선합니다.

최신 접근 방식: inline_asset_content

테마가 섹션이나 컴포넌트별로 별도의 CSS 파일을 사용하는 경우(Shopify의 Dawn 테마 및 대부분의 Online Store 2.0 테마처럼) inline_asset_content Liquid 필터를 사용하여 자산 파일에서 직접 CSS를 인라인할 수 있습니다:

<style>
  {{ 'section-hero.css' | inline_asset_content }}
</style>

이렇게 하면 CSS 파일의 내용을 <style> 블록으로 인라인하여 렌더링 차단 요청을 완전히 제거합니다. 스크롤 전 섹션에 대해서만 조건부로 CSS를 인라인할 수도 있습니다:

{%- if section.index0 < 2 -%}
  <style>
    {{ 'section-hero.css' | inline_asset_content }}
  </style>
{%- else -%}
  {{ 'section-hero.css' | asset_url | stylesheet_tag }}
{%- endif -%}

인덱스가 2 미만인 섹션(페이지의 처음 두 섹션, 거의 항상 스크롤 전 영역에 위치)은 CSS가 인라인됩니다. 그 외 모든 항목은 일반 스타일시트로 로드됩니다. 이것이 제가 최신 Shopify 테마에 권장하는 방식입니다.

전통적인 접근 방식: Critical CSS 생성 및 인라인

테마가 하나의 큰 스타일시트를 사용하는 경우(구형 테마 및 많이 사용자 정의된 스토어에서 흔함) 직접 Critical CSS를 추출해야 합니다. 이것은 6단계 프로세스입니다.

1. 테마 복제하기

Shopify에서 템플릿의 핵심 동작을 편집할 때는 항상 복사본에서 먼저 작업하세요. 'Online Store' > 'Themes'를 통해 현재 테마로 이동한 다음 'Actions' > 'Duplicate'를 클릭하여 복제합니다.

duplicate shopify theme for critical CSS

2. Critical CSS 생성하기

저는 Critical Node.js 모듈과 수동 조정을 결합하여 사용합니다. 약간의 수고가 필요하지만 최상의 결과를 만들어냅니다.

이 작업이 너무 기술적이라면 온라인 생성기를 사용하세요. 자체적으로 제공하는 Critical CSS Generator가 이 작업을 대신 수행합니다. URL을 입력하고 생성된 Critical CSS를 복사한 다음 다음 단계로 진행하세요.

generate critical CSS for Shopify

3. Critical CSS 업로드하기

복제된 테마에서 스니펫 폴더로 이동하여 critical-css.liquid라는 새 파일을 만듭니다. 생성된 CSS를 <style> 태그로 감싸고 새 파일에 붙여넣습니다.

upload critical CSS in Shopify

4. 레이아웃 파일 편집하기

레이아웃 폴더에서 theme.liquid를 엽니다. 두 가지 변경이 필요합니다.

먼저 <head>에 Critical CSS 스니펫을 렌더링합니다:

<head>
  {% render 'critical-css' %}

참고: Shopify는 {% render %}를 위해 {% include %}를 더 이상 사용하지 않습니다. 테마가 여전히 include를 사용하는 경우 작동은 하지만 마이그레이션해야 합니다.

그런 다음 기존 CSS 참조를 백그라운드에서 로드되도록 변경합니다. 가장 깔끔한 패턴(Shopify의 Dawn 테마에서 사용됨)은 media="print" 트릭입니다:

<link
    rel="stylesheet"
    href="{{ 'theme.scss.css' | asset_url }}"
    media="print"
    onload="this.media='all'; this.onload=null;" />

이것은 초기 로드 중에는 브라우저가 스타일시트를 인쇄 스타일시트(비 렌더링 차단)로 취급하도록 지시하고 다운로드가 완료되면 media="all"로 전환하도록 지시합니다. 전체 스타일시트가 백그라운드에서 로드되는 동안 Critical CSS는 페이지를 즉시 렌더링합니다. 이 media="print" 접근 방식은 더 간단하고 <noscript> fallback(폴백)이 필요하지 않기 때문에 이전의 rel="preload" 패턴을 대체했습니다.

5. 새 테마 테스트하기

테마 페이지에서 'Actions' > 'Preview'를 클릭하여 복사한 테마를 테스트합니다. 특히 Cumulative Layout Shift (CLS)에 주의하세요. 불완전하거나 잘못된 Critical CSS는 요소가 최종 스타일 없이 렌더링된 후 전체 CSS가 로드되면 원래 위치로 튀어오르는 스타일이 지정되지 않은 콘텐츠 플래시 현상(FOUC)을 일으킵니다. 그것이 레이아웃 이동(layout shift)입니다.

미리보기 URL에서 PageSpeed Insights를 실행하고 전후의 FCP 및 LCP를 비교해 보세요. 두 가지 모두 분명히 개선된 것을 볼 수 있습니다. 라이브로 전환한 후 지속적인 모니터링을 위해 Real User Monitoring으로 필드 데이터를 추적하여 실제 방문자에게도 개선 사항이 유지되는지 확인하세요.

critical CSS in Shopify testing

6. 새 테마 게시하기

'Online Store' 아래 왼쪽 메뉴의 Themes로 이동하여 'Actions' 아래에서 새 테마에 대해 'Publish'를 선택합니다.

publish critical CSS in Shopify

제어할 수 없는 한계

Shopify는 모든 페이지의 <head>에 content_for_header를 강제합니다. 이는 사용자가 지연시키거나 수정할 수 없는 분석 스크립트, 앱 스크립트 및 기타 플랫폼 코드를 삽입합니다. 설치된 모든 Shopify 앱은 이 메커니즘을 통해 스크립트를 추가할 수 있습니다. 이것은 불가피한 렌더링 차단 비용이며, 이로 인해 제어할 수 있는 모든 항목(CSS, 폰트, 자체 스크립트)을 최적화하는 것이 훨씬 더 중요해집니다. 사용하지 않는 앱을 제거하는 것은 할 수 있는 가장 효과적인 일 중 하나입니다.

또 다른 한계점: Shopify는 Liquid 편집기에서 쿠키 읽기 또는 보내기를 허용하지 않습니다. 이상적인 것은 처음 방문자에게만 Critical CSS를 제공하고 재방문자에게는 캐시된 전체 스타일시트를 제공하는 것입니다. 하지만 Shopify에서는 그것이 불가능합니다. 그럼에도 불구하고 Critical CSS를 통해 얻는 속도 향상은 그만한 가치가 있습니다. Shero Commerce의 2025 벤치마크에 따르면 모바일에서 중간 규모 Shopify 스토어의 LCP는 2.26초로 2.5초 임계값에 바짝 다가서 있습니다. 렌더링 차단 CSS를 제거하여 200ms라도 단축하는 것은 Core Web Vitals 통과와 실패를 가르는 차이가 될 수 있습니다.

다른 무엇을 할 수 있나요?

Critical CSS는 퍼즐의 한 조각입니다. 완벽한 Shopify 최적화 전략에 대해서는 Shopify용 Core Web Vitals 가이드를 참조하세요. 영향력이 큰 다른 방법으로는 LCP 이미지 미리 로드하기, Google 폰트 직접 호스팅하기, 리소스 우선순위 지정 이해하기 등이 있습니다. Shopify는 또한 즉각적인 페이지 탐색을 위한 Speculation Rules와 HTML이 도착하기도 전에 리소스를 미리 로드하기 위한 103 Early Hints를 지원합니다.

여전히 사용하지 않는 CSS 경고(unused CSS warnings)로 씨름하고 있다면 그것부터 먼저 해결하세요. 필요하지 않은 CSS를 제거하는 것이 사용하는 CSS를 인라인하는 것보다 항상 더 낫습니다.

About the author

Arjen Karel is a web performance consultant and the creator of CoreDash, a Real User Monitoring platform that tracks Core Web Vitals data across hundreds of sites. He also built the Core Web Vitals Visualizer Chrome extension. He has helped clients achieve passing Core Web Vitals scores on over 925,000 mobile URLs.

Lighthouse 점수가 전부가 아닙니다.

실사용자는 4G 회선 Android 폰을 씁니다. 그 사용자들이 실제로 겪는 걸 분석합니다.

필드 데이터 분석

Core Web Vitals Shopify Critical CSS: 렌더링 차단 CSS 단계별 제거