Core Web Vitals 점수가 낮을 때 어떻게 개선하나요?
코어 웹 바이탈
어떤 지표가, 어떤 기기에서, 어떤 페이지 그룹에서 실패하는지 먼저 확인하세요. Search Console의 Core Web Vitals 보고서에서는 실제 Chrome 방문 데이터를 바탕으로 세 가지 지표를 모두 볼 수 있습니다. 그다음 해당 지표의 원인을 해결합니다. LCP는 주요 이미지나 텍스트가 도착하는 속도, INP는 응답을 지연시키는 긴 JavaScript 작업, CLS는 공간을 확보하지 않고 나타나는 콘텐츠가 원인입니다. 필드 데이터는 최근 28일을 기준으로 하므로, 수정 효과는 한 달 단위로 판단해야 합니다.
1단계: 실패 원인 찾기
- Search Console에서 Core Web Vitals 보고서를 열고 모바일 또는 데스크톱을 선택합니다. 두 환경은 따로 평가됩니다.
- 목록에 표시된 문제 중 하나(예: 모바일의 LCP 문제)를 열어 영향을 받는 URL 그룹과 예시 URL을 확인합니다. 그룹 전체가 하나의 상태를 공유하며, 이 상태는 가장 나쁜 지표에 따라 결정됩니다.
- 예시 URL을 PageSpeed Insights에서 분석하면 해당 페이지의 필드 데이터와 디버깅에 도움이 되는 랩 테스트 결과를 나란히 볼 수 있습니다.
Lighthouse 같은 랩 도구는 사용자가 페이지와 상호작용하지 않기 때문에 INP를 측정할 수 없고, 대신 Total Blocking Time을 보고합니다. INP는 실제 사용자 측정 데이터를 기준으로 판단하는 것이 가장 정확합니다.
느린 LCP 개선 방법
web.dev의 LCP 최적화 가이드는 LCP를 서버 응답 시간, 주요 리소스 로드 시작까지의 지연, 다운로드 시간, 렌더링까지의 지연이라는 네 부분으로 나눕니다. 가장 큰 부분부터 개선하세요.
- LCP 이미지를 쉽게 발견할 수 있게 하세요. JavaScript나 CSS로 삽입하지 말고 초기 HTML에 포함하며,
fetchpriority="high"를 지정합니다. - LCP 이미지에는 지연 로딩을 적용하지 마세요.
- 더 작게 제공하세요. 적절한 크기, 최신 포맷, 압축을 적용하고 방문자와 가까운 CDN을 사용합니다.
- 렌더링을 차단하는 리소스를 제거하세요. 스타일시트를 줄이고,
<head>에서 동기 스크립트를 쓰지 않으며, 주요 콘텐츠는 서버 사이드 렌더링으로 제공합니다. - 서버 응답을 빠르게 하세요. 리디렉션을 줄이고 엣지에서 페이지를 캐시할 수 있게 합니다.
INP 개선 방법
INP 최적화 가이드는 각 상호작용을 입력 지연, 처리 시간, 표시 지연으로 나눕니다.
- 입력 지연: 페이지 로드 중에 실행되는 JavaScript를 줄여, 사용자가 탭할 때 메인 스레드가 비어 있도록 합니다.
- 처리 시간: 긴 이벤트 핸들러를 더 작은 작업으로 나누고 메인 스레드에 제어권을 넘깁니다. 눈에 보이는 업데이트를 먼저 처리하고 나머지는 뒤로 미룹니다.
- 표시 지연: DOM 크기를 작게 유지하고, 스타일을 변경한 직후 바로 읽어 강제 레이아웃이 발생하는 것을 피하며, 긴 페이지에는
content-visibility를 사용합니다.
높은 CLS 개선 방법
CLS 최적화 가이드에는 흔한 원인과 해결 방법이 정리되어 있습니다.
- 크기가 지정되지 않은 이미지와 동영상:
width와height속성 또는 CSSaspect-ratio를 추가합니다. - 광고, 임베드, iframe: 로드되기 전에 레이아웃에서 해당 공간을 미리 확보합니다.
- 기존 콘텐츠 위에 삽입되는 콘텐츠: 알맞은 크기의 플레이스홀더를 사용하거나, 방문자가 읽고 있는 내용보다 아래에 새 콘텐츠를 삽입합니다.
- 웹 폰트: 중요한 폰트는 미리 로드해 텍스트가 뒤늦게 다시 배치되지 않게 합니다.
- 애니메이션:
top이나left같은 속성 대신transform을 애니메이션합니다.
브라우저의 뒤로/앞으로 캐시(back/forward cache)를 사용할 수 있는 페이지는 방문자가 돌아올 때 레이아웃 이동도 발생하지 않습니다.
3단계: 수정 결과 확인
배포한 뒤 Core Web Vitals 보고서에서 해당 문제를 열고 검증을 시작하세요. Google은 28일 동안 해당 그룹을 모니터링합니다. 검증은 재크롤링을 요청하거나 속도를 높이지 않으며, 문제가 해결되었는지만 추적합니다. 필드 데이터가 28일 단위로 갱신되므로 보고서는 점진적으로 개선됩니다. 각 지표의 의미는 LCP, INP, CLS는 무엇을 의미하나요?를 참고하세요.
AutoPSEO 활용 방법
AutoPSEO의 Core Web Vitals 보고서는 사이트 전체 또는 특정 URL의 Chrome UX Report 주간 데이터를 약 6개월 분량으로 차트에 표시하며, 휴대전화, 데스크톱, 태블릿별로 확인할 수 있습니다. 다음 28일 기간이 끝나기를 기다리지 않고도 수정 사항이 효과를 낸 주, 또는 배포 때문에 상황이 악화된 주를 바로 파악할 수 있습니다.