2026년의 세 가지 Core Web Vitals

Google은 페이지 경험에 대해 세 가지 주요 필드 지표를 측정합니다. 각각에 "좋음" 성능을 위한 기준이 있습니다:

• Largest Contentful Paint (LCP) — 가장 큰 가시적 요소를 렌더링하는 시간. 좋음: 2.5초 미만.
• Interaction to Next Paint (INP) — 모든 사용자 상호 작용에 대한 응답성(2024년 3월 FID 대체). 좋음: 200ms 미만.
• Cumulative Layout Shift (CLS) — 로딩 중 시각적 안정성. 좋음: 0.1 미만.

렌더링을 차단하거나, 로드 시 무거운 JavaScript를 실행하거나, 늦은 레이아웃 변경을 주입하는 동의 배너는 이 중 어느 것이든 "개선 필요" 또는 "나쁨" 범위로 밀어낼 수 있습니다 — Google은 실제 Chrome 사용자의 28일 필드 데이터를 사용하므로, 일시적인 문제가 지속적인 순위 신호가 됩니다.

동의 배너가 LCP를 해치는 방법

Largest Contentful Paint는 보통 히어로 이미지나 헤드라인에서 발생합니다. 몇 가지 동의 패턴이 불필요하게 지연시킵니다:

렌더링을 차단하는 CMP 스크립트

문서 head에서 CMP를 동기적으로 로드하면 스크립트가 다운로드되고 실행될 때까지 HTML 파싱이 중단됩니다. CMP가 느린 CDN에 호스팅되어 있거나 콜드 캐시 상태라면, LCP에 전 세계적으로 200-800ms를 추가할 수 있습니다.

히어로를 덮는 배너

동의 배너가 LCP 요소를 덮는 모달 오버레이로 배치된 경우, 브라우저는 여전히 덮인 요소에서 LCP를 측정합니다. 그러나 배너가 가장 크게 그려진 요소라면 LCP 후보가 됩니다 — 그리고 페이지 로드 후 JavaScript를 통해 렌더링된다면 LCP가 인위적으로 높아집니다.

수정: 작은 인라인 Bootstrap을 사용한 비동기 로딩

전체 CMP를 비동기적으로 로드하고(`async` 또는 `defer`), 초기 배너 표시를 위한 작은 인라인 스크립트만 사용하세요. gzip 압축 후 5KB 미만의 bootstrap을 목표로 하세요. 전체 동작 로직, 공급업체 목록, UI 크롬은 첫 번째 페인트 후에 지연 로드될 수 있습니다.

동의 배너가 INP를 해치는 방법

Interaction to Next Paint는 세션 동안 모든 클릭, 탭, 키 누름에서 최악의 응답 시간을 측정합니다. 쿠키 동의 상호 작용은 종종 사용자가 하는 첫 번째 상호 작용이므로, 느린 동의 버튼이 점수를 망칩니다.

동의 시 무거운 작업

많은 CMP가 동의 시 동기적인 작업을 실행합니다: 40개 이상의 공급업체 스크립트 로드, localStorage에 쓰기, dataLayer 이벤트 발생, Google Consent Mode 업데이트 트리거. 이것이 200ms를 초과하면 INP가 나빠집니다.

수정: 페인트 후 작업 큐에 넣기

동의 클릭 시, 즉시 배너를 숨기고 `requestIdleCallback` 또는 `setTimeout(0)`으로 무거운 작업을 예약하세요. 사용자는 배너가 즉시 사라지는 것을 볼 수 있습니다. 공급업체 스크립트는 상호 작용을 차단하지 않고 백그라운드에서 로드됩니다.

동의 배너가 CLS를 해치는 방법

Cumulative Layout Shift는 예상치 못한 시각적 움직임을 추적합니다. 배너는 콘텐츠가 그려진 후 DOM에 주입될 때 CLS의 전형적인 원인입니다.

늦은 배너 주입

배너가 LCP 800ms 후에 나타나면, 콘텐츠를 아래로 밀고 레이아웃 이동을 만듭니다. 뷰포트의 큰 부분에 영향을 미치면 작은 배너도 0.1 이상의 CLS 점수를 유발할 수 있습니다.

쿠키 설정 위젯 재렌더링

공급업체 로고를 비동기적으로 로드하는 푸터 설정 위젯은 전체 푸터를 여러 번 재흐름시켜 CLS를 가중시킬 수 있습니다.

수정: 미리 공간 확보

첫 번째 페인트부터 배너 공간을 확보하기 위해 CSS를 사용하세요 — 고정 높이 플레이스홀더, 푸터의 `min-height`, 또는 콘텐츠를 밀지 않는 하단 고정 배너. 현대 CMP는 기본적으로 CLS 없는 구성을 제공해야 합니다.

Google Consent Mode V2와 성능

Consent Mode V2는 Google 태그가 동의 전에 쿠키 없는 상태에서 실행되어 `gtag('consent', 'default', {...})`를 통해 신호를 전달할 수 있게 합니다. 이는 측정 연속성에 탁월하지만, gtag.js 라이브러리 자체는 50-90KB입니다. 비동기적으로 로드하고 레이스 컨디션을 피하기 위해 가능한 한 빨리 기본값을 설정하세요.

• gtag가 로드되기 전에 기본값 설정 — gtag.js 스크립트 전에, head에 동의 기본 호출을 배치하세요.
• 기본값으로 `analytics_storage: 'denied'` 사용 — 동의 전에 수집되는 데이터를 최소화합니다.
• requestIdleCallback을 통해 동의 시 업데이트 — 메인 스레드 차단을 피하세요.

Core Web Vitals에 대한 CMP 영향 측정

추측하지 말고 측정하세요. 배너의 영향을 정량화하기 위해 이 도구들을 사용하세요:

• PageSpeed Insights — Chrome UX Report의 필드 데이터와 실험실 Lighthouse 감사. CMP 스크립트 있음과 없음으로 점수를 비교하세요.
• Web Vitals Chrome 확장 프로그램 — 로컬 테스트 중 실시간 LCP, INP, CLS 오버레이.
• WebPageTest.org — 배너가 정확히 언제 렌더링되고 무엇을 차단하는지 보여주는 필름 스트립과 워터폴 뷰.
• Search Console Core Web Vitals 보고서 — URL 패턴으로 그룹화된 28일 필드 데이터. 배너가 있는 랜딩 페이지가 없는 페이지와 다른 점수를 받는지 확인하세요.

FlexyConsent가 빠른 속도를 유지하는 방법