?>

Core Web Vitals 설명: LCP, INP, CLS – 초보자를 위한 완전 가이드 (2026)

Core Web Vitals은 실제 페이지 경험을 측정하는 Google의 사용자 중심 측정항목 세트입니다. 2021년부터 순위 요소였으며, 2026년에는 그 어느 때보다 중요합니다 – 이를 통과하면 검색 순위와 전환율을 직접 개선할 수 있습니다. 이 가이드는 각 측정항목, 측정 방법, 일반적인 문제를 정확히 해결하는 방법을 설명합니다.

Core Web Vitals이 중요한 이유 (비즈니스 사례)

• Core Web Vitals을 통과하는 페이지는 이탈 가능성이 24% 낮습니다.
• LCP가 0.5초 개선되면 전환율이 12-15% 증가할 수 있습니다 (Google 사례 연구).
• 나쁜 Core Web Vitals은 타이브레이커입니다 – 두 페이지의 관련성이 유사한 경우 더 빠르고 안정적인 페이지가 더 높은 순위를 차지합니다.

사이트가 세 가지 측정항목 중 하나라도 실패하면 돈과 순위를 놓치고 있는 것입니다.

세 가지 Core Web Vitals – 상세 분석

1. LCP (Largest Contentful Paint) – 로딩 속도

측정 내용: 가장 큰 가시 요소(히어로 이미지, 헤드라인, 비디오)가 렌더링되는 데 걸리는 시간. 좋음: 2.5초 미만. 나쁨: 4초 초과.

중요한 이유: 사용자는 기본 콘텐츠가 나타나는 시점을 기준으로 속도를 인지합니다. 느린 LCP는 깨진 사이트처럼 느껴집니다.

LCP가 나쁜 일반적인 원인:

• 큰 히어로 이미지(>200KB).
• 느린 서버 응답 시간(TTFB >600ms).
• 렌더링을 차단하는 CSS 또는 JavaScript.
• 페인트를 지연시키는 클라이언트 측 렌더링(React/Vue).

2. INP (Interaction to Next Paint) – 응답성

측정 내용: 사용자 상호작용(클릭, 탭, 키 누름)과 다음 시각적 업데이트 사이의 시간. 좋음: 200밀리초 미만. 2024년에 FID를 대체했습니다.

중요한 이유: 느린 INP는 사이트가 느리게 느껴지게 합니다. 사용자가 버튼을 클릭해도 아무 일이 일어나지 않으면 – 고장난 것으로 간주합니다.

INP가 나쁜 일반적인 원인:

• 메인 스레드를 차단하는 긴 JavaScript 작업(>50ms).
• 모든 상호작용에 대한 무거운 이벤트 핸들러.
• 상호작용 시 실행되는 타사 스크립트(분석, 채팅 위젯).

3. CLS (Cumulative Layout Shift) – 시각적 안정성

측정 내용: 보이는 요소의 예기치 않은 레이아웃 이동(움직임)의 양. 좋음: 0.1 미만. 나쁨: 0.25 초과.

중요한 이유: 콘텐츠가 이동하면 사용자가 위치를 잃고, 실수로 광고를 클릭하거나, 좌절감을 느끼게 됩니다. 직접적인 사용자 경험 실패입니다.

CLS가 나쁜 일반적인 원인:

• 명시적인 `width`와 `height`가 없는 이미지나 비디오.
• 늦게 로드되어 텍스트를 바꾸거나 이동시키는 글꼴.
• 기존 콘텐츠를 아래로 밀어내는 동적으로 삽입된 콘텐츠(광고, 배너).

사이트의 Core Web Vitals 측정 방법

• 필드 데이터(실제 사용자, 순위 결정): Google Search Console → Core Web Vitals 보고서. 또한 CrUX(Chrome 사용자 경험 보고서).
• 랩 데이터(시뮬레이션, 디버깅용): PageSpeed Insights, DevTools의 Lighthouse, WebPageTest.

순위 영향에 대해서는 필드 데이터에 집중하되, 문제를 찾고 수정하려면 랩 데이터를 사용하세요.

나쁜 LCP 수정 – 단계별 가이드

1. 히어로 이미지 최적화

WebP로 변환하고 Squoosh 또는 ImageOptim과 같은 도구로 압축합니다. `srcset`을 사용하여 기기별로 적절한 크기의 이미지를 제공합니다.

<code>&lt;img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" width="800" height="500" fetchpriority="high" alt="히어로"&gt;</code>

2. LCP 요소 프리로드

<code>&lt;link rel="preload" as="image" href="hero.webp" fetchpriority="high"&gt;</code>

3. TTFB(Time to First Byte) 개선

• 공유 호스팅 대신 VPS를 사용하세요.
• OPcache로 PHP-FPM을 활성화하세요.
• 데이터베이스 인덱싱 및 캐싱(Redis 또는 Memcached)을 구현하세요.
• 글로벌 분배를 위해 CDN(Cloudflare, Bunny.net)을 고려하세요.

4. 렌더링 차단 리소스 제거

중요 CSS를 인라인화하고, 중요하지 않은 CSS는 지연하며, JavaScript 파일에 `defer` 또는 `async`를 추가합니다.

<code>&lt;style&gt; /* 중요 CSS */ &lt;/style&gt;<br>&lt;link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'"&gt;<br>&lt;script defer src="analytics.js"&gt;&lt;/script&gt;</code>

나쁜 INP 수정 – 응답성 심층 분석

1. 긴 JavaScript 작업 분할

<code>function heavyTask() {<br>  let i = 0;<br>  function chunk() {<br>    const start = performance.now();<br>    while (i < items.length && performance.now() - start < 5) {<br>      process(items[i]);<br>      i++;<br>    }<br>    if (i < items.length) setTimeout(chunk, 0);<br>  }<br>  chunk();<br>}</code>

2. 이벤트 핸들러 최적화

<code>addEventListener('scroll', () => { ... }, { passive: true });</code>

3. 타사 스크립트 제거 또는 지연

<code>document.getElementById('chat-trigger').addEventListener('click', () => {<br>  const script = document.createElement('script');<br>  script.src = 'https://chatwidget.com/script.js';<br>  document.head.appendChild(script);<br>});</code>

나쁜 CLS 수정 – 레이아웃 이동 제거

1. 모든 미디어에 명시적 너비/높이 추가

<code>&lt;img src="image.webp" width="800" height="500"&gt;</code>

2. 글꼴 공간 확보

<code>@font-face {<br>  font-family: 'Inter';<br>  font-display: swap;<br>  /* ... */<br>}</code>

3. 기존 콘텐츠 위에 콘텐츠 삽입 방지

배너나 알림을 표시해야 하는 경우 고정 높이의 플레이스홀더 div를 사용하여 공간을 확보합니다.

Core Web Vitals에서 WordPress와 맞춤형 PHP 비교

맞춤형 PHP 사이트는 플러그인 부풀림, 테마 오버헤드, 강제된 JavaScript가 없기 때문에 지속적으로 더 높은 점수를 얻습니다. 기본 WordPress 설치는 관리 표시줄이 로그인 사용자에게 콘텐츠를 이동시키기 때문에(방문자가 보지 못하더라도) CLS에 실패하는 경우가 많습니다. 맞춤형 PHP를 사용하면 모든 바이트를 제어할 수 있습니다. 중요 CSS를 인라인화하고, 필요한 것을 정확히 프리로드하고, 레이아웃 이동을 완전히 피할 수 있습니다.

실제 클라이언트 사례 연구: 7일 만에 실패에서 성공으로

한 가정 서비스 회사는 Core Web Vitals이 나쁜 WordPress 사이트를 가지고 있었습니다: LCP 4.2초, INP 540ms, CLS 0.29. 프론트엔드를 맞춤형 PHP 정적 사이트로 마이그레이션했습니다(예약을 위한 기존 백엔드 유지).

취한 조치:

• 히어로 이미지를 WebP로 변환하고 프리로드.
• 히어로 섹션과 내비게이션의 중요 CSS를 인라인화.
• 모든 JavaScript를 `defer`로 이동하거나 사용자 상호작용 후 로드.
• 모든 이미지와 iframe에 명시적 치수 설정.

1주일 후 결과(GSC의 필드 데이터):

• LCP: 4.2초 → 1.1초 (통과).
• INP: 540ms → 98ms (통과).
• CLS: 0.29 → 0.02 (통과).
• 유기적 트래픽: +34% (60일 후, 순위 개선으로 인해).

이제 고객은 플러그인에 대한 지속적인 비용을 지불하지 않으며, 가볍고 빠른 코드를 소유합니다.

Core Web Vitals을 수정하기 위한 단계별 실행 계획

1. 현재 상태 측정 – PageSpeed Insights를 실행합니다. 모바일용 LCP, INP, CLS를 기록합니다.
2. 쉬운 문제 수정 – 이미지 압축, 캐싱 활성화, CDN 사용.
3. LCP > 2.5초인 경우: 히어로 이미지 프리로드, 중요 CSS 인라인화, 서버 응답 개선.
4. INP > 200ms인 경우: 긴 JS 작업 분할, 타사 스크립트 지연, 이벤트 핸들러 최적화.
5. CLS > 0.1인 경우: 모든 미디어에 치수 추가, `font-display: swap` 사용, 폴드 위에 동적 콘텐츠 삽입 방지.
6. 재테스트 및 모니터링 – Google Search Console의 Core Web Vitals 보고서를 사용하여 시간 경과에 따른 실제 사용자 데이터를 추적합니다.

WordPress를 사용하는 경우 가벼운 테마(GeneratePress, Kadence)로 전환하고, 불필요한 플러그인을 제거하고, Perfmatters 또는 FlyingPress와 같은 플러그인을 사용하는 것을 고려하세요. 그러나 궁극적인 솔루션은 성능을 위해 구축된 맞춤형 PHP 사이트입니다.

Core Web Vitals을 통과하고 순위를 높일 준비가 되셨나요?

저는 Lighthouse에서 100점을 받고 모든 Core Web Vitals을 즉시 통과하는 맞춤형 PHP 웹사이트를 구축합니다. 한 번의 요금만 지불하면 됩니다 – 구독료도, 숨은 비용도 없습니다. 마이그레이션할 준비가 되지 않은 경우 기존 사이트의 Core Web Vitals도 수정해 드립니다.

사이트에 대해 이야기해 봅시다 – 무료 Core Web Vitals 감사를 제공하겠습니다.

데이터는 실제 클라이언트 프로젝트와 Google이 발표한 사례 연구에서 가져왔습니다. 개별 결과는 사이트 복잡성 및 콘텐츠에 따라 다를 수 있습니다.