검색에서 잘 나오던 우리 사이트의 트래픽이 어느 날 갑자기 절반으로 줄었다. 콘텐츠도 그대로고, 백링크도 그대로다. 그렇다면 이제 의심해 봐야 할 것은 Core Web Vitals다. 구글은 페이지 경험을 검색 순위 신호로 쓰고 있고, 2024년 3월 지표 중 하나가 FID에서 INP로 교체되면서 채점 기준은 한층 까다로워졌다. 지금 우리 사이트는 몇 점일까.
Core Web Vitals란 무엇인가
구글이 정의한 '실제 사용자 경험'을 측정하는 세 가지 지표를 말한다. 화면이 빠르게 그려지는가, 클릭에 즉시 반응하는가, 보고 있는 콘텐츠가 갑자기 흔들리지 않는가. 이 셋을 합쳐 페이지 품질을 판단한다. PageSpeed Insights는 모바일과 데스크톱 점수를 따로 보여주는데, 모바일 점수가 SEO에 더 큰 영향을 준다는 점부터 기억해야 한다.
세 가지 핵심 지표
LCP — 가장 큰 콘텐츠가 그려지는 시간
Largest Contentful Paint. 페이지 첫 화면에서 가장 큰 요소, 보통 히어로 이미지나 헤드라인이 그려질 때까지 걸리는 시간이다. 2.5초 이내가 좋음, 4초 초과는 나쁨으로 분류된다. 무거운 원본 이미지, 느린 서버 응답, 렌더링을 막는 자바스크립트가 주범이다.
INP — 인터랙션이 응답하는 시간
Interaction to Next Paint. 사용자가 클릭·탭·키 입력을 했을 때 화면이 반응하기까지 걸리는 시간이다. 기존 FID는 첫 인터랙션만 봤지만, INP는 페이지 전체에서 발생한 모든 인터랙션을 종합 평가한다. 200ms 이내가 좋음, 500ms 초과는 나쁨이다. 메뉴를 눌렀을 때 굼뜬 사이트는 거의 이 점수가 망가져 있다.
CLS — 화면이 얼마나 흔들리는가
Cumulative Layout Shift. 페이지가 로딩되는 동안 콘텐츠가 위아래로 튀는 정도를 누적해 측정한다. 0.1 이하가 좋음, 0.25 초과는 나쁨이다. 광고가 늦게 들어오면서 본문을 밀거나, 이미지에 폭·높이를 명시하지 않아 레이아웃이 재계산될 때 점수가 무너진다.
점수를 빠르게 끌어올리는 다섯 가지 처방
- 이미지에 폭·높이 속성을 반드시 명시한다. CLS 점수가 한 번에 살아난다.
- 히어로 이미지에 fetchpriority="high" 를 붙인다. LCP 요소가 우선 로딩되어 첫 화면이 빨라진다.
- 무거운 자바스크립트는 코드 분할 또는 지연 로딩으로 쪼갠다. INP의 가장 큰 적이다.
- 서드파티 스크립트(채팅·픽셀·통계)를 주기적으로 정리한다. 광고와 추적 코드는 INP를 가장 많이 잡아먹는다.
- 웹폰트는 font-display: swap 으로 표시 지연을 줄이고, 안 쓰는 굵기는 잘라낸다.
측정은 한 번이 아니라 모니터링이다
점수는 사용자 환경에 따라 매일 바뀐다. 구글 서치콘솔의 '페이지 경험' 보고서를 즐겨찾기에 두자. 28일 평균 실사용 데이터(CrUX)를 보여주는 유일한 공식 창구다. PageSpeed Insights는 단발성 진단에, Lighthouse는 배포 직전 회귀 검증에 쓰면 충분하다.
점수는 기술 지표가 아니라 매출 지표다
구글이 공개한 자료에 따르면 LCP가 1초 빨라지면 전환율이 평균 8% 오르고, CLS가 흔들리는 결제 화면에서는 이탈이 급증한다. 속도는 디자인이고, 안정성은 신뢰다. Core Web Vitals 점수가 떨어졌다는 것은 사용자가 우리 사이트에서 짜증을 느끼고 있다는 신호이고, 그 신호는 검색 순위에 그대로 반영된다.
CYAN은 새 사이트를 오픈할 때마다 LCP·INP·CLS 모두를 '좋음' 구간에 두고 인계하는 것을 기본으로 한다. 이미 운영 중인 사이트의 점수가 신경 쓰인다면, 세 지표 중 어디부터 손댈지 진단하는 데서 출발하면 된다.