핵심 웹 지표 개선하는 법, LCP·CLS·INP 3단계
- 핵심 웹 지표는 LCP·INP·CLS 3가지이며 각각 로딩·반응성·안정성을 측정합니다.
- PageSpeed Insights와 Search Console로 실제 문제 지표부터 진단해야 합니다.
- 구글은 실제 방문자 데이터의 75번째 백분위수로 판정하므로 반영에 2~4주 걸립니다.
- 이미지·스크립트를 고쳐도 광고·위젯을 새로 추가하면 점수가 다시 나빠질 수 있습니다.
핵심 웹 지표란 무엇이고 왜 확인해야 할까
핵심 웹 지표(Core Web Vitals)는 구글이 정한 세 가지 사용자 경험 측정 지표로, LCP(최대 콘텐츠풀 페인트)·INP(다음 페인트까지의 상호작용)·CLS(누적 레이아웃 이동)를 말합니다. 각각 로딩 속도, 반응성, 시각적 안정성을 나타내며, 구글은 2021년부터 이 지표를 검색 순위 신호 중 하나로 반영해 왔습니다. 2024년 3월부터는 기존 반응성 지표였던 FID(첫 입력 지연)를 대체해 INP가 공식 지표로 채택되었으니, 오래된 자료를 참고할 때는 FID 기준이 아닌 INP 기준으로 다시 확인해야 합니다.
핵심 웹 지표 개선하는 3단계 절차
점수를 무작정 올리려 하기보다 진단→원인 파악→수정의 순서를 지키면 시행착오를 줄일 수 있습니다. 아래 3단계를 순서대로 진행하세요.
1단계: 내 사이트의 현재 점수부터 진단하기
개선에 앞서 어떤 지표가, 어떤 페이지에서, 얼마나 나쁜지부터 확인해야 합니다.
- PageSpeed Insights에 점검할 페이지 URL을 입력해 모바일·데스크톱 점수를 각각 확인합니다.
- Google Search Console의 ‘핵심 웹 지표’ 보고서에서 실제 방문자 데이터(필드 데이터) 기준으로 ‘불량 URL’이 몇 개인지 확인합니다.
- 실험실 데이터(랩 데이터)와 필드 데이터 점수가 다르면, 순위에 반영되는 쪽은 실제 사용자 데이터인 필드 데이터라는 점을 기억합니다.
구글은 지난 28일간 실제 방문자 기기에서 수집한 데이터의 75번째 백분위수(percentile) 값을 기준으로 좋음·개선 필요·나쁨을 판정합니다. 개발자 화면에서 점수가 잘 나온다고 안심할 수 없는 이유입니다.
2단계: LCP(최대 콘텐츠풀 페인트) 개선하기
LCP는 화면에서 가장 큰 콘텐츠(대개 대표 이미지나 제목 영역)가 렌더링되는 시점입니다. 기준값 2.5초를 넘긴다면 아래 항목을 점검하세요.
- 커버·썸네일 이미지를 WebP·AVIF 형식으로 압축하고, 화면에 보이지 않는 이미지는
loading="lazy"로 지연 로딩합니다. - 화면 최상단(뷰포트 안)에 보이는 이미지에는 반대로 지연 로딩을 걸지 않고
fetchpriority="high"를 지정해 먼저 불러오게 합니다. - 서버 응답 시간(TTFB)을 줄이기 위해 캐싱과 CDN을 적용하고, 렌더링을 막는 CSS·자바스크립트를 페이지 상단에서 최소화합니다.
- 폰트는
font-display: swap으로 설정해 텍스트가 보이지 않는 시간을 없앱니다.
3단계: INP·CLS 개선으로 체감 속도 잡기
INP는 클릭·탭 등 상호작용 후 화면이 반응하기까지 걸리는 시간이고, CLS는 레이아웃이 갑자기 움직이는 정도입니다.
INP를 낮추려면 무거운 자바스크립트 실행을 잘게 쪼개고, 광고·팝업·서드파티 스크립트를 필요한 시점에만 불러오도록 지연 로딩합니다. 특히 방문자가 많이 클릭하는 메뉴·버튼·아코디언에 붙은 이벤트 리스너부터 점검하는 것이 효율적입니다.
CLS를 낮추려면 이미지·광고·임베드 영역에 가로세로 비율(width·height 속성 또는 aspect-ratio)을 미리 지정해 콘텐츠가 나중에 로드되며 레이아웃을 밀어내지 않도록 해야 합니다. 동적으로 삽입되는 배너나 쿠키 동의창도 기존 콘텐츠 위에 겹치도록 배치하면 CLS에 영향을 주지 않습니다.
지표별 판정 기준값 한눈에 보기
구글이 공개한 기준값은 다음과 같습니다. 세 지표 모두 ‘좋음’ 구간에 들어야 해당 페이지가 종합적으로 양호로 분류됩니다.
| 지표 | 좋음 | 개선 필요 | 나쁨 |
|---|---|---|---|
| LCP | 2.5초 이하 | 2.5~4초 | 4초 초과 |
| INP | 200ms 이하 | 200~500ms | 500ms 초과 |
| CLS | 0.1 이하 | 0.1~0.25 | 0.25 초과 |
수정했는데도 점수가 안 오르는 이유
코드를 고쳤는데도 Search Console 점수가 그대로라면 다음 중 하나에 해당할 가능성이 큽니다.
- 필드 데이터는 최근 28일 누적치라 수정 직후가 아니라 2~4주 뒤에야 반영됩니다. 당장 반영이 안 됐다고 설정을 되돌리지 마세요.
- 테마·플러그인(워드프레스) 또는 스킨(티스토리)을 교체하면서 이전 설정이 캐시에 남아있는 경우가 많습니다. 캐시를 완전히 비우고 재측정합니다.
- 광고 스크립트, 방문자 분석 스크립트, 소셜 공유 위젯 등 제3자 스크립트가 새로 추가되면서 다시 나빠지는 경우도 흔합니다. 애드센스·GA4 태그를 넣은 뒤에는 반드시 재점검이 필요합니다.
- 모바일과 데스크톱 점수가 다른데 모바일만 개선하고 데스크톱을 놓치는 경우도 있습니다. 두 기기 모두 확인하세요.
기술적 지표를 아무리 다듬어도 콘텐츠 자체의 신뢰도가 낮으면 순위 개선 효과는 제한적입니다. 방문자가 실제로 유용하다고 느낄 만한 내용을 갖추는 것이 먼저이고, 기술적 개선은 그 바탕 위에서 효과를 냅니다.
자주 묻는 질문
Q. 핵심 웹 지표가 나쁘면 검색 순위가 바로 떨어지나요?
핵심 웹 지표는 구글이 밝힌 여러 순위 신호 중 하나이며, 콘텐츠 품질이나 관련성 같은 다른 신호보다 비중이 크지 않습니다. 다만 콘텐츠 품질이 비슷한 페이지끼리 비교될 때는 지표가 좋은 페이지가 유리하게 작용할 수 있습니다.
Q. 티스토리·워드프레스 같은 플랫폼에서도 직접 개선할 수 있나요?
티스토리는 스킨(테마) 선택과 이미지 용량 조절 정도로 개선 범위가 제한적이고, 워드프레스는 캐싱 플러그인·이미지 최적화 플러그인·테마 교체 등으로 직접 손볼 수 있는 부분이 더 넓습니다. 다만 두 플랫폼 모두 광고·위젯을 과도하게 붙이면 지표가 다시 나빠집니다.
Q. 모바일과 데스크톱 중 어느 쪽을 우선 개선해야 하나요?
구글은 모바일 우선 색인을 기본으로 하므로, 트래픽 비중과 무관하게 모바일 점수를 먼저 확인하는 것이 안전합니다.
Q. 무료로 확인할 수 있는 도구는 무엇이 있나요?
PageSpeed Insights와 Search Console 모두 구글 계정만 있으면 무료로 사용할 수 있고, 크롬 브라우저의 개발자 도구(Lighthouse 패널)로도 실험실 데이터를 확인할 수 있습니다.
Q. 이미지 최적화만 해도 점수가 크게 달라지나요?
대부분의 페이지에서 LCP 지연의 가장 큰 원인은 대형 이미지이므로, 이미지 압축과 지연 로딩만 제대로 적용해도 LCP가 눈에 띄게 개선되는 경우가 많습니다. 다만 INP·CLS는 이미지 최적화만으로는 해결되지 않으므로 스크립트·레이아웃 점검을 함께 진행해야 합니다.
