콘텐츠로 이동

Lighthouse Core Web Vitals (LCP·INP·CLS)

개요

"웹사이트가 느리다"는 표현은 막연해요. 느린 게 첫 화면인지, 버튼 반응인지, 화면이 흔들리는 건지 나눠서 봐야 고칠 곳이 보이죠. Google은 사용자가 체감하는 경험을 세 가지 신호로 압축한 Core Web Vitals를 정의했어요. 로딩(LCP), 반응성(INP), 시각적 안정성(CLS)이 바로 그 셋이에요. Lighthouse는 이 지표를 통제된 환경에서 측정해 점수로 보여주죠. 이 페이지는 공식 문서 기준으로 각 지표가 무엇을 재는지, 권장 임계값은 얼마인지를 풀어요.

핵심 개념

Core Web Vitals가 뭘 재는가

Google의 Web Vitals 이니셔티브는 "모든 웹페이지에 적용되고, 모든 사이트 소유자가 측정해야 하며, 모든 Google 도구에 표시될" 필수 지표를 Core Web Vitals로 정의해요. 현재 셋은 사용자 경험의 세 측면을 담아요.

  • LCP (Largest Contentful Paint) — 로딩 성능을 재요. 페이지 로딩이 시작된 시점부터 가장 큰 콘텐츠(이미지·텍스트 블록)가 화면에 그려지기까지의 시간이에요. 좋은 경험을 위해선 2.5초 이내여야 해요.
  • INP (Interaction to Next Paint) — 반응성을 재요. 사용자가 클릭·탭했을 때 화면이 다음 프레임으로 반응하기까지의 지연이에요. 좋은 경험을 위해선 200ms 이하여야 해요. 기존 FID(First Input Delay)를 대체한 지표예요.
  • CLS (Cumulative Layout Shift) — 시각적 안정성을 재요. 페이지 로딩 중 레이아웃이 얼마나 예상치 못하게 흔들렸는지를 수치로 보여줘요. 좋은 경험을 위해선 0.1 이하여야 해요.

언제 "통과"로 볼 것인가

한 번의 측정값이 아니라, 모바일과 데스크톱을 나눠 페이지 로드의 75번째 백분위수(75th percentile) 를 기준으로 판단하는 걸 권장해요. 세 지표 모두가 75번째 백분위수에서 권장 목표를 충족하면 통과로 간주해요. "대부분의 사용자가 좋은 경험을 한다"를 잡으려는 의도예요.

지표의 수명 주기

Core Web Vitals 지표는 experimental(실험) → pending(검토) → stable(안정) 의 수명 주기를 거쳐요. 실험 단계는 아직 크게 바뀔 수 있고, 안정 단계가 되면 Google 도구 전반에 걸러진 기준으로 쓰여요. INP가 FID를 대체한 것처럼, 이 셋도 시간이 지나며 진화할 수 있어요.

실험실 지표 vs 필드 지표

Lighthouse가 재는 것은 통제된 환경에서 한 번 측정한 실험실(lab) 지표예요. 반면 진짜 사용자가 기기·네트워크 조건에서 겪는 값은 필드(field) 지표로 달라질 수 있어요. 같은 지표라도 측정 관점이 다르므로, 둘을 서로 보완해 읽어야 해요.

실제 적용 (데이터스케쳐스)

웹빌더에서 만든 웹사이트의 품질 기준으로 LCP와 CLS를 주기적으로 기록해요. 예를 들어 문서 변환 결과 페이지가 "첫 화면이 2.5초 안에 뜨는지", "사진이나 표 로드 중 레이아웃이 흔들리지 않는지"를 배포 전후로 비교하죠. 이 중 성능이 악화되면 LCP·INP·CLS 중 무엇이 나빠졌는지를 보고 고칠 지점을 좁혀요.

여기서 짚을 점은, 점수 하나(성능 점수)로 합산해 읽으면 원인이 묻힌다는 거예요. LCP와 CLS는 서로 다른 원인에서 오는 경우가 많아서, 셋을 따로 봐야 해요. 또 실험실 지표가 개선됐다고 실제 사용자가 꼭 빨라진 건 아니므로, 실사용 지표와 함께 보는 걸 권장해요. Lighthouse가 어떤 항목들을 감사하는지 전체는 감사 카테고리에서, 프론트엔드 품질 지표 배치는 Lighthouse에서 이어져요.

더 알아보기