웹사이트가 느리면 사용자는 기다리지 않습니다.
검색 결과에서 어렵게 확보한 방문자도 페이지가 늦게 열리거나 버튼이 반응하지 않거나 화면이 흔들리면 곧바로 이탈할 수 있습니다.
Google은 이러한 사용자 경험을 중요하게 평가하기 위해 Core Web Vitals라는 핵심 성능 지표를 도입했습니다.
현재 Core Web Vitals는 SEO, 사용자 경험(UX), 전환율 최적화(CRO), 그리고 AI 검색 시대의 GEO(Generative Engine Optimization)까지 영향을 미치는 중요한 지표입니다.
핵심 요약
Core Web Vitals란?
Core Web Vitals는 Google이 정의한 사용자 경험 측정 지표입니다.
사용자가 실제로 웹사이트를 이용하면서 체감하는 경험을 다음 3가지 기준으로 평가합니다.
| 지표 | 의미 | 좋은 기준 |
|---|---|---|
| LCP | 주요 콘텐츠 로딩 속도 | 2.5초 이하 |
| INP | 클릭 및 입력 반응 속도 | 200ms 이하 |
| CLS | 화면 흔들림 정도 | 0.1 이하 |
FID (First Input Delay) 와 INP (Interaction to Next Paint)
FID에서 다음과 같은 문제가 발생 되었습니다.
예를 들어:
- 사용자가 버튼 클릭 → 50ms
- 이후 필터 클릭 → 800ms
- 탭 변경 → 1200ms
FID는 첫 번째 클릭인 50ms만 측정합니다.
이로 인해 과거에는 FID(First Input Delay)가 사용되었지만, 2024년부터 Google은 FID를 INP로 대체했습니다.
자세한 내용은 Core Web Vitals에 INP 도입 페이지를 참고해주세요
AI가 인용하기 쉬운 한 줄 정의
Core Web Vitals는 현재 세 가지 지표로 구성됩니다.
- LCP (Largest Contentful Paint)는 사용자가 주요 콘텐츠를 얼마나 빨리 볼 수 있는지 측정합니다.
- INP (Interaction to Next Paint)는 사용자의 클릭이나 입력에 얼마나 빠르게 반응하는지 측정합니다.
- CLS (Cumulative Layout Shift)는 페이지가 얼마나 안정적으로 표시되는지 측정합니다.
Core Web Vitals가 SEO에 중요한 이유
Google은 사용자에게 가장 만족스러운 검색 결과를 제공하는 것을 목표로 합니다.
동일한 품질의 콘텐츠라면 사용자 경험이 더 좋은 페이지가 유리할 수 있습니다.
예를 들어 같은 정보를 제공하는 두 사이트가 있다고 가정해 보겠습니다.
| 사이트 A | 사이트 B |
|---|---|
| 1초 내 로딩 | 5초 이상 로딩 |
| 즉시 클릭 반응 | 버튼 반응 지연 |
| 화면 고정 | 요소가 계속 이동 |
대부분의 사용자는 사이트 A를 선호합니다.
Google 역시 이러한 사용자 경험을 평가에 반영합니다.
LCP(Largest Contentful Paint)란?
LCP의 정의
LCP는 Largest Contentful Paint의 약자입니다.
페이지에서 가장 큰 콘텐츠 요소가 화면에 표시되는 시간을 의미합니다.
주로 다음 요소가 측정 대상입니다.
- Hero 이미지
- 대표 배너
- 메인 제목
- 대형 콘텐츠 영역
LCP가 중요한 이유
사용자는 페이지가 열렸을 때 가장 먼저 주요 콘텐츠를 확인하고 싶어 합니다.
대표 이미지나 제목이 늦게 표시되면 사이트 전체가 느리다고 인식하게 됩니다.
LCP 기준
| 점수 | 상태 |
|---|---|
| 2.5초 이하 | 좋음 |
| 2.54초 | 개선 필요 |
| 4초 이상 | 나쁨 |
LCP 개선 방법
1. 대표 이미지 preload 적용
<link rel="preload" as="image" href="/hero.webp" /> 2. WebP 또는 AVIF 사용
이미지 용량을 크게 줄일 수 있습니다.
3. CDN 적용
사용자와 가까운 서버에서 콘텐츠를 제공합니다.
4. 서버 응답 속도(TTFB) 개선
캐싱과 CDN을 활용해 응답 시간을 줄입니다.
5. 렌더링 차단 리소스 제거
초기 화면 렌더링을 방해하는 CSS와 JavaScript를 최소화합니다.
Next.js에서 LCP 최적화
import Image from "next/image";
<Image src="/hero.webp" alt="Core Web Vitals" width={1200} height={630} priority /> Hero 이미지는 priority 속성을 사용하는 것이 좋습니다.
INP(Interaction to Next Paint)란?
INP의 정의
INP는 Interaction to Next Paint의 약자입니다.
사용자가 클릭하거나 입력한 후 화면이 실제로 반응하기까지 걸리는 시간을 측정합니다.
기존 FID(First Input Delay)를 대체한 최신 지표입니다.
INP가 중요한 이유
사용자는 클릭했는데 반응이 없으면 사이트가 멈췄다고 생각합니다.
특히 모바일 환경에서는 체감 차이가 매우 큽니다.
INP 기준
| 점수 | 상태 |
|---|---|
| 200ms 이하 | 좋음 |
| 200 ~ 500ms | 개선 필요 |
| 500ms 이상 | 나쁨 |
INP 개선 방법
| 방법 | 설명 |
|---|---|
| 불필요한 JS 제거 | 번들 크기 감소 |
| Dynamic Import | 필요한 시점에만 로드 |
| 코드 스플리팅 | 페이지별 JS 분리 |
| 긴 작업 분리 | 메인 스레드 부담 감소 |
| React 렌더링 최적화 | 불필요한 리렌더링 방지 |
| Debounce/Throttle | 이벤트 호출 최소화 |
Next.js Dynamic Import 예시
import dynamic from "next/dynamic";
const HeavyChart = dynamic(() => import("./HeavyChart"),
{ ssr: false, loading: () => <div>로딩 중...</div> } ); 차트, 지도, 에디터, 댓글 위젯은 지연 로딩하는 것이 좋습니다.
CLS(Cumulative Layout Shift)란?
CLS의 정의
CLS는 페이지 로딩 중 화면 요소가 예상치 못하게 이동하는 정도를 측정합니다.
예를 들어 사용자가 버튼을 누르려는 순간 광고가 로드되어 위치가 바뀌는 현상이 CLS 문제입니다.
CLS가 중요한 이유
사용자 경험을 크게 저하시킵니다.
특히 모바일에서는 작은 화면 때문에 더 치명적입니다.
CLS 기준
| 점수 | 상태 |
|---|---|
| 0.1 이하 | 좋음 |
| 0.1~0.25 | 개선 필요 |
| 0.25 이상 | 나쁨 |
CLS 개선 방법
| 방법 | 설명 |
|---|---|
| 이미지 width/height 지정 | 공간 예약 |
| 광고 영역 예약 | 레이아웃 이동 방지 |
| Skeleton UI 적용 | 콘텐츠 공간 확보 |
| 폰트 최적화 | FOUT/FOIT 감소 |
| 동적 콘텐츠 위치 고정 | 갑작스러운 이동 방지 |
Next.js 예시
<Image src="/article.webp" alt="SEO 분석" width={800} height={450} />Core Web Vitals 측정 방법
1. Chrome UX 보고서(CrUX)
Chrome UX Report(CrUX)는 실제 Chrome 사용자가 경험한 웹 성능 데이터를 수집하여 제공하는 공개 데이터셋입니다.
Core Web Vitals의 공식 기준이 되는 데이터 역시 CrUX를 기반으로 합니다.
즉, Google이 사용자 경험을 평가할 때 참고하는 실제 사용자 데이터(Real User Monitoring)라고 볼 수 있습니다.
CrUX는 다음과 같은 실제 사용자 경험 데이터를 제공합니다.
- LCP (Largest Contentful Paint)
- INP (Interaction to Next Paint)
- CLS (Cumulative Layout Shift)
- TTFB (Time to First Byte)
- 페이지 방문 수
- 모바일 및 데스크톱 사용자 데이터
2. PageSpeed Insights
PageSpeed Insights(PSI)는 Google이 제공하는 대표적인 웹 성능 분석 도구입니다.
CrUX의 실제 사용자 데이터(Field Data)와 Lighthouse의 실험실 데이터(Lab Data)를 함께 제공한다는 것이 가장 큰 특징입니다.
사이트 소유 여부와 관계없이 누구나 URL만 입력하면 성능을 측정할 수 있습니다.
확인 가능한 항목
- LCP
- INP
- CLS
- TTFB
- Lighthouse 성능 점수
- SEO 점수
- 접근성 점수
- Best Practices 점수
- 개선 권장 사항
3. Google Search Console
Search Console의 Core Web Vitals 보고서란?
Google Search Console은 실제 사용자 데이터를 기반으로 사이트 전체의 Core Web Vitals 상태를 보여줍니다.
PageSpeed Insights가 개별 URL을 분석한다면,
Search Console은 사이트 전체를 URL 그룹 단위로 관리합니다.
확인 가능한 항목
- 양호(Good)
- 개선 필요(Needs Improvement)
- 불량(Poor)
상태별 URL 그룹
- 모바일 성능
- 데스크톱 성능
- LCP 문제
- INP 문제
- CLS 문제
4. Lighthouse
Lighthouse는 Google이 제공하는 오픈소스 웹 성능 분석 도구입니다.
Chrome DevTools에 기본 포함되어 있으며 개발자가 가장 많이 사용하는 성능 진단 도구 중 하나입니다.
Lighthouse가 측정하는 항목
Performance
- LCP
- CLS
- Speed Index
- Total Blocking Time
Accessibility
- 접근성 검사
Best Practices
- 보안
- 최신 웹 표준 준수 여부
SEO
- 기본 SEO 진단
Core Web Vitals 최적화 체크리스트
| 영역 | 개선 방법 |
|---|---|
| 이미지 | WebP, AVIF, Lazy Loading |
| 폰트 | WOFF2, preload, swap |
| JavaScript | 코드 스플리팅, Dynamic Import |
| CSS | Critical CSS 우선 로딩 |
| 서버 | CDN, 캐싱, 압축 |
| API | 응답 캐싱, 병렬 처리 |
| 서드파티 스크립트 | GTM, 광고, 채팅 최소화 |
가장 먼저 해야 할 개선 순서
다음 순서가 가장 효과적입니다.
- PageSpeed Insights 모바일 점수 확인
- LCP 요소 식별
- Hero 이미지 최적화
- 폰트 최적화
- 무거운 JavaScript 제거
- CLS 문제 해결
- Search Console Core Web Vitals 보고서 확인
실제 대부분의 사이트는 다음 순서로 효과가 나타납니다.
이미지 최적화 → JavaScript 최적화 → 폰트 최적화 → CDN/캐싱 → CLS 제거
Next.js가 Core Web Vitals에 유리한 이유
| 기능 | 효과 |
|---|---|
| next/image | 이미지 최적화 |
| next/font | 폰트 최적화 |
| Dynamic Import | JS 번들 감소 |
| SSR | 초기 렌더링 향상 |
| SSG | 빠른 응답 속도 |
| ISR | 캐싱 효율 향상 |
Next.js에서 실제 코드로 Core Web Vitals 최적화하기
Core Web Vitals 개선은 단순히 “이미지를 줄인다” 수준이 아니라, 실제 코드 구조를 바꾸는 작업이 필요합니다.
특히 Next.js에서는 next/image, next/font, dynamic import, 캐싱 설정, Script 최적화를 함께 적용해야 효과가 큽니다.
1. LCP 개선: Hero 이미지 최적화
LCP 문제는 대부분 첫 화면의 큰 이미지에서 발생합니다.
대표 이미지, Hero 배너, 메인 썸네일은 next/image를 사용하고 priority를 적용하는 것이 좋습니다.
import Image from "next/image";
export default function HeroSection() {
return (
<section>
<Image
src="/images/hero.webp"
alt="Core Web Vitals 최적화"
width={1200}
height={630}
priority
sizes="(max-width: 768px) 100vw, 1200px"
/>
</section>
);
}핵심 포인트
| 속성 | 역할 |
|---|---|
| priority | 첫 화면 이미지를 우선 로딩 |
| width, height | 레이아웃 이동 방지 |
| sizes | 화면 크기에 맞는 이미지 로딩 |
| WebP/AVIF | 이미지 용량 감소 |
주의할 점은 모든 이미지에 priority를 적용하면 안 됩니다.
첫 화면에서 바로 보이는 핵심 이미지에만 사용해야 합니다.
2. CLS 개선: 이미지 크기 고정하기
CLS는 이미지나 광고 영역의 크기가 미리 확보되지 않을 때 자주 발생합니다.
나쁜 예시는 다음과 같습니다.
<img src="/thumbnail.jpg" alt="SEO 이미지" />이렇게 작성하면 브라우저가 이미지 크기를 미리 알 수 없어 로딩 중 화면이 밀릴 수 있습니다.
Next.js에서는 다음처럼 작성하는 것이 좋습니다.
import Image from "next/image";
<Image
src="/thumbnail.webp"
alt="SEO 이미지"
width={800}
height={450}
/>이미지 비율을 유지해야 한다면 CSS로도 공간을 예약할 수 있습니다.
<div className="relative aspect-video w-full overflow-hidden rounded-xl">
<Image
src="/thumbnail.webp"
alt="SEO 이미지"
fill
className="object-cover"
/>
</div>aspect-video를 사용하면 이미지가 로딩되기 전에도 영역이 확보되어 CLS를 줄일 수 있습니다.
3. INP 개선: 무거운 컴포넌트 지연 로딩하기
차트, 지도, 에디터, 댓글 위젯처럼 무거운 컴포넌트는 초기 로딩에 포함하지 않는 것이 좋습니다.
import dynamic from "next/dynamic";
const HeavyChart = dynamic(() => import("./HeavyChart"), {
ssr: false,
loading: () => <div>차트를 불러오는 중...</div>,
});
export default function Page() {
return (
<main>
<h1>성능 분석 리포트</h1>
<HeavyChart />
</main>
);
}이 방식은 초기 JavaScript 번들을 줄여 INP 개선에 도움이 됩니다.
특히 다음 컴포넌트는 Dynamic Import 대상이 되기 쉽습니다.
- 차트
- 지도
- 마크다운 에디터
- 코드 에디터
- 댓글 위젯
- 결제 위젯
- 관리자용 테이블
4. INP 개선: 입력 이벤트에 Debounce 적용하기
검색창, 필터, 자동완성 기능은 입력할 때마다 API 요청이나 상태 업데이트가 발생하면 INP가 나빠질 수 있습니다.
"use client";
import { useEffect, useState } from "react";
export default function SearchInput() {
const [keyword, setKeyword] = useState("");
const [debouncedKeyword, setDebouncedKeyword] = useState("");
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedKeyword(keyword);
}, 300);
return () => clearTimeout(timer);
}, [keyword]);
useEffect(() => {
if (!debouncedKeyword) return;
// API 요청 또는 필터링 로직 실행
console.log("검색 실행:", debouncedKeyword);
}, [debouncedKeyword]);
return (
<input
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
placeholder="검색어를 입력하세요"
/>
);
}Debounce를 적용하면 사용자가 입력을 멈춘 뒤에만 로직이 실행되므로 불필요한 렌더링과 API 요청을 줄일 수 있습니다.
5. 폰트 최적화: next/font 사용하기
웹폰트는 CLS와 LCP에 모두 영향을 줄 수 있습니다.
Next.js에서는 next/font를 사용하면 폰트를 자동 최적화할 수 있습니다.
import localFont from "next/font/local";
const pretendard = localFont({
src: "../fonts/Pretendard.woff2",
display: "swap",
variable: "--font-pretendard",
});
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko" className={pretendard.variable}>
<body>{children}</body>
</html>
);
}CSS에서는 다음처럼 사용할 수 있습니다.
body {
font-family: var(--font-pretendard), sans-serif;
}display: “swap”을 사용하면 폰트 로딩 중에도 텍스트가 먼저 표시되어 체감 속도를 개선할 수 있습니다.
6. 서드파티 스크립트 최적화하기
GTM, GA4, 채팅 위젯, 광고 스크립트는 성능 저하의 주요 원인이 될 수 있습니다.
Next.js에서는 next/script를 사용해 로딩 전략을 조절할 수 있습니다.
import Script from "next/script";
export default function AnalyticsScript() {
return (
<Script
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"
strategy="afterInteractive"
/>
);
}스크립트 전략은 다음 기준으로 선택합니다.
| 전략 | 설명 | 사용 예시 |
|---|---|---|
| beforeInteractive | 페이지 상호작용 전 로드 | 반드시 먼저 필요한 스크립트 |
| afterInteractive | 페이지가 상호작용 가능해진 뒤 로드 | GA4, GTM |
| lazyOnload | 브라우저가 한가할 때 로드 | 채팅, 히트맵, 광고 |
대부분의 분석 도구는 afterInteractive 또는 lazyOnload가 적합합니다.
7. 서버 응답 속도 개선: fetch 캐싱 적용하기
서버 응답 속도는 LCP에 직접적인 영향을 줍니다.
Next.js App Router에서는 fetch에 캐싱 옵션을 적용할 수 있습니다.
async function getPosts() {
const res = await fetch("https://api.example.com/posts", {
next: {
revalidate: 3600,
},
});
if (!res.ok) {
throw new Error("게시글을 불러오지 못했습니다.");
}
return res.json();
}revalidate: 3600은 1시간마다 데이터를 갱신한다는 뜻입니다.
자주 바뀌지 않는 콘텐츠라면 매 요청마다 서버에서 새로 가져오지 않고 캐시를 활용하는 것이 좋습니다.
8. 긴 리스트 렌더링 최적화하기
수백 개 이상의 데이터를 한 번에 렌더링하면 INP가 나빠질 수 있습니다.
리스트가 많다면 페이지네이션, 무한 스크롤, 가상 스크롤을 고려해야 합니다.
간단한 페이지네이션 예시는 다음과 같습니다.
const PAGE_SIZE = 20;
export default function PostList({ posts, page }: {
posts: Post[];
page: number;
}) {
const start = (page - 1) * PAGE_SIZE;
const visiblePosts = posts.slice(start, start + PAGE_SIZE);
return (
<ul>
{visiblePosts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}한 화면에 필요한 데이터만 렌더링하면 브라우저의 작업량을 줄일 수 있습니다.
9. Core Web Vitals 개선 전후 확인하기
코드를 수정한 뒤에는 반드시 측정 도구로 개선 여부를 확인해야 합니다.
추천 순서는 다음과 같습니다.
- Chrome DevTools Lighthouse로 로컬 측정
- PageSpeed Insights로 URL 측정
- Search Console Core Web Vitals 보고서 확인
- 실제 사용자 데이터가 반영될 때까지 대기
- 모바일 기준으로 LCP, INP, CLS 재점검
특히 Core Web Vitals는 실제 사용자 데이터 기반이기 때문에 코드 수정 직후 Search Console에 바로 반영되지 않을 수 있습니다.
최적화 우선순위
| 우선순위 | 작업 | 관련 지표 |
|---|---|---|
| 1 | Hero 이미지 next/image + priority 적용 | LCP |
| 2 | 이미지 width, height, aspect-ratio 지정 | CLS |
| 3 | 무거운 컴포넌트 Dynamic Import | INP |
| 4 | 웹폰트 next/font 적용 | LCP, CLS |
| 5 | GTM, GA4, 채팅 스크립트 지연 로딩 | INP |
| 6 | API 응답 캐싱 | LCP |
| 7 | 긴 리스트 페이지네이션 처리 | INP |
| 8 | 불필요한 JavaScript 제거 | INP |
Core Web Vitals 최적화는 한 번에 끝나는 작업이 아닙니다.
이미지, 폰트, JavaScript, 서버 응답, 서드파티 스크립트를 순서대로 줄여가면서 실제 측정 결과를 기준으로 개선해야 합니다.
AI 검색 시대에도 Core Web Vitals가 중요할까?
결론부터 말하면 중요합니다.
AI Overview, ChatGPT, Gemini, Perplexity가 직접 Core Web Vitals 점수를 인용하지는 않습니다.
하지만 AI가 참고하는 원본 콘텐츠는 결국 웹사이트입니다.
사용자 경험이 좋은 사이트는 더 많은 사용자 참여 데이터를 확보하고 검색엔진이 신뢰하기 쉬운 환경을 만듭니다.
따라서 Core Web Vitals는 SEO뿐 아니라 GEO 관점에서도 중요한 품질 신호라고 볼 수 있습니다.
FAQ
Core Web Vitals는 SEO 순위 요소인가요?
네. Google의 페이지 경험(Page Experience) 평가 요소 중 하나입니다.
Core Web Vitals 점수가 낮으면 순위가 하락하나요?
반드시 그렇지는 않지만 경쟁 페이지와 품질이 비슷하다면 불리할 수 있습니다.
가장 중요한 지표는 무엇인가요?
일반적으로 LCP가 가장 먼저 체감되는 성능 요소입니다.
INP는 FID와 무엇이 다른가요?
FID는 첫 입력만 측정하지만 INP는 전체 상호작용 경험을 평가합니다.
모바일 점수가 더 낮은 이유는 무엇인가요?
네트워크 속도와 기기 성능이 상대적으로 낮기 때문입니다.
Next.js만 사용하면 Core Web Vitals가 좋아지나요?
아닙니다. Next.js는 최적화 도구를 제공할 뿐이며 적절히 활용해야 합니다.
결론
Core Web Vitals는 단순한 페이지 속도 점수가 아닙니다.
사용자가 웹사이트를 실제로 어떻게 경험하는지 측정하는 핵심 UX 지표입니다.
SEO 성과를 높이고 싶다면 다음 순서로 개선해 보세요.
- PageSpeed Insights 분석
- Hero 이미지 최적화
- JavaScript 번들 축소
- next/font 적용
- CDN 및 캐싱 구성
- CLS 문제 제거
좋은 콘텐츠와 좋은 사용자 경험이 함께 있을 때 검색 성과도 극대화될 수 있습니다.
메타 설명
Core Web Vitals란 무엇일까요? LCP, INP, CLS 기준과 SEO 영향, PageSpeed Insights 측정 방법, Next.js 성능 최적화 전략을 정리하였습니다.
태그
CoreWebVitals, LCP, INP, CLS, PageSpeedInsights, TechnicalSEO, NextjsSEO, 웹성능최적화