코어 웹 바이탈(LCP, INP, CLS)과 페이지 속도 알아보기

🤔 화면은 떴는데 쓰기 불편할 때

페이지에 글은 보이는데 큰 사진은 늦게 뜨고, 버튼을 누르면 반응이 늦을 수 있습니다. 읽던 줄이 광고 때문에 아래로 밀리기도 합니다. 코어 웹 바이탈(Core Web Vitals)은 이런 사용 경험을 세 지표로 나눠 봅니다.

🔑 세 지표가 측정하는 것

• LCP(Largest Contentful Paint): 화면에 보이는 측정 대상 이미지나 텍스트 등에서 가장 큰 요소가 표시되기까지의 시간입니다. 페이지 전체가 완성되는 시간은 아닙니다.
• INP(Interaction to Next Paint): 클릭, 터치, 키보드 조작 뒤 다음 화면이 그려지기까지의 반응 시간을 측정합니다. 방문 중 여러 조작을 관찰하며 느린 반응을 대표하도록 집계합니다.
• CLS(Cumulative Layout Shift): 예상하지 못한 화면 배치 이동의 정도입니다. 처음 로딩할 때뿐 아니라 페이지를 사용하는 동안의 이동도 포함하며, 가까이 이어진 이동 묶음 가운데 가장 큰 값을 사용합니다.

INP는 모든 조작의 평균이 아닙니다. 조작이 많은 경우 일부 극단값을 제외하는 규칙이 있으며 마우스 이동이나 스크롤 자체는 INP의 조작 대상이 아닙니다. 처음에는 계산 구현보다 어떤 불편을 나타내는지를 구분하면 됩니다.

🍽️ 주문하고 음식을 먹는 상황으로 이해하기

식당에서 물과 수저는 금방 왔지만 큰 메인 요리가 늦게 나옵니다. LCP는 이처럼 화면에서 큰 이미지나 글 묶음이 늦게 나타나는 시점을 측정합니다. 다만 LCP가 모든 요리가 다 나온 순간을 뜻하는 것은 아닙니다.

추가 주문을 하려고 손을 들었는데 종업원이 한참 뒤에 돌아봅니다. INP는 이처럼 조작 뒤 화면이 반응하는 지연을 측정합니다. 첫 클릭만 빠르다고 이후의 사용도 빠른 것은 아닙니다.

먹으려고 포크를 내리는 순간 접시가 옆으로 밀리면 불편합니다. CLS는 광고나 이미지가 뒤늦게 들어와 읽던 내용이나 누르려던 버튼이 움직이는 상황과 관계있습니다. 정해진 배치 공간이 있으면 이런 이동을 줄이는 데 도움이 됩니다.

📊 좋음 기준과 75번째 백분위

실제 사용자 자료는 모바일과 데스크톱을 나눠 75번째 백분위 값을 기준과 비교합니다. 측정값을 작은 순서로 놓았을 때 약 75%가 그 값 이하인 위치입니다. 평균이나 가장 빠른 75%의 평균이라는 뜻이 아닙니다.

세 지표의 자료가 충분하다면 각 지표의 75번째 백분위가 모두 좋음 기준을 충족해야 통과합니다. PageSpeed Insights에서는 INP 자료가 부족하면 LCP와 CLS로 판정할 수 있지만 두 지표 중 하나가 부족하면 판정할 수 없습니다. 자료 없음과 성능 나쁨을 구분합니다.

🧪 실제 사용자 자료와 실험실 점수

PageSpeed Insights는 페이지 주소를 넣어 성능을 확인하는 Google 도구입니다. 실제 사용자 자료와 실험실 진단을 구분해서 보여 줍니다.

실제 사용자 부분은 지난 28일의 자료를 집계합니다. 검사한 주소의 표본이 부족하면 같은 출처의 전체 자료를 보여 줄 수 있습니다. 출처는 https://example.com처럼 통신 방식과 호스트 이름 및 포트로 구분한 범위입니다. 출처 전체의 자료도 부족하면 자료가 없다고 나옵니다. 지금 본 수치가 검사한 페이지의 값인지 출처 전체의 값인지 확인합니다.

실험실 진단은 페이지 성능을 자동으로 검사하는 Lighthouse를 정해진 환경에서 실행한 결과입니다. 현재 문제를 찾는 데 유용하지만 모든 방문자의 경험을 대신하지 않습니다. 성능 점수 100점과 실제 사용자 지표 통과는 같은 뜻이 아닙니다. 수정 직후의 실험실 결과와 지난 28일 자료가 다른 것도 이상하지 않습니다.

⚖️ 검색 순위와 어떻게 연결되나요?

Google은 코어 웹 바이탈을 순위 시스템에서 사용하지만 좋은 수치가 상위 노출을 보장하지는 않습니다. 검색어와 내용의 관련성 등 여러 신호도 작용합니다. 속도는 오직 동점일 때만 쓴다고 단정할 수도 없습니다.

속도 개선 뒤에는 실제 지표와 이용 중 불편이 줄었는지를 봅니다. 순위가 그대로라고 개선이 무의미한 것은 아니며, 순위가 올랐다고 속도 변경 하나의 효과라고 확정하지도 않습니다.

🔍 불편에 맞춰 확인하기

큰 사진이 늦게 뜬다면 그 사진의 전송 크기와 로딩 방식 및 서버 응답 등을 확인합니다. 버튼이 늦게 반응한다면 어떤 조작에서 지연되는지 재현하고 스크립트 처리 등을 살펴봅니다. 초보자는 재현한 주소, 기기와 조작 순서를 개발 담당자에게 전달해도 됩니다.

광고가 뜨며 글이 밀린다면 광고 공간을 미리 확보했는지 확인합니다. 광고 공간 미확보가 모든 CLS 문제의 유일한 원인은 아니므로 변경 전후 같은 동작을 비교합니다.

광고 로딩에 따른 배치 변화를 단순화한 예시이며 실제 서비스 화면이나 측정 결과가 아닙니다.

❓ 자주 묻는 질문

예전에 보던 FID와 INP는 어떻게 다른가요?

FID(First Input Delay)는 첫 조작 뒤 브라우저가 처리를 시작하기까지의 지연을 봤습니다. INP는 방문 중 여러 조작에서 다음 화면 표시까지의 반응을 봅니다. 첫 조작만 확인하던 범위보다 넓으며 현재 코어 웹 바이탈에는 INP를 사용합니다.

자료 없음은 성능이 나쁘다는 뜻인가요?

그렇게 판단할 수 없습니다. 실제 사용자 표본이 부족할 수 있습니다. 실험실 진단으로 현재 문제를 살펴볼 수 있지만 그 점수를 실제 사용자 수치로 바꿔 적지는 않습니다.

컴퓨터에서는 빠른데 모바일 결과는 나쁠 수 있나요?

기기와 네트워크 및 실행 환경이 달라 결과가 다를 수 있습니다. 같은 주소인지, 모바일과 데스크톱 중 무엇인지, 실제 사용자 자료와 실험실 중 무엇인지부터 맞춰 봅니다.

📝 가상 결과표에서 다음 확인 대상 고르기

메모장에 같은 페이지의 모바일 실제 사용자 자료라고 가정해 적습니다. 세 가지 값은 이미 계산된 75번째 백분위이며 자료가 충분하다고 가정합니다.

기준표와 비교하면 LCP와 CLS는 좋음, INP는 개선 필요입니다. INP는 200밀리초를 넘으므로 어떤 조작이 느린지 확인할 차례입니다. 세 수치를 평균 내거나 단위를 섞어 더하지 않습니다.

이번에는 같은 조건의 다음 집계에서 INP가 180밀리초이고 나머지는 같다고 바꿉니다. 세 지표 모두 좋음 기준을 충족합니다. 여기서 확인한 것은 주어진 성능 지표이며 검색 순위 상승은 아닙니다. 값과 단위, 비교 기준, 다음 행동을 한 줄씩 적으면 첫 연습을 마친 것입니다.

📋 3줄 요약

1. 코어 웹 바이탈은 로딩의 LCP, 조작 반응의 INP, 배치 안정성의 CLS를 구분해 봅니다.

2. 충분한 실제 사용자 자료에서 세 지표의 75번째 백분위를 각각 좋음 기준과 비교합니다.

3. 실험실 점수와 실제 사용자 수치를 구분하며 좋은 수치만으로 높은 검색 순위를 보장하지 않습니다.

참고 자료

• Web Vitals와 기준값
• LCP의 측정 대상
• INP의 조작과 집계
• CLS의 배치 이동 집계
• PageSpeed Insights의 실제 사용자 자료와 실험실 진단
• Google 검색의 페이지 경험

공식 문서 확인: 2026년 10월 3일.