1. 구글이 만든 사용자 경험 성적표
2021년 구글은 **Core Web Vitals(핵심 웹 지표)**를 공식 검색 랭킹 신호로 도입했습니다. 이 지표는 사용자가 웹 페이지를 실제로 사용할 때 느끼는 경험을 수치로 측정합니다.
Core Web Vitals는 세 가지 지표로 구성됩니다. 페이지가 얼마나 빨리 로딩되는지(LCP), 사용자 입력에 얼마나 빠르게 반응하는지(FID/INP), 화면이 얼마나 안정적으로 표시되는지(CLS)입니다.
이 세 가지 점수가 좋으면 검색 랭킹에서 유리하고, 나쁘면 불이익을 받을 수 있습니다.
2. LCP – 가장 큰 콘텐츠가 얼마나 빨리 보이는가?
**LCP(Largest Contentful Paint)**는 페이지에서 가장 큰 콘텐츠 요소가 화면에 렌더링되는 시간입니다.
가장 큰 콘텐츠 요소는 보통 히어로 이미지(상단 메인 이미지), 큰 텍스트 블록, 동영상 포스터 이미지 중 하나입니다. 이 요소가 빨리 보일수록 사용자는 페이지가 빠르다고 느낍니다.
LCP가 중요한 이유는 사용자가 페이지에 들어왔을 때 “아, 내용이 로딩됐구나”라고 체감하는 순간을 측정하기 때문입니다. 빈 화면이 오래 지속되면 사용자는 기다리다 지쳐 떠납니다.
LCP에 영향을 미치는 주요 요인은 느린 서버 응답 시간, 렌더링 차단 CSS와 JS, 최적화되지 않은 이미지, 느린 클라이언트 사이드 렌더링입니다.
3. FID / INP – 사용자 입력에 얼마나 빠르게 반응하는가?
**FID(First Input Delay)**는 사용자가 처음으로 페이지와 상호작용(버튼 클릭, 링크 탭 등)했을 때부터 브라우저가 그 입력에 실제로 반응하기까지의 시간입니다.
구글은 2024년부터 FID를 **INP(Interaction to Next Paint)**로 교체했습니다. FID는 첫 번째 상호작용만 측정했지만, INP는 페이지를 사용하는 동안 발생하는 모든 상호작용의 응답 시간을 측정합니다. 더 포괄적인 지표입니다.
INP가 나쁜 주요 원인은 JavaScript가 메인 스레드를 오래 점유하는 것입니다. 무거운 JS 코드가 실행 중일 때 사용자 입력을 처리하지 못해 반응이 느려집니다.
4. CLS – 레이아웃이 얼마나 안정적으로 유지되는가?
**CLS(Cumulative Layout Shift)**는 페이지 로딩 중 예상치 못하게 레이아웃이 이동하는 정도를 측정합니다.
이런 경험을 해본 적 있으신가요? 글을 읽고 있는데 갑자기 광고가 로딩되면서 텍스트가 아래로 밀려납니다. 버튼을 클릭하려는데 이미지가 갑자기 로딩되면서 버튼 위치가 바뀌어 엉뚱한 것을 클릭합니다.
이런 현상이 CLS 점수를 악화시킵니다. CLS가 높을수록 사용자가 불안정한 화면에서 불편함을 느낍니다.
CLS를 악화시키는 주요 원인은 크기가 지정되지 않은 이미지와 동영상, 늦게 로딩되는 광고 배너, 동적으로 삽입되는 콘텐츠, 웹 폰트 로딩 중 발생하는 글꼴 교체입니다.
5. Core Web Vitals 점수 기준표
각 지표의 좋음/개선 필요/나쁨 기준입니다.
| 지표 | 좋음 | 개선 필요 | 나쁨 |
|---|---|---|---|
| LCP | 2.5초 이하 | 2.5~4초 | 4초 초과 |
| INP | 200ms 이하 | 200~500ms | 500ms 초과 |
| CLS | 0.1 이하 | 0.1~0.25 | 0.25 초과 |
세 지표 모두 좋음 기준을 충족해야 Core Web Vitals 통과로 간주됩니다.
6. 내 사이트의 Core Web Vitals 확인하는 방법
Google Search Console 가장 정확한 방법입니다. 실제 사용자 데이터를 기반으로 URL별 Core Web Vitals 상태를 확인할 수 있습니다. Search Console > Core Web Vitals 메뉴에서 확인합니다.
PageSpeed Insights pagespeed.web.dev에서 URL을 입력하면 실제 사용자 데이터(필드 데이터)와 시뮬레이션 결과(랩 데이터)를 모두 보여줍니다.
Chrome DevTools 개발자 도구의 Lighthouse 탭에서 직접 성능 감사를 실행할 수 있습니다. 각 지표의 문제점과 개선 방법을 구체적으로 안내합니다.
7. 항목별 점수를 올리는 핵심 방법
LCP 개선 가장 큰 이미지를 최우선으로 최적화합니다. 히어로 이미지에 loading="eager"와 fetchpriority="high" 속성을 추가해 우선 로딩을 지시합니다. CDN을 사용해 서버 응답 시간을 줄입니다.
INP 개선 무거운 JavaScript 작업을 분리해 메인 스레드 점유 시간을 줄입니다. 불필요한 JS 라이브러리를 제거하고 코드 스플리팅을 활용합니다.
CLS 개선 모든 이미지와 동영상에 width와 height 속성을 명시합니다. 광고 배너 자리를 미리 확보해 나중에 로딩되어도 레이아웃이 흔들리지 않게 합니다.
8. 정리 및 다음 단계
오늘 배운 핵심을 정리합니다.
- LCP는 가장 큰 콘텐츠가 화면에 표시되는 시간으로 2.5초 이하가 목표입니다.
- INP는 사용자 상호작용에 대한 반응 시간으로 200ms 이하가 목표입니다.
- CLS는 레이아웃 안정성 지표로 0.1 이하가 목표입니다.
- Google Search Console과 PageSpeed Insights로 현재 점수를 확인합니다.
다음 글에서는 이미지 최적화 방법, WebP 변환부터 레이지 로딩까지 알아보겠습니다.