다들 온라인 쇼핑을 하면서 이런 경험을 해보셨을 겁니다.
쇼핑몰에서 마음에 드는 상품을 찾아 구매 버튼을 누르려는 순간, 갑자기 광고 배너가 뜨면서 화면이 아래로 밀립니다. 엉뚱한 광고를 클릭하게 되고 짜증이 나서 사이트를 나가 버리죠.
Core Web Vitals(코어 웹 바이탈)란?
구글은 이런 나쁜 사용자 경험을 측정하기 위해 Core Web Vitals(코어 웹 바이탈)라는 지표를 만들었습니다. 웹사이트가 얼마나 빠르고, 안정적이고, 반응이 좋은지를 숫자로 보여주는 것입니다.
Core Web Vitals는 세 가지 핵심 지표로 구성됩니다
CLS: 화면 안정성
LCP: 페이지 로딩 속도
INP: 클릭 반응 속도
2021년부터 구글은 이 지표들을 검색 순위 요소로 사용하고 있습니다. 아무리 좋은 콘텐츠를 작성해도 사이트가 느리거나 화면이 밀린다면 검색 순위에서 밀릴 수 있다는 의미입니다.
CLS란? 화면이 밀리는 정도 측정
CLS(Cumulative Layout Shift)는 페이지 로딩 중에 화면이 얼마나 밀리는지 측정하는 지표입니다.
뉴스 기사를 읽고 있는데 갑자기 상단에 광고가 뜨면서 글이 아래로 밀리는 경험 있으시죠? 또는 SNS 공유 버튼을 누르려는데 뒤늦게 로딩된 이미지 때문에 버튼 위치가 바뀌어 엉뚱한 곳을 클릭하게 되는 경우도 있습니다. 이런 현상이 바로 CLS가 측정하는 레이아웃 이동입니다.
CLS 점수 기준
0.1 이하: 좋음 (화면이 거의 안 밀림)
0.1~0.25: 개선 필요
0.25 이상: 나쁨 (화면이 많이 밀림)
CLS 개선 방법
이미지와 동영상 크기 미리 지정하기
이미지를 넣을 때 width와 height를 HTML에 명시하면 브라우저가 미리 공간을 확보합니다. 이미지가 로딩되더라도 다른 콘텐츠가 밀리지 않습니다.
<img src="product.jpg" width="800" height="600" alt="상품 이미지">
광고나 팝업 공간 미리 확보하기
광고가 뒤늦게 로딩되면서 콘텐츠를 밀어내는 것을 방지하려면, 광고가 들어갈 영역의 크기를 미리 CSS로 지정해두세요. 광고가 로딩되기 전에 빈 공간으로 표시되지만, 다른 콘텐츠는 밀리지 않습니다.
LCP란? 페이지 로딩 속도 측정
LCP(Largest Contentful Paint)는 페이지에서 가장 큰 콘텐츠가 화면에 표시되는 시간을 측정합니다.
블로그를 열었는데 썸네일 이미지가 한참 뒤에 뜨거나, 뉴스 사이트에서 메인 기사 사진이 느리게 로딩되는 경험 있으시죠? LCP는 바로 이런 큰 콘텐츠가 얼마나 빠르게 나타나는지를 측정합니다.
여기서 가장 큰 콘텐츠란 화면에서 차지하는 면적이 가장 큰 요소를 말합니다. 보통 히어로 이미지, 썸네일, 배너, 큰 텍스트 블록 등이 해당됩니다.
LCP 점수 기준
2.5초 이하: 좋음
2.5~4.0초: 개선 필요
4.0초 이상: 나쁨
LCP 개선 방법
이미지 최적화하기
대부분의 LCP 문제는 이미지 때문에 발생합니다. 5MB짜리 원본 이미지를 그대로 올리면 로딩이 느릴 수밖에 없습니다. 이미지를 WebP 같은 최신 포맷으로 변환하고, 화면 크기에 맞게 압축하세요.
온라인 도구(TinyPNG, Squoosh)를 사용하면 화질 저하 없이 파일 크기를 50-80% 줄일 수 있습니다.
서버 응답 속도 개선하기
서버가 느리면 아무리 이미지를 최적화해도 소용없습니다. 호스팅 업체의 서버 위치, 성능을 점검하고, 필요하다면 CDN(콘텐츠 전송 네트워크)을 사용하세요. CDN은 전 세계 여러 서버에 콘텐츠를 복사해두어 사용자와 가까운 서버에서 빠르게 전송합니다.
INP란? 클릭 반응 속도 측정
INP(Interaction to Next Paint)는 사용자가 버튼을 클릭하거나 입력했을 때 화면이 얼마나 빠르게 반응하는지 측정합니다.
검색 버튼을 눌렀는데 한참 뒤에 반응하거나, 메뉴를 클릭했는데 화면이 멈춘 것처럼 느껴지는 경험 있으시죠? INP는 이런 반응성을 측정하는 지표입니다.
INP는 2024년 3월부터 기존의 FID(First Input Delay)를 대체한 새로운 지표입니다. FID는 첫 번째 클릭만 측정했지만, INP는 페이지에 머무르는 동안의 모든 인터랙션을 측정해 더 정확합니다.
INP 점수 기준
200ms 이하: 좋음
200~500ms: 개선 필요
500ms 이상: 나쁨
INP 개선 방법
자바스크립트 실행 최적화하기
자바스크립트 코드가 너무 많거나 복잡하면 클릭 반응이 느려집니다. 특히 페이지 로딩 중에 실행되는 스크립트가 많으면 사용자 입력이 지연됩니다.
개발자가 아니더라도 워드프레스 플러그인이나 추적 스크립트(구글 애널리틱스, 광고 스크립트)를 너무 많이 설치하면 INP 점수가 하락합니다. 사이트에 꼭 필요한 것만 남기시는 것을 권장합니다.
불필요한 서드파티 스크립트 제거하기
외부에서 불러오는 스크립트(광고, 채팅 위젯, 소셜 공유 버튼)들이 많을수록 반응 속도가 느려집니다. 사용하지 않는 기능은 과감하게 제거하고, 꼭 필요한 것만 남기세요.
내 사이트 LCP, CLS, INP 점수 확인하는 방법
PageSpeed Insights 사용하기
구글이 제공하는 무료 도구입니다. 사이트 URL만 입력하면 LCP, CLS, INP 점수를 바로 확인할 수 있습니다.
웹사이트 URL 입력
분석 버튼 클릭
30초 정도 기다리면 모바일/데스크톱 점수 확인
PageSpeed Insights는 실제 사용자 데이터(필드 데이터)와 실험실 데이터(랩 데이터) 두 가지를 보여줍니다. 필드 데이터는 최근 28일간 실제 방문자들이 경험한 속도이고, 랩 데이터는 테스트 환경에서 측정한 속도입니다. 필드 데이터를 더 주의해서 확인해 보세요.
모바일 점수가 데스크톱보다 낮게 나오는 게 정상입니다. 모바일 네트워크가 느리고 기기 성능도 낮기 때문입니다. 모바일 점수를 우선적으로 개선하는 것을 권장드립니다.
Lighthouse 사용하기
Lighthouse는 크롬 브라우저에 내장된 성능 측정 도구입니다. PageSpeed Insights보다 더 상세한 분석을 제공합니다.
크롬 브라우저에서 측정할 페이지 열기
F12 키 눌러 개발자 도구 열기
Lighthouse 탭 클릭
'Analyze page load' 버튼 클릭
1~2분 후 상세 리포트 확인
Lighthouse는 코어 웹 바이탈뿐만 아니라 접근성, SEO, 모범 사례 점수도 함께 보여줍니다. 개선이 필요한 부분을 구체적으로 알려주기 때문에 개발자와 소통할 때 유용합니다.
어떤 지표부터 개선해야 할까?
점수가 가장 낮은 지표부터 개선하는 것이 효율적입니다. PageSpeed Insights에서 빨간색으로 표시된 지표가 우선순위입니다.
비개발자도 할 수 있는 개선
이미지 최적화: TinyPNG로 압축
이미지 크기 지정: 워드프레스라면 테마 설정에서 가능
광고 위치 조정: 콘텐츠 중간보다 상단이나 하단 고정
불필요한 플러그인 제거: 사용하지 않는 기능 삭제
개발자 도움이 필요한 개선
서버 최적화: 호스팅 업체 변경, CDN 적용
코드 최적화: 자바스크립트 번들 크기 줄이기
캐싱 설정: 브라우저 캐시, 서버 캐시 적용
리스트 중에서 먼저 할 수 있는 것부터 시작하세요. 이미지만 최적화해도 LCP 점수가 개선됩니다.
Core Web Vitals는 단순한 기술 지표가 아니라 검색 노출과 사용자 전환에 직접적인 영향을 주는 기준입니다. 어떤 요소가 실제 성능 저하의 원인인지 구조적으로 파악하는 과정이 필요합니다. 이미지, 스크립트, 서버 응답 등 웹사이트 전반을 함께 점검해야 개선 효과를 검색 성과로 연결할 수 있습니다. 지금 사이트의 Core Web Vitals 상태를 기준으로 우선순위를 정리하고, 실행 가능한 영역부터 차근히 개선해보시기 바랍니다.
리드젠랩은 B2B 비즈니스 전문가로서 특히 AI 마케팅에 특화되어 있습니다.
내부적으로 Core Web Vitals 지표를 개선할 리소스 여유가 없다면, 또는 전문적으로 전략을 개선하고 싶으시다면 언제든 무료로 상담해 보세요.
👉 검색최적화 전문가에게 전략 문의하러 가기
🔗관련 콘텐츠 더 보기
Breadcrumb 최적화가 중요한 이유: 검색엔진과 사용자 모두를 만족시키는 핵심 전략
GEO vs AEO vs SEO 용어 총 정리: 2025 구글 공식 기준
자주 묻는 질문
Core Web Vitals가 무엇인가요?
Core Web Vitals(코어 웹 바이탈)는 구글이 정한 사용자 경험 핵심 지표입니다. LCP(로딩 속도), CLS(화면 안정성), INP(반응 속도) 세 가지로 구성됩니다.
LCP는 무엇을 측정하나요?
LCP(Largest Contentful Paint)는 페이지에서 가장 큰 콘텐츠가 화면에 표시되는 시간을 측정합니다. 2.5초 이하가 좋은 점수입니다.
CLS 점수가 나쁘면 어떻게 개선하나요?
이미지와 동영상에 width, height 속성을 지정하고, 광고나 팝업 영역의 크기를 미리 확보하세요. 화면이 밀리는 현상을 방지할 수 있습니다.
INP는 FID와 어떻게 다른가요?
INP는 2024년 3월부터 FID를 대체한 새로운 지표입니다. FID는 첫 클릭만 측정했지만, INP는 페이지의 모든 인터랙션을 측정해 더 정확합니다.
Core Web Vitals가 SEO에 영향을 주나요?
네, 2021년부터 구글 검색 순위 요소로 사용됩니다. 점수가 나쁘면 검색 순위가 하락할 수 있습니다.
참고자료