본문 바로가기
무료 상담
SEO

코어 웹 바이탈, 무엇부터 고쳐야 실제로 점수가 오르나 — 항목별 우선순위

페이지 속도를 손볼 때 가장 흔한 실수는 측정 도구 점수를 올리는 것실제 사용자 지표를 올리는 것을 같은 일로 보는 것입니다. 검색에 반영되는 것은 실제 사용자 데이터(CrUX) 쪽입니다. 어디부터 손대야 하는지 항목별로 정리했습니다.

손에 든 스마트폰 화면에 표시된 스톱워치

세 지표가 각각 무엇을 재는가

  • LCP — 화면에서 가장 큰 요소가 보이기까지 걸린 시간. 좋음 기준 2.5초 이하.
  • INP — 사용자가 클릭·입력했을 때 화면이 반응하기까지 걸린 시간. 좋음 기준 200ms 이하.
  • CLS — 화면 요소가 갑자기 밀리는 정도. 좋음 기준 0.1 이하.

세 지표는 원인이 서로 다릅니다. LCP는 네트워크와 이미지, INP는 자바스크립트, CLS는 레이아웃 문제입니다. 그래서 "속도 최적화 플러그인"으로 한 번에 해결되지 않습니다.

가장 자주 효과가 큰 순서

실무에서 투입 대비 효과가 큰 순서는 대체로 이렇습니다.

1) LCP 이미지 최적화. 첫 화면의 큰 이미지를 webp로 굽고 실제 표시 크기에 맞춰 줄입니다. 여기에 fetchpriority="high"를 주고 lazy loading을 빼는 것이 핵심입니다. 첫 화면 이미지에 lazy를 걸면 오히려 늦어집니다.

2) 폰트 처리. 웹폰트가 로드될 때까지 텍스트가 안 보이면 LCP가 그만큼 늦습니다. font-display: swap과 필요한 굵기만 서브셋으로 줄이는 것으로 상당히 개선됩니다.

3) 크기가 지정되지 않은 이미지·광고 영역. width/height 속성이나 aspect-ratio가 없으면 이미지가 로드되는 순간 아래 내용이 밀립니다. CLS의 대부분이 여기서 나옵니다.

4) 서드파티 스크립트. 채팅 위젯, 분석 도구, 광고 스크립트가 INP를 크게 끌어올립니다. 필요 없는 것을 빼는 것이 가장 확실하고, 남길 것은 지연 로드합니다.

측정 점수와 실제 지표가 다른 이유

PageSpeed Insights 상단의 필드 데이터는 실제 사용자 데이터이고, 아래 랩 데이터는 시뮬레이션입니다. 검색에 쓰이는 것은 앞쪽입니다. 랩 점수를 90점으로 만들어도 실제 사용자의 기기와 회선이 느리면 필드 데이터는 그대로일 수 있습니다.

또 필드 데이터는 28일 누적이라 수정 효과가 즉시 보이지 않습니다. 고치고 나서 최소 한 달은 지켜봐야 합니다. 며칠 보고 "효과 없다"고 판단하면 잘못된 결론에 이릅니다.

모바일과 데스크톱을 따로 본다

대부분의 사이트는 모바일 지표가 훨씬 나쁩니다. 색인도 모바일 기준이므로, 개선 우선순위는 모바일에 둡니다. 데스크톱만 초록불인 상태로 만족하면 실제로는 아무것도 바뀌지 않습니다.

모바일에서 특히 자주 발목을 잡는 것은 첫 화면 이미지 용량과 광고 슬롯입니다. 이 둘만 정리해도 LCP와 CLS가 함께 움직입니다.

순위와의 관계는 어디까지인가

솔직하게 적으면, 코어 웹 바이탈은 동점자 상황에서 작용하는 신호에 가깝습니다. 콘텐츠가 부족한 페이지를 빠르게 만든다고 상위로 올라가지 않습니다. 반대로 지표가 나쁘면 이미 확보한 순위를 지키는 데 불리하게 작용합니다.

그래서 순서는 콘텐츠가 먼저, 속도가 다음입니다. 콘텐츠 품질에 대한 기준은 AI 콘텐츠에 대한 구글 공식 입장에서 정리했고, 구조화 데이터 쪽 우선순위는 타입별 우선순위에 적어 두었습니다.

확인 순서 요약

Search Console의 코어 웹 바이탈 보고서에서 URL 그룹 단위로 문제를 찾고, 대표 URL을 PageSpeed Insights로 확인합니다. 개별 페이지를 하나씩 보면 끝이 없습니다. 템플릿 단위로 고치면 같은 유형의 페이지가 한꺼번에 개선됩니다.

CDN이나 캐시를 붙였다면 설정에 따라 지표가 흔들릴 수 있습니다. 관련해서는 Cloudflare 기본값 점검을 참고하세요.

자주 묻는 질문

Q. 점수가 100점이면 순위가 오르나요?
직접적인 상승 요인은 아닙니다. 나쁜 지표를 정상 범위로 올리는 것이 목적이지, 만점을 목표로 할 일은 아닙니다.

Q. INP는 어떻게 줄이나요?
메인 스레드를 오래 붙잡는 자바스크립트를 찾는 것이 먼저입니다. 서드파티 스크립트를 하나씩 꺼 보며 측정하면 원인이 빨리 드러납니다.

Q. 이미지를 webp로 바꾸면 화질이 떨어지지 않나요?
품질 70~80 구간이면 육안 차이가 거의 없으면서 용량은 크게 줄어듭니다. 사진 종류에 따라 값을 조정해 비교해 보는 것이 확실합니다.

이 글의 내용을 사이트에 적용하기 어려우시면, 현재 상태부터 무료로 확인해 드립니다.

무료 진단 신청

관련 콘텐츠