PageSpeed Insights에서 내 사이트를 검사해본 적 있으신가요. 점수가 40점대라면 구글이 이 사이트를 불량 사용자 경험을 제공하는 사이트로 분류하고 있는 겁니다.
Core Web Vitals는 2021년부터 구글의 공식 랭킹 요소입니다. 점수가 나쁘면 순위에 불이익이 있습니다. 좋으면 직접적인 순위 상승 효과도 있고, 사용자 이탈률도 줄어듭니다.
Core Web Vitals란
세 가지 지표로 구성됩니다.
LCP (Largest Contentful Paint)
페이지에서 가장 큰 콘텐츠(보통 히어로 이미지나 제목)가 화면에 렌더링되는 시간
✓ 양호: 2.5초 이내 / ⚠ 개선 필요: 2.5~4.0초 / ✗ 불량: 4.0초 초과
CLS (Cumulative Layout Shift)
페이지 로딩 중 레이아웃이 갑자기 이동하는 정도 (0에 가까울수록 좋음)
✓ 양호: 0.1 이하 / ⚠ 개선 필요: 0.1~0.25 / ✗ 불량: 0.25 초과
INP (Interaction to Next Paint)
클릭·탭·키 입력 후 화면이 반응하는 속도
✓ 양호: 200ms 이하 / ⚠ 개선 필요: 200~500ms / ✗ 불량: 500ms 초과
현재 점수 확인 방법
방법 1: PageSpeed Insights (빠른 확인)
pagespeed.web.dev에서 URL을 입력하면 약 30초 안에 결과가 나옵니다. 모바일 탭을 먼저 확인하세요. 구글은 모바일 버전을 기준으로 색인합니다.
결과 화면에서 "실제 사용자 경험" 섹션이 있다면 그게 실제 SEO에 영향을 미치는 점수입니다. "진단" 섹션은 개선 방향을 알려줍니다.
방법 2: Search Console Core Web Vitals 보고서
Search Console → '경험' → 'Core Web Vitals'에서 전체 사이트를 페이지 단위로 확인할 수 있습니다. '불량' URL 목록을 내려받아 우선순위별로 개선하세요.
LCP 개선 방법
LCP 문제의 대부분은 히어로 이미지가 느리게 로딩되는 것입니다.
1. 이미지 WebP 변환
JPEG/PNG 대비 WebP는 파일 크기가 25~35% 작습니다. Squoosh(squoosh.app)에서 무료로 변환할 수 있습니다. 기존 이미지를 WebP로 바꾸는 것만으로도 LCP가 크게 개선됩니다.
2. 히어로 이미지 우선 로딩
첫 화면에 보이는 히어로 이미지에 fetchpriority="high"를 추가하세요. 브라우저가 이 이미지를 최우선으로 다운로드합니다.
<img src="hero.webp" fetchpriority="high" alt="..." />
3. lazy loading은 히어로에 쓰지 않기
loading="lazy"는 스크롤 아래쪽 이미지에만 사용하세요. 히어로 이미지에 lazy loading을 적용하면 LCP가 악화됩니다.
4. 이미지 크기 명시
모든 <img> 태그에 width와 height 속성을 명시하세요. 브라우저가 이미지 로딩 전에 공간을 미리 확보해 레이아웃 이동을 방지합니다.
CLS 개선 방법
레이아웃이 갑자기 이동하는 원인을 제거합니다.
1. 이미지·동영상에 크기 명시
크기가 명시되지 않은 이미지는 로딩 후 공간을 확보하면서 아래 콘텐츠를 밀어냅니다. 모든 미디어 요소에 width/height를 추가하거나, CSS에서 aspect-ratio를 설정하세요.
2. 웹폰트 FOUT 방지
웹폰트 로딩 후 텍스트가 재배치될 때 CLS가 발생합니다. font-display: optional 또는 swap을 사용하고, <link rel="preload">로 폰트를 미리 로딩하세요.
3. 동적으로 삽입되는 요소 주의
쿠키 배너, 광고, 추천 위젯처럼 JS로 동적 삽입되는 요소가 기존 콘텐츠를 밀어내면 CLS가 올라갑니다. 이런 요소는 처음부터 공간을 확보해두거나 화면 하단에 고정하세요.
INP 개선 방법
INP는 가장 최근에 추가된 지표로, JavaScript 실행 효율과 관련됩니다.
- 무거운 JS 분할: 큰 JS 번들을 Code Splitting으로 필요할 때만 로딩
- 서드파티 스크립트 최소화: Google Tag Manager에 너무 많은 태그를 쌓으면 INP가 악화됩니다
- 이벤트 핸들러 최적화: 클릭·입력 이벤트 핸들러 안에서 무거운 DOM 조작을 피하세요
유용한 도구 모음
- PageSpeed Insights: pagespeed.web.dev — 즉각적인 점수 확인 + 개선 제안
- Squoosh: squoosh.app — 이미지 WebP 변환 (무료)
- web.dev/measure: 상세한 성능 진단 리포트
- Chrome DevTools → Lighthouse: 로컬 개발 단계에서 측정
- Search Console Core Web Vitals: 실사용자 기반 전체 사이트 현황
개선 우선순위
모바일 40점 이하: 즉시 개선 필요. 이미지 최적화와 렌더링 차단 리소스 제거부터
모바일 40~70점: Core Web Vitals 항목별 점검. LCP → CLS → INP 순서로
모바일 70점 이상: 양호. 유지하면서 콘텐츠 품질에 집중
자주 묻는 질문
Core Web Vitals는 구글이 사용자 경험을 측정하기 위해 정의한 세 가지 웹 성능 지표입니다. LCP(최대 콘텐츠 렌더링 시간), CLS(누적 레이아웃 이동), INP(상호작용 응답성)로 구성됩니다. 2021년부터 구글 공식 랭킹 요소에 포함되었습니다.
PageSpeed Insights(pagespeed.web.dev)에서 URL을 입력하면 즉시 확인할 수 있습니다. 구글 Search Console에 사이트가 등록되어 있다면 '경험' 메뉴의 'Core Web Vitals' 보고서에서 전체 사이트의 점수를 페이지별로 확인할 수 있습니다.
LCP 개선의 80%는 이미지 최적화로 해결됩니다. ① 히어로 이미지를 WebP 형식으로 변환 ② 이미지에 width/height 속성 명시 ③ 히어로 이미지에 fetchpriority="high" 추가 ④ 이미지 파일 크기 500KB 이하로 압축 ⑤ CDN 사용. 이 다섯 가지만 해도 LCP가 크게 개선됩니다.
CLS는 페이지 로딩 중 레이아웃이 갑자기 움직이는 정도를 측정합니다. CLS가 높으면 사용자가 버튼을 누르려는 순간 레이아웃이 바뀌어 다른 버튼이 눌리는 등 UX 문제가 발생합니다. 이미지나 광고에 크기를 명시하지 않거나, 웹폰트 로딩 후 텍스트가 재배치되는 경우에 주로 발생합니다.
Core Web Vitals는 랭킹 요소 중 하나이지만, 콘텐츠 품질, 백링크 대비 가중치는 낮습니다. 그러나 '불량' 상태에서 '양호' 상태로 개선하면 페널티가 해소되어 순위 개선 효과를 볼 수 있습니다. 특히 경쟁 사이트들의 콘텐츠 품질이 비슷할 때 Core Web Vitals 점수가 순위를 가르는 요인이 됩니다.
Core Web Vitals 90점 이상으로
사이트를 처음부터 만들고 싶다면
유어팀은 모든 프로젝트에 이미지 최적화, lazy loading, 렌더링 최적화를 기본으로 적용합니다. PageSpeed Insights 모바일 기준 85점 이상을 목표로 설계합니다.
무료 상담 신청 →