본문 바로가기
이루웹

코어 웹 바이탈이란? 검색 순위를 좌우하는 속도 지표 가이드

코어 웹 바이탈은 LCP·INP·CLS 세 지표로 체감 속도를 측정합니다. 기준값과 확인 방법, 개선법을 예시로 쉽게 정리했습니다.

이루웹41분 분량

코어 웹 바이탈(Core Web Vitals)은 구글이 정한 세 가지 속도·반응성 지표, LCP·INP·CLS로 웹페이지의 체감 품질을 숫자로 측정하는 기준이다. 화면이 얼마나 빨리 뜨는지(LCP), 클릭했을 때 얼마나 빨리 반응하는지(INP), 화면이 얼마나 덜 흔들리는지(CLS)를 각각 점수로 보여준다.

세 지표 모두 "좋음" 구간에 들어야 구글이 이 페이지를 "빠른 페이지"로 인정한다. 순위를 결정하는 절대적인 요소는 아니지만, 비슷한 품질의 콘텐츠가 경쟁할 때는 속도가 승부를 가른다. 그리고 무엇보다, 느린 사이트는 순위와 무관하게 손님을 그냥 놓친다.

코어 웹 바이탈 LCP INP CLS 세 지표를 소개하는 카드뉴스 썸네일
코어 웹 바이탈은 LCP·INP·CLS 세 지표로 구성된 구글의 페이지 경험 측정 기준이다.

이 글에서 먼저 챙겨 갈 핵심만 추리면 이렇다.

  • LCP(최대 콘텐츠풀 페인트)는 "화면이 다 뜨는 데 걸리는 시간", 기준은 2.5초 이내
  • INP(다음 페인트와의 상호작용)는 "클릭 후 반응 속도", 기준은 200밀리초 이내
  • CLS(누적 레이아웃 이동)는 "화면이 흔들리는 정도", 기준은 0.1 이하
  • 세 지표는 구글 서치 콘솔과 PageSpeed Insights에서 무료로 확인 가능
  • 코어 웹 바이탈은 순위의 절대 조건이 아니라 동점자를 가르는 신호이지만, 실제 매출과는 직결된다

조금 더 풀어서 말하면, 코어 웹 바이탈은 원래 개발자들이 쓰던 어려운 성능 용어를 걷어내고 "사용자가 실제로 느끼는 속도"를 세 개의 숫자로 압축한 것이다. 구글은 2020년에 이 지표들을 처음 공개했고, 2021년부터 "페이지 경험(Page Experience)"이라는 이름으로 검색 순위 신호에 포함시켰다.

이 글은 SEO를 잘 모르는 사업가도 오늘 바로 자기 홈페이지를 점검할 수 있도록, 정의부터 기준값, 확인 방법, 업종별 개선 우선순위까지 예시 중심으로 쉽게 정리한다. 어려운 용어가 나오면 그 자리에서 한 문장으로 풀어 쓴다.

코어 웹 바이탈이란 무엇인가?

코어 웹 바이탈은 구글이 정의한 웹페이지 사용자 경험 측정 지표 세 가지의 묶음이다. 구글 크롬 팀이 만든 "웹 바이탈(Web Vitals)"이라는 더 큰 성능 지표 모음 중에서, 구글이 검색 순위와도 연결한 핵심(core) 지표만 뽑아 놓은 것이 바로 코어 웹 바이탈이다.

세 지표는 각각 다른 순간의 사용자 경험을 대변한다.

지표 무엇을 재나 쉬운 말 좋음 기준
LCP 가장 큰 콘텐츠가 화면에 뜨는 시간 "화면이 다 뜨기까지" 2.5초 이내
INP 클릭·탭 후 화면이 반응하는 시간 "눌렀을 때 반응 속도" 200밀리초 이내
CLS 로딩 중 레이아웃이 튀는 정도 "화면이 얼마나 흔들리나" 0.1 이하

세 지표를 합쳐서 생각하면 이렇다. LCP는 "얼마나 빨리 볼 수 있나", INP는 "얼마나 빨리 반응하나", CLS는 "얼마나 안정적인가"를 각각 담당한다. 이 세 가지가 모두 갖춰져야 사용자는 "이 사이트, 쓰기 편하다"고 느낀다.

세 지표는 방문의 서로 다른 순간을 대표하도록 의도적으로 나뉘어 있다. LCP는 "도착 직후", 페이지에 들어오자마자 눈에 보이는 첫인상을 담당한다. INP는 "머무는 동안", 방문자가 이것저것 눌러보며 실제로 사이트를 쓰는 전 과정의 반응성을 담당한다. CLS는 "읽는 내내", 콘텐츠를 읽거나 스크롤하는 동안 화면이 예측 가능하게 유지되는지를 담당한다. 이렇게 방문의 시작·중간·전 과정을 각각 나눠 재기 때문에, 한 지표만 좋다고 전체 경험이 좋다고 말할 수 없는 것이다.

LCP INP CLS 세 지표의 정의와 좋음 기준을 정리한 카드형 인포그래픽
LCP는 도착 직후, INP는 머무는 동안, CLS는 읽는 내내의 경험을 각각 대표한다.

코어 웹 바이탈은 디자인의 아름다움을 평가하지 않는다. 오직 속도와 안정성만 숫자로 잰다.

그래서 아무리 화려하고 세련된 디자인이라도, 그 화려함을 구현하기 위해 무거운 애니메이션 라이브러리나 대용량 배경 영상을 잔뜩 쓴다면 코어 웹 바이탈 점수는 오히려 나빠질 수 있다. 반대로 단순해 보이는 페이지라도 이미지와 스크립트를 가볍게 관리하면 좋은 점수를 받는다. 디자인의 완성도와 코어 웹 바이탈은 서로 다른 축이며, 둘 다 챙기는 것이 이상적이지만 굳이 하나를 포기해야 한다면 방문자가 아예 이탈해 버리는 속도 쪽을 먼저 지키는 것이 안전하다.

참고로 코어 웹 바이탈은 구글이 관리하는 더 넓은 성능 지표 모음인 "웹 바이탈(Web Vitals)" 프로그램의 일부다. 웹 바이탈에는 이 글에서 다루는 세 지표 외에도 뒤에서 소개할 TTFB, FCP 같은 보조 지표들이 더 포함되어 있는데, 그중에서도 검색 순위와 직접 연결되고 사용자 경험에 미치는 영향이 가장 크다고 판단된 세 가지만 별도로 "코어(핵심)"라는 이름을 붙여 분리해 둔 것이다. 즉 코어 웹 바이탈은 "성능 지표 전체 중에서 가장 신경 써야 할 최우선 순위 세 가지"라고 이해하면 된다.

여기서 짚어둘 점이 하나 있다. 코어 웹 바이탈은 개발자용 도구에서 임의로 만든 페이지를 켜서 재는 것이 아니라, 실제 방문자의 브라우저에서 수집한 실사용 데이터(필드 데이터)를 기준으로 평가한다는 것이다. 구글 크롬을 쓰는 실제 사용자들의 접속 데이터를 모은 것을 CrUX(Chrome User Experience Report)라고 부르는데, 서치 콘솔의 코어 웹 바이탈 보고서는 바로 이 CrUX 데이터를 사용한다.

즉 개발자가 자기 컴퓨터에서 빠르게 뜬다고 느껴도, 실제 손님들이 느린 지방 와이파이나 구형 스마트폰으로 접속했을 때 느리다면 코어 웹 바이탈 점수는 나쁘게 나온다. "내가 보기엔 빠른데?"가 아니라 "손님이 실제로 느끼는 속도"가 기준이라는 점을 꼭 기억해야 한다.

이 CrUX 데이터는 구글이 혼자만 보는 것이 아니라, PageSpeed Insights, 구글 서치 콘솔, 크롬 개발자 도구 등 여러 무료 도구에서 공통으로 불러와 보여준다. 즉 어느 도구로 확인하든 "실제 손님 기준" 데이터는 결국 같은 원천에서 나온다는 뜻이다. 다만 CrUX는 방문자 수가 일정 수준 이상 되는 페이지에만 데이터가 쌓이므로, 하루 방문자가 매우 적은 신생 사이트나 작은 페이지는 개별 URL 데이터가 아니라 사이트 전체 또는 비슷한 페이지 그룹 단위로 대체 표시되기도 한다.

코어 웹 바이탈은 언제 생겼고, 왜 계속 바뀌나?

코어 웹 바이탈은 2020년 5월 구글이 처음 공개했고, 2021년부터 실제 검색 순위 신호에 반영되기 시작했다. 그전에도 구글은 속도를 어느 정도 순위에 반영했지만, 무엇을 기준으로 "빠르다"고 판단하는지 명확한 숫자 기준이 없었다. 코어 웹 바이탈은 이 기준을 누구나 확인할 수 있는 세 개의 숫자로 공개했다는 점에서 의미가 크다.

이 지표들은 한 번 정해지고 끝나는 것이 아니라, 실제 사용자 데이터를 근거로 계속 다듬어진다. 대표적인 예가 바로 세 번째 지표의 교체다. 2020년 최초 발표 당시 세 번째 지표는 INP가 아니라 FID(First Input Delay, 최초 입력 지연)였다.

FID는 사용자가 페이지에서 처음 클릭하거나 탭했을 때 브라우저가 반응하기까지 걸리는 지연만 측정했다. 문제는 방문 전체에서 딱 한 번의 클릭만 잰다는 점이었다. 첫 클릭은 빨랐지만 이후 스크롤이나 두 번째, 세 번째 클릭에서 버벅이는 사이트도 FID만 보면 "문제없음"으로 나오는 허점이 있었다.

구글은 이 허점을 보완하기 위해 2023년 INP를 실험 지표로 먼저 공개해 데이터를 축적했고, 2024년 3월 12일 공식적으로 FID를 대체해 INP를 세 번째 코어 웹 바이탈로 채택했다. 지금 이 글이 다루는 LCP·INP·CLS 조합은 바로 이 시점 이후의 최신 기준이다.

오래된 SEO 자료에 "FID"라는 단어가 나온다면, 그 자료는 2024년 3월 이전 기준으로 쓰인 것이니 최신 정보로 다시 확인해야 한다.

이런 변화가 앞으로도 없으리라는 보장은 없다. 다만 세 지표의 기본 취지, "보이는 속도, 반응하는 속도, 흔들리지 않는 안정성"이라는 세 축은 유지될 가능성이 크다. 세부 측정 방식이 바뀌더라도 이 세 가지 방향으로 사이트를 관리해 두면 크게 걱정할 일은 없다.

기준값이나 지표 구성이 또 바뀔 경우, 구글은 보통 몇 달 전부터 실험 지표로 미리 공개하고 공식 개발자 블로그를 통해 예고한 뒤 정식 반영한다. 갑자기 하루아침에 기준이 바뀌는 일은 없으므로, 특별히 매일 뉴스를 챙겨보지 않아도 큰 흐름을 놓칠 걱정은 하지 않아도 된다. 다만 SEO를 전담하는 담당자가 있다면, 1년에 한두 번 정도는 이 글 같은 최신 가이드로 기준이 바뀌지 않았는지 확인해 두는 습관을 권한다.

LCP(최대 콘텐츠풀 페인트)란 무엇인가?

LCP(Largest Contentful Paint, 최대 콘텐츠풀 페인트)는 페이지에서 가장 큰 콘텐츠 요소가 화면에 나타나기까지 걸리는 시간이다. 보통은 히어로 이미지, 배너, 큰 제목 텍스트, 또는 화면을 가장 크게 채우는 블록이 그 대상이 된다.

사용자가 링크를 클릭한 순간부터 "아, 페이지가 로딩됐구나"라고 느끼는 그 순간까지의 시간이라고 보면 된다. 흰 화면만 오래 떠 있다가 갑자기 콘텐츠가 나타나면 LCP가 느린 것이다.

기준은 다음과 같다.

  • 좋음(Good): 2.5초 이내
  • 개선 필요(Needs Improvement): 2.5초 초과–4초 이하
  • 나쁨(Poor): 4초 초과
LCP INP CLS 각 지표의 좋음 개선필요 나쁨 구간을 막대로 보여주는 기준값 이미지
세 지표 모두 "좋음" 구간 안에 들어야 코어 웹 바이탈 전체가 통과 판정을 받는다.

LCP가 느려지는 가장 흔한 원인은 세 가지다.

첫째, 서버 응답이 느리다. 손님이 주소를 입력한 순간부터 서버가 첫 데이터를 보내주기까지 시간이 오래 걸리면, 그 뒤의 모든 과정이 함께 늦어진다. 저렴한 호스팅이나 트래픽이 몰릴 때 이런 문제가 흔하다.

둘째, 렌더링을 막는 리소스가 많다. 화면을 그리기 전에 브라우저가 먼저 읽어야 하는 CSS·자바스크립트 파일이 너무 많거나 무거우면, 정작 콘텐츠는 그 뒤에야 그려진다.

셋째, 이미지 용량이 너무 크다. 특히 히어로 이미지나 배너처럼 화면을 크게 채우는 이미지가 압축되지 않은 원본 그대로 올라가 있으면, 그 이미지 하나가 LCP를 통째로 늦춘다.

카페·병원·쇼핑몰 홈페이지에서 LCP가 느린 이유의 절반 이상은 "메인 화면 큰 사진 하나"다.

나쁜 예는 이렇다. 어느 인테리어 회사 홈페이지는 메인 화면에 4메가바이트짜리 시공 사진을 원본 그대로 올려두었다. 방문자는 사진이 다 뜨기까지 6초 넘게 흰 화면만 봐야 했고, 그사이 절반 가까운 방문자가 그냥 뒤로 가기를 눌렀다.

좋은 예는 이렇다. 같은 사진을 웹에 맞는 최신 포맷(WebP)으로 변환하고 화면 크기에 맞춰 리사이즈했더니 용량이 300킬로바이트로 줄었다. LCP는 6초에서 1.8초로 줄었고, 이탈률도 눈에 띄게 낮아졌다.

여기서 한 가지, 실무에서 의외로 자주 놓치는 실수가 있다. 바로 화면에 보여야 할 LCP 이미지에 "지연 로딩(lazy loading)"을 걸어 버리는 것이다. 지연 로딩은 화면 아래쪽, 스크롤해야 보이는 이미지의 로딩을 미뤄 초기 속도를 아끼는 좋은 기법이다.

문제는 이 기법을 실수로 첫 화면에 바로 보이는 히어로 이미지에까지 적용하는 경우다. 이렇게 되면 브라우저가 "이 이미지는 나중에 불러와도 된다"고 오해해, 정작 가장 먼저 보여야 할 이미지가 가장 늦게 뜨는 역효과가 난다. 화면 첫 부분(스크롤 없이 바로 보이는 영역)의 이미지는 지연 로딩을 걸지 않는 것이 원칙이다.

LCP를 개선하는 실전 방법은 다음과 같다.

  • 이미지 압축과 최신 포맷 사용: WebP나 AVIF 포맷으로 바꾸고, 실제 표시 크기에 맞춰 리사이즈한다.
  • 핵심 리소스 우선 로딩: 화면에 가장 먼저 보여야 할 이미지는 우선순위(priority) 옵션으로 먼저 불러오게 지정하고, 지연 로딩은 절대 걸지 않는다.
  • 사전 연결·사전 로드 활용: 이미지나 폰트를 가져오는 외부 서버에 미리 연결해 두는 preconnect, 핵심 리소스를 남들보다 먼저 요청하는 preload 태그를 쓰면 실제 로딩 시작 시점을 앞당길 수 있다.
  • 불필요한 자바스크립트 지연: 화면을 그리는 데 꼭 필요하지 않은 스크립트는 나중에 불러오도록 미룬다.
  • 빠른 호스팅·CDN 사용: 서버 응답 속도 자체가 느리면 위 방법을 다 적용해도 한계가 있다. CDN(전 세계 서버에 콘텐츠를 미리 복제해 가까운 곳에서 전달하는 기술)을 쓰면 응답 속도가 크게 개선된다.

참고로 LCP를 측정할 "가장 큰 콘텐츠"가 무엇인지는 사람이 정하는 것이 아니라 브라우저가 자동으로 판단한다. 보통 화면에서 가장 넓은 면적을 차지하는 이미지, 배경 이미지, 또는 큰 글자 블록이 후보가 되며, 페이지가 로딩되는 동안 후보가 바뀌면 그중 마지막으로 확정된 요소를 기준으로 시간을 잰다. PageSpeed Insights 진단 결과에서 "이 요소가 LCP입니다"라고 정확히 짚어 주므로, 무엇을 개선해야 할지 헷갈릴 필요는 없다.

INP(다음 페인트와의 상호작용)란 무엇인가?

INP(Interaction to Next Paint, 다음 페인트와의 상호작용)는 사용자가 버튼을 누르거나 링크를 클릭한 순간부터, 화면이 그 반응을 실제로 보여주기까지 걸리는 시간이다. 클릭했는데 화면이 몇 초간 먹통이면 INP가 나쁜 것이다.

기준은 다음과 같다.

  • 좋음(Good): 200밀리초 이내
  • 개선 필요(Needs Improvement): 200밀리초 초과–500밀리초 이하
  • 나쁨(Poor): 500밀리초 초과

여기서 밀리초란 1000분의 1초를 뜻한다. 즉 좋음 기준인 200밀리초는 눈 깜짝할 사이보다도 짧은 시간이지만, 사람은 이 짧은 지연도 "버벅인다"고 느낄 만큼 민감하다.

INP는 2024년 3월부터 새로 코어 웹 바이탈에 포함된 지표다. 그 전까지는 FID(First Input Delay, 최초 입력 지연)라는 비슷한 지표가 그 자리를 차지하고 있었다. FID는 "사용자의 첫 번째 클릭에 브라우저가 반응하기까지의 지연"만 쟀는데, 방문 중 첫 클릭 한 번만 측정하다 보니 이후의 클릭·스크롤·탭 반응성은 반영하지 못하는 한계가 있었다.

구글은 이 한계를 보완하기 위해 방문 전체에서 발생하는 모든 상호작용의 반응 속도를 측정하는 INP를 새 지표로 채택했다. FID가 "첫인상"만 봤다면, INP는 "방문 내내 손님이 실제로 느끼는 반응성" 전체를 본다고 이해하면 된다.

INP가 느려지는 흔한 원인은 다음과 같다.

첫째, 자바스크립트가 메인 스레드를 오래 붙잡는다. 클릭 이벤트를 처리하는 코드가 무겁거나, 한 번에 너무 많은 작업을 처리하려 하면 브라우저가 다른 반응을 못 하고 멈춘 것처럼 보인다.

둘째, 불필요한 서드파티 스크립트가 많다. 광고 태그, 채팅 위젯, 방문자 분석 도구 등을 한꺼번에 여러 개 붙여두면, 이들이 서로 순서를 다투며 반응 속도를 갉아먹는다.

셋째, 큰 목록이나 표를 한 번에 렌더링한다. 상품 목록 수백 개를 한꺼번에 화면에 그리도록 만들면, 사용자가 필터 버튼을 눌러도 그 많은 항목을 다시 그리느라 반응이 늦어진다.

나쁜 예는 이렇다. 어느 쇼핑몰은 상담 채팅 위젯 3개, 광고 태그 2개, 방문자 추적 스크립트 4개를 동시에 붙여 놓았다. 상품을 장바구니에 담는 버튼을 눌러도 0.8초 넘게 반응이 없어, 손님들이 "눌렸나?" 싶어 여러 번 연타하다 중복 주문이 발생하기도 했다.

좋은 예는 이렇다. 중복되는 채팅 위젯을 하나로 줄이고, 꼭 필요하지 않은 추적 스크립트를 정리한 뒤 무거운 스크립트는 화면이 다 그려진 후에 불러오도록 미뤘다. 장바구니 버튼의 반응 시간은 0.8초에서 150밀리초로 줄었다.

여기서 "롱태스크(long task)"라는 개념을 알아두면 원인 파악이 쉬워진다. 브라우저는 자바스크립트 작업이 50밀리초 넘게 쉬지 않고 이어지면 이를 "긴 작업"으로 분류하는데, 이 시간 동안은 사용자가 아무리 버튼을 눌러도 브라우저가 그 클릭을 처리할 겨를이 없다. INP가 나쁜 페이지는 대부분 이런 롱태스크가 여러 번 쌓여 있는 경우다.

INP를 개선하는 실전 방법은 다음과 같다.

  • 불필요한 서드파티 스크립트 정리: 광고·채팅·추적 도구 중 실제로 쓰지 않는 것은 과감히 제거한다.
  • 긴 작업을 잘게 쪼개기: 한 번에 처리하던 무거운 연산(롱태스크)을 작은 단위로 나눠, 중간중간 브라우저가 다른 이벤트에 반응할 틈을 준다.
  • 이벤트 핸들러 최적화: 클릭 한 번에 불필요한 로직까지 함께 실행되지 않도록 정리한다. 클릭 즉시 필요한 최소한의 반응(버튼 색 변경 등)부터 먼저 처리하고, 나머지 무거운 작업은 뒤이어 처리한다.
  • 가상 스크롤·페이지네이션: 목록이 매우 길다면 한 번에 전부 그리지 않고, 보이는 부분만 그리도록 바꾼다.
  • 입력 지연(디바운스) 활용: 검색창 자동완성처럼 입력마다 즉시 반응하는 기능은, 타이핑이 잠시 멈췄을 때만 처리하도록 지연시켜 불필요한 반복 연산을 줄인다.

내 사이트의 실제 반응 속도를 코드 수준에서 직접 재고 싶다면, 구글이 공개한 web-vitals라는 무료 자바스크립트 라이브러리를 페이지에 설치해 실사용자 각각의 INP 값을 콘솔이나 분석 도구로 실시간 확인할 수도 있다. 다만 이는 개발자가 직접 코드를 다루는 방식이므로, 우선은 PageSpeed Insights의 진단 결과만으로도 충분히 개선 방향을 잡을 수 있다.

CLS(누적 레이아웃 이동)란 무엇인가?

CLS(Cumulative Layout Shift, 누적 레이아웃 이동)는 페이지가 로딩되는 동안 화면 요소들이 갑자기 밀리거나 튀는 정도를 누적해서 계산한 값이다. 글을 읽으려고 막 손가락을 갖다 댔는데 갑자기 광고가 로딩되며 버튼 위치가 바뀌어 엉뚱한 곳을 클릭해 본 경험이 있다면, 그것이 바로 CLS가 나쁜 상태다.

기준은 다음과 같다.

  • 좋음(Good): 0.1 이하
  • 개선 필요(Needs Improvement): 0.1 초과–0.25 이하
  • 나쁨(Poor): 0.25 초과

CLS는 시간이 아니라 화면이 이동한 면적과 거리를 곱한 점수다. 숫자가 낮을수록 화면이 안정적이라는 뜻이고, 0에 가까울수록 이상적이다.

CLS가 나빠지는 흔한 원인은 다음과 같다.

첫째, 이미지에 크기를 지정하지 않았다. 이미지가 로딩되기 전까지 브라우저는 그 자리에 얼마만큼의 공간을 남겨둬야 할지 모른다. 이미지가 갑자기 나타나면서 아래 콘텐츠를 밀어낸다.

둘째, 광고나 배너가 나중에 삽입된다. 페이지가 다 그려진 후 광고 스크립트가 뒤늦게 자리를 만들면서 주변 요소가 밀린다.

셋째, 웹폰트가 늦게 로딩되며 글자 크기가 바뀐다. 기본 폰트로 먼저 보이다가 원하는 폰트로 바뀌면서 글자 너비가 달라지면 줄바꿈 위치가 통째로 밀린다.

나쁜 예는 이렇다. 어느 학원 홈페이지는 상단 공지 배너가 페이지 로딩 후 1초쯤 지나 삽입되도록 만들어져 있었다. 이 배너가 나타날 때마다 "무료 상담 신청" 버튼이 아래로 밀렸고, 버튼을 누르려던 손님이 대신 다른 메뉴를 눌러 이탈하는 일이 잦았다.

좋은 예는 이렇다. 배너가 들어갈 자리를 미리 고정된 높이로 비워 두었더니, 배너가 나중에 나타나도 다른 요소는 전혀 밀리지 않았다. CLS는 0.35에서 0.03으로 크게 개선됐다.

CLS를 개선하는 실전 방법은 다음과 같다.

  • 이미지·동영상에 항상 크기(width·height)를 지정: 로딩 전에도 브라우저가 미리 공간을 확보하게 한다. CSS의 aspect-ratio(가로세로 비율) 속성을 함께 지정하면 다양한 화면 크기에서도 비율이 안정적으로 유지된다.
  • 광고·배너 자리를 미리 확보: 나중에 삽입될 요소도 처음부터 고정된 공간을 배정해 둔다.
  • 폰트 로딩 최적화: 폰트가 늦게 바뀌어도 글자 크기 차이가 최소화되도록 font-display: swap 같은 옵션을 쓰거나, 자주 쓰는 폰트는 미리 불러온다(preload).
  • 콘텐츠 위에 갑자기 요소를 끼워 넣지 않기: 사용자가 읽고 있는 화면 중간에 새 요소를 강제로 삽입하지 않는다. 다만 사용자가 직접 버튼을 눌러서 발생하는 변화(예: "더 보기" 클릭 후 내용 확장)는 CLS 계산에서 예외로 처리되므로 걱정하지 않아도 된다.

코어 웹 바이탈은 실제로 검색 순위에 영향을 주는가?

영향을 주지만, 콘텐츠의 질을 뒤집을 만큼 크지는 않다. 구글은 코어 웹 바이탈을 포함한 "페이지 경험" 신호를 순위 요소 중 하나로 쓴다고 공식적으로 밝혔지만, 동시에 관련성 높고 좋은 콘텐츠가 여전히 가장 중요한 요소라고 반복해서 강조해 왔다.

쉽게 비유하면 이렇다. 코어 웹 바이탈은 순위를 결정하는 "동점자를 가르는 심판"에 가깝다. 검색어와 내용이 비슷한 수준으로 관련 있는 페이지 여러 개가 경쟁할 때, 그중 더 빠르고 안정적인 페이지가 근소하게 앞서 나갈 가능성이 커진다는 것이다.

반대로 콘텐츠 자체가 부실하다면, 아무리 코어 웹 바이탈 점수가 완벽해도 순위가 오르지 않는다. 속도는 콘텐츠 품질을 대신할 수 없다. 이 순서를 헷갈리면 안 된다.

코어 웹 바이탈을 완벽하게 만드는 것은 "순위를 올리는 일"이 아니라 "이미 좋은 콘텐츠가 손해 보지 않게 만드는 일"이다.

그렇다면 왜 이렇게까지 신경 써야 할까? 답은 순위보다 매출에 있다. 구글이 여러 차례 공개한 연구에 따르면, 페이지 로딩이 1초 늦어질 때마다 이탈률과 전환율에 뚜렷한 손해가 발생한다. 로딩이 3초를 넘기면 상당수의 방문자가 페이지를 끝까지 기다리지 않고 떠난다는 것은 업계에서 오래전부터 반복 확인된 경향이다.

즉 코어 웹 바이탈이 나쁘면 두 가지를 동시에 잃는다. 검색 순위에서 근소하게 밀리는 손해와, 이미 유입된 손님을 화면이 느려서 놓치는 손해다. 특히 후자가 훨씬 크다. 애써 광고비를 써서 데려온 손님이 3초를 못 참고 이탈한다면, 그 손실은 순위 하락보다 눈에 훨씬 잘 보이는 형태로 나타난다.

모바일 환경에서는 이 문제가 더 심각하다. 스마트폰은 데스크톱보다 처리 속도가 느리고, 이동 중 불안정한 통신 환경에서 접속하는 경우도 많다. 구글은 기본적으로 모바일 데이터를 기준으로 코어 웹 바이탈을 평가하므로, 데스크톱에서만 확인하고 안심하는 것은 위험하다.

사업주 입장에서 더 직관적으로 이해하려면 오프라인 매장에 비유하면 쉽다. 손님이 매장 문을 열고 들어왔는데 직원이 5초 넘게 아무 반응이 없다면, 그 손님은 매장을 둘러보기도 전에 돌아설 가능성이 크다. 온라인에서는 그 5초가 곧 LCP이고, 직원이 부름에 늦게 반응하는 것이 곧 INP이며, 진열대가 계속 흔들려 물건을 집기 어려운 상태가 곧 CLS다. 온라인이라고 해서 손님이 기다려 주는 시간이 더 길어지지는 않는다.

내 사이트의 코어 웹 바이탈은 어떻게 확인하나?

가장 쉬운 방법은 구글이 무료로 제공하는 PageSpeed Insights에 내 페이지 주소를 입력하는 것이다. 몇 초 안에 LCP·INP·CLS 세 점수와 함께 무엇이 느린지 구체적인 원인까지 알려준다.

여기서 확인할 때 반드시 알아야 할 개념이 하나 있다. 결과 화면에 "필드 데이터"와 "실험실 데이터" 두 종류가 함께 나온다는 점이다.

  • 필드 데이터(Field Data): 최근 28일 동안 실제 방문자들이 겪은 경험을 모은 데이터(앞서 말한 CrUX). 구글이 순위 평가에 실제로 쓰는 데이터가 바로 이것이다.
  • 실험실 데이터(Lab Data): 지금 이 순간 가상의 표준 환경에서 한 번 측정한 데이터. 실제 순위 평가에는 쓰이지 않지만, 어떤 요소가 느린지 원인을 진단하는 데 유용하다.

필드 데이터가 "성적표"라면, 실험실 데이터는 "진단서"다. 성적을 확인하되, 개선은 진단서를 보고 한다.

필드 데이터를 볼 때 알아두면 좋은 개념이 하나 더 있다. 구글은 방문자 전체의 평균값이 아니라, "상위 75퍼센트 기준(75th percentile)"으로 좋음·나쁨을 판정한다. 쉽게 말해 방문자를 속도가 빠른 순서대로 줄 세웠을 때, 뒤에서 25퍼센트에 해당하는 지점의 값을 기준으로 삼는다는 뜻이다.

왜 평균이 아니라 이 방식을 쓸까. 평균은 소수의 아주 빠른 방문(예: 최신 기기, 초고속 와이파이)이 다수의 느린 방문을 가려 버릴 수 있다. 반면 상위 75퍼센트 기준은 "어지간히 느린 환경의 손님도 대체로 괜찮은 경험을 했는가"를 보여주므로, 실제 서비스 품질을 더 보수적이고 정직하게 반영한다. 이 때문에 평균 속도는 빠른 것 같은데 코어 웹 바이탈은 나쁨으로 나오는 사이트가 종종 있는 것이다.

크롬 브라우저에 구글이 공식 제공하는 Web Vitals 확장 프로그램을 설치해 두면, 지금 보고 있는 페이지의 실시간 점수를 화면 위에 바로 띄워 볼 수도 있다. 개발자가 아니어도 설치와 사용이 간단하니, 자기 사이트를 자주 점검하고 싶다면 활용해 볼 만하다.

트래픽이 적은 사이트나 새로 만든 페이지는 필드 데이터가 아직 쌓이지 않아 "이 URL에 대한 데이터가 충분하지 않습니다"라는 메시지가 뜨기도 한다. 이럴 때는 실험실 데이터를 참고해 미리 개선해 두는 것이 좋다.

사이트 전체를 한눈에 보고 싶다면 구글 서치 콘솔의 코어 웹 바이탈 보고서를 활용한다. 이 보고서는 사이트의 모든 URL을 모바일·데스크톱으로 나누어 "양호", "개선 필요", "불량" 그룹으로 자동 분류해 준다. 비슷한 구조의 페이지는 한 그룹으로 묶여 표시되므로, 템플릿 하나만 고쳐도 여러 페이지가 한꺼번에 개선되는 경우가 많다. 서치 콘솔을 아직 등록하지 않았다면 구글 서치 콘솔 사용법부터 확인하고 오는 것을 권한다.

조금 더 개발자 친화적으로 보고 싶다면 크롬 브라우저의 개발자 도구(F12) 안 Lighthouse 탭에서도 같은 실험실 데이터를 확인할 수 있다. 페이지를 열어둔 채 F12를 누르고 Lighthouse 탭에서 분석을 실행하면 된다.

정기 점검 루틴으로는 이렇게 하면 된다.

  1. 한 달에 한 번, 서치 콘솔의 코어 웹 바이탈 보고서에서 "불량"으로 분류된 그룹이 있는지 확인한다.
  2. 문제 있는 URL 유형을 PageSpeed Insights에 넣어 어떤 지표가, 왜 나쁜지 원인을 진단한다.
  3. 개선 후 실험실 데이터로 먼저 확인하고, 2–4주 뒤 필드 데이터가 갱신되면 실제로 좋아졌는지 다시 확인한다.

실제 진단 화면이 어떻게 읽히는지 예를 들어 보겠다. 어느 동네 카페 홈페이지를 PageSpeed Insights에 넣었더니 모바일 기준으로 LCP 4.8초(나쁨), INP 180밀리초(좋음), CLS 0.02(좋음)로 나왔다고 하자.

이 경우 INP와 CLS는 이미 합격점이므로 더 손댈 필요가 없고, LCP 하나에만 집중하면 된다. 진단 결과를 펼쳐 보니 "가장 큰 콘텐츠풀 페인트 요소"로 메인 배경 사진이 지목되어 있었고, 원인으로 "이미지가 압축되지 않음"과 "렌더링을 차단하는 리소스"가 함께 표시됐다.

이 카페는 사진을 웹용 포맷으로 압축하고, 화면을 그리는 데 급하지 않은 예약 위젯 스크립트를 지연 로딩으로 바꾸는 두 가지만 적용했다. 재측정 결과 LCP는 4.8초에서 2.1초로 떨어져 세 지표 모두 좋음 구간에 들어왔다. 이렇게 진단 결과가 짚어주는 요소부터 하나씩 해결하면 막연히 전체를 다 손보는 것보다 훨씬 빠르게 개선된다.

PageSpeed Insights 점수(0–100)와 코어 웹 바이탈 통과 여부는 다른 개념이다

PageSpeed Insights 상단에 크게 뜨는 0–100점짜리 점수와, 페이지 하단의 "코어 웹 바이탈 평가 통과" 여부는 서로 다른 계산 방식으로 나온다. 이 둘을 같은 것으로 착각하면 "점수는 90점인데 왜 코어 웹 바이탈은 실패로 나오지?"라는 혼란이 생긴다.

0–100점 점수는 실험실 데이터를 바탕으로 여러 성능 지표(LCP, CLS를 포함해 최초 콘텐츠풀 페인트, 총 차단 시간 등)에 각각 가중치를 매겨 합산한 값이다. 반면 상단의 "통과/실패" 배지는 실제 방문자의 필드 데이터를 기준으로 LCP·INP·CLS 세 지표가 모두 좋음 구간에 들었는지만 본다.

여기서 흥미로운 사실이 하나 있다. 실험실 환경에서는 실제 사용자의 클릭이 없어 INP를 직접 측정할 수 없다. 그래서 0–100점 계산에는 INP 대신 "총 차단 시간(Total Blocking Time, TBT)"이라는 비슷한 성격의 지표가 대리로 쓰인다. TBT가 낮으면 대체로 INP도 좋게 나오는 경향이 있지만, 완전히 같은 값은 아니라는 점을 알아두면 점수 차이를 이해하기 쉽다.

실무에서 중요한 것은 100점 만점이 아니라 하단의 필드 데이터 통과 여부다. 점수를 100점으로 만드는 데 집착하기보다, 세 지표가 실제 손님 기준으로 좋음 구간에 드는지를 우선 확인하자.

업종별로 코어 웹 바이탈은 왜 특히 중요한가?

업종마다 코어 웹 바이탈에서 취약한 지점이 다르다. 자기 업종에 맞는 우선순위를 알면 한정된 시간을 효율적으로 쓸 수 있다.

쇼핑몰·이커머스는 상품 이미지가 많아 LCP가 취약하다. 상세페이지 하나에 사진이 수십 장씩 들어가는 경우가 흔한데, 이 사진들의 압축이 제대로 안 되어 있으면 첫 화면부터 느리다. 또한 "장바구니 담기", "옵션 선택" 같은 버튼 클릭이 매출과 직결되므로 INP가 나쁘면 곧바로 이탈과 매출 손실로 이어진다.

병원·학원 등 상담 유도형 사이트는 상담 신청 버튼이 뒤늦게 삽입되는 배너 때문에 밀리는 CLS 문제가 잦다. 손님이 버튼을 누르려는 순간 위치가 바뀌면 신뢰도까지 함께 떨어진다.

뉴스·블로그형 콘텐츠 사이트는 광고 스크립트가 많아 INP와 CLS 모두에 취약하다. 광고 네트워크를 여러 개 동시에 붙이는 경우 로딩 중 반응 지연과 레이아웃 흔들림이 동시에 발생하기 쉽다.

랜딩페이지·광고 상세페이지는 유료 광고를 통해 유입되는 트래픽이 많아 코어 웹 바이탈의 영향이 가장 즉각적으로 드러난다. 클릭당 광고비를 지불하고 데려온 손님이 로딩 지연으로 이탈하면, 그 손해는 광고비 낭비로 바로 계산된다.

부동산·숙박·여행 예약 사이트는 매물이나 상품 목록을 지도나 필터와 함께 보여주는 경우가 많아 INP가 특히 취약하다. 필터를 바꿀 때마다 목록 전체가 무겁게 다시 그려지면, 조건을 이것저것 바꿔 보려던 손님이 반응 없는 화면에 지쳐 이탈한다.

관공서·협회 등 정보 제공형 사이트는 오래된 게시판 시스템이나 여러 부서가 각자 붙인 배너·팝업이 뒤섞여 있어 CLS가 특히 나쁜 경우가 많다. 방문자 대부분이 필요한 서류나 공지를 찾으러 오는 만큼, 클릭 위치가 자꾸 밀리면 신뢰도에 직접 타격을 준다.

정리하면 아래와 같다.

업종 가장 취약한 지표 핵심 원인
쇼핑몰·이커머스 LCP, INP 상품 이미지 용량, 장바구니 버튼 반응 지연
병원·학원 등 상담형 CLS 뒤늦게 삽입되는 상담 배너
뉴스·블로그 INP, CLS 다수의 광고 스크립트
랜딩페이지·광고 상세 LCP 첫 화면 이미지 용량, 유료 트래픽 이탈
부동산·예약 사이트 INP 필터·지도 재렌더링
관공서·정보 제공형 CLS 다수의 배너·팝업
코어 웹 바이탈이 나쁜 홈페이지와 개선된 홈페이지를 비교하는 좋은 예 나쁜 예 이미지
같은 콘텐츠라도 이미지 최적화와 스크립트 정리만으로 세 지표 모두 개선할 수 있다.

이처럼 업종에 따라 먼저 손봐야 할 지표가 다르므로, 무작정 전부 손대기보다 내 사이트의 서치 콘솔 보고서에서 가장 나쁜 지표부터 우선순위를 정하는 것이 효율적이다.

코어 웹 바이탈을 개선하면 실제로 무엇이 달라지나?

수치만 나열하면 와닿지 않을 수 있으니, 두 가지 가상의 사례로 개선 전후를 비교해 본다. 실제 업종에서 흔히 나타나는 패턴을 재구성한 예시다.

사례 하나, 온라인 셀렉트샵. 상품 상세페이지마다 고화질 사진을 6–8장씩 올리는 구조였다. 개선 전 모바일 LCP는 5.6초, INP는 240밀리초, CLS는 0.18로 세 지표 모두 개선 필요 또는 나쁨 구간이었다.

작업은 세 가지였다. 상품 사진을 WebP로 일괄 변환하고 화면 크기별로 적절히 리사이즈했고, 첫 화면 대표 이미지에는 우선 로딩을 지정하되 나머지 사진은 지연 로딩으로 전환했다. 또한 사진 영역에 미리 aspect-ratio를 지정해 로딩 중 레이아웃이 밀리지 않게 했다.

3주 뒤 필드 데이터 기준으로 LCP는 5.6초에서 2.3초로, CLS는 0.18에서 0.04로 개선됐다. 서치 콘솔 코어 웹 바이탈 보고서에서 해당 상세페이지 그룹은 "불량"에서 "양호"로 이동했고, 같은 기간 모바일 장바구니 전환율도 함께 올라갔다. 이미지 최적화 하나로 두 지표가 동시에 좋아지는 경우가 실무에서는 흔하다.

사례 둘, 지역 병원 상담 랜딩페이지. 상단에 예약 상담 버튼을 크게 배치했지만, 페이지 진입 1초 후 자동으로 뜨는 이벤트 배너가 그 버튼을 밀어내는 구조였다. 동시에 채팅 상담 위젯 두 개를 중복으로 설치해 두고 있었다.

개선 전 CLS는 0.31, INP는 420밀리초로 둘 다 나쁨 구간이었다. 작업으로는 이벤트 배너가 들어갈 자리를 처음부터 고정된 높이로 확보해 두었고, 중복된 채팅 위젯 하나를 제거했다. 남은 위젯도 화면이 다 그려진 뒤에 늦게 불러오도록 지연 로딩으로 바꿨다.

재측정 결과 CLS는 0.31에서 0.05로, INP는 420밀리초에서 160밀리초로 개선돼 두 지표 모두 좋음 구간에 들어왔다. 상담 버튼 클릭률도 눈에 띄게 올랐는데, 이는 순위 상승 때문이라기보다 "누르면 바로 반응하는 버튼"이 손님에게 준 신뢰 때문으로 볼 수 있다.

두 사례의 공통점은 하나다. 큰 개발 비용을 들이지 않고도, 이미지·스크립트·레이아웃 세 가지를 정리하는 것만으로 눈에 띄는 개선이 가능했다는 점이다. 완전히 새로 만들지 않아도 기존 사이트에서 충분히 시도해 볼 수 있는 범위다.

코어 웹 바이탈 개선 체크리스트

실전에서 바로 점검할 수 있도록 지표별 핵심 항목을 정리했다.

코어 웹 바이탈 LCP INP CLS 개선을 위한 실전 체크리스트 이미지
지표별로 나눠 하나씩 점검하면 어디부터 손대야 할지 감이 잡힌다.

세 지표를 한꺼번에 다 고치려 하지 말고, 서치 콘솔에서 가장 나쁜 지표 하나부터 순서대로 잡아 나가는 것이 효율적이다.

우선순위를 정하기 어렵다면 간단한 기준이 있다. 서치 콘솔에서 "불량" 그룹에 속한 URL이 많은 지표부터 손대면 된다. 영향받는 페이지 수가 가장 많은 지표를 먼저 고치는 것이 전체 사이트의 체감 개선을 가장 빠르게 만드는 방법이다.

  • 이미지: 최신 포맷(WebP·AVIF)으로 변환하고, 실제 표시 크기에 맞춰 리사이즈했는가. 크기(width·height)를 명시했는가. 첫 화면에 바로 보이는 이미지에 실수로 지연 로딩이 걸려 있지는 않은가.
  • 스크립트: 쓰지 않는 광고·추적·채팅 위젯을 정리했는가. 중복 설치된 위젯은 없는가. 화면 렌더링에 급하지 않은 스크립트는 지연 로딩되는가.
  • 서버·호스팅: 응답 속도(TTFB)가 충분히 빠른가. CDN을 쓰고 있는가. 트래픽이 몰리는 시간대에도 응답이 느려지지 않는가.
  • 폰트: 웹폰트 로딩으로 글자 크기가 갑자기 바뀌지 않는가. 자주 쓰는 폰트를 미리 불러오도록(preload) 설정했는가.
  • 배너·팝업: 나중에 삽입되는 요소도 미리 자리를 확보해 두었는가. 사용자가 읽고 있는 콘텐츠 위로 예고 없이 끼어드는 요소는 없는가.
  • 모바일 우선 확인: 데스크톱이 아니라 모바일 기준으로 세 지표를 확인했는가. 실제 스마트폰으로도 눌러 보며 반응 속도를 체감했는가.

이 체크리스트는 한 번 점검하고 서랍에 넣어 두는 문서가 아니라, 새 기능을 추가하거나 디자인을 바꿀 때마다 다시 꺼내 보는 용도로 쓰는 것이 가장 효과적이다.

코어 웹 바이탈 외에도 참고하면 좋은 보조 지표

PageSpeed Insights 진단 결과를 보면 LCP·INP·CLS 세 지표 말고도 낯선 이름의 지표가 여러 개 함께 나온다. 이들은 "코어" 웹 바이탈은 아니지만, 원인을 진단하는 데 도움을 주는 보조 지표다.

  • TTFB(Time to First Byte, 첫 바이트까지 걸리는 시간): 브라우저가 서버에 요청을 보낸 뒤 첫 응답을 받기까지의 시간이다. 이 값이 크면 서버·호스팅 자체가 느리다는 신호이며, LCP가 느린 원인이 이미지가 아니라 서버에 있을 때 주로 이 지표가 함께 나쁘게 나온다.
  • FCP(First Contentful Paint, 첫 콘텐츠풀 페인트): 화면에 무엇이든(글자 한 줄이라도) 처음 그려지는 시점이다. LCP보다 먼저 발생하며, "완전히 흰 화면"이 얼마나 오래 지속되는지를 보여준다.
  • TBT(Total Blocking Time, 총 차단 시간): 앞서 설명했듯 실험실 환경에서 INP 대신 참고하는 반응성 관련 지표다. 값이 크면 페이지 로딩 중 자바스크립트가 메인 스레드를 오래 붙잡고 있다는 뜻이다.
  • Speed Index(속도 지수): 화면이 얼마나 "시각적으로" 빠르게 채워지는지를 종합적으로 보여주는 지표다.

이 보조 지표들은 서치 콘솔의 순위 평가에는 직접 쓰이지 않지만, "왜 LCP나 INP가 나쁜지" 원인을 좁혀 가는 단서로 유용하다. 예를 들어 TTFB가 유난히 크다면 이미지를 아무리 압축해도 근본 해결이 안 되므로, 호스팅 자체를 먼저 점검해야 한다는 판단을 내릴 수 있다.

코어 웹 바이탈에 대한 흔한 오해 세 가지

첫째, "코어 웹 바이탈 점수만 올리면 순위가 오른다"는 오해다. 앞서 설명했듯 코어 웹 바이탈은 콘텐츠 품질을 대신하지 못한다. 관련성 낮은 콘텐츠에 아무리 빠른 속도를 붙여도 검색 의도에 맞지 않으면 순위는 오르지 않는다. 속도 개선은 "손해를 막는 일"이지 "순위를 만드는 일"이 아니라는 순서를 기억해야 한다.

둘째, "데스크톱에서 빠르면 괜찮다"는 오해다. 앞서 말했듯 구글은 모바일 데이터를 기준으로 평가하며, 실제 방문자도 모바일 비중이 높은 경우가 대부분이다. 사무실 데스크톱, 좋은 인터넷 환경에서 확인하고 안심했다가 정작 손님 대부분이 쓰는 모바일 환경에서는 나쁜 점수가 나오는 경우가 흔하다. 반드시 모바일 기준으로 별도 확인해야 한다.

셋째, "한 번 개선하면 계속 유지된다"는 오해다. 코어 웹 바이탈은 고정된 값이 아니라 최근 28일간의 누적 데이터로 계속 갱신된다. 개선 이후에도 새 배너를 추가하거나, 새로운 광고 스크립트를 붙이거나, 이미지를 압축 없이 새로 올리는 순간 점수는 다시 나빠질 수 있다. 새 기능이나 콘텐츠를 추가할 때마다 속도에 미치는 영향을 함께 점검하는 습관이 필요하다.

코어 웹 바이탈 관리는 한 번의 이벤트가 아니라, 사이트를 운영하는 내내 계속되는 정기 점검 항목으로 다뤄야 한다.

자주 묻는 질문

코어 웹 바이탈 점수가 나쁘면 순위가 바로 떨어지나요?

바로 떨어지지는 않는다. 코어 웹 바이탈은 여러 순위 신호 중 하나이며, 콘텐츠의 관련성과 품질이 훨씬 큰 비중을 차지한다.

다만 비슷한 품질의 경쟁 페이지가 많은 검색어일수록 속도 차이가 순위에 영향을 줄 가능성이 커진다. 그리고 순위와 별개로, 느린 페이지는 방문자 이탈이라는 형태로 손해를 준다는 점을 함께 기억해야 한다.

세 지표 중 하나만 나빠도 코어 웹 바이탈 전체가 "불량"인가요?

그렇다. 서치 콘솔은 LCP·INP·CLS 중 하나라도 "좋음" 기준을 충족하지 못하면 해당 URL 그룹을 "양호"가 아닌 "개선 필요" 또는 "불량"으로 분류한다.

세 지표 모두 좋음 구간에 들어야 완전한 통과로 인정되므로, 하나만 고치고 안심하지 말고 세 지표를 함께 점검하는 것이 좋다.

이미지가 거의 없는 텍스트 위주 사이트도 코어 웹 바이탈을 신경 써야 하나요?

그렇다. 이미지가 적어도 INP와 CLS는 여전히 중요하다. LCP는 이미지 용량 문제로만 나빠지는 것이 아니라, 글자만 있는 페이지라도 폰트 로딩이 늦거나 렌더링을 막는 스크립트가 많으면 얼마든지 느려질 수 있다.

특히 텍스트·정보 위주 사이트는 광고 배너나 목차 스크립트, 댓글 위젯 같은 요소가 뒤늦게 삽입되며 CLS를 해치는 경우가 많다. 콘텐츠 형태와 무관하게 세 지표 모두 기본적으로 점검하는 것이 안전하다.

워드프레스나 카페24 같은 플랫폼을 쓰면 손댈 수 있는 부분이 적지 않나요?

플랫폼을 쓰더라도 개선할 여지는 충분하다. 대표적으로 이미지 용량을 줄이는 것, 불필요한 플러그인이나 위젯을 정리하는 것, 테마에서 제공하는 지연 로딩 옵션을 켜는 것만으로도 눈에 띄게 좋아지는 경우가 많다.

다만 플랫폼 자체의 구조적 한계(예: 무거운 기본 테마, 과도한 서드파티 스크립트)는 직접 코드를 만지지 않는 이상 개선에 한계가 있는 것도 사실이다. 근본적으로 빠른 사이트를 원한다면 애초에 성능을 고려해 설계된 홈페이지로 새로 제작하는 것도 방법이다.

모바일과 데스크톱 점수가 다른데 어느 쪽을 기준으로 삼아야 하나요?

모바일을 우선 기준으로 삼는 것이 안전하다. 구글은 기본적으로 모바일 사용성을 기준으로 색인을 생성하는 방식(모바일 우선 색인)을 쓰고 있고, 실제로도 모바일에서 접속하는 사용자 비중이 절반을 넘는 경우가 대부분이다.

데스크톱은 빠른데 모바일만 느리다면, 모바일 환경에서 특히 무거운 이미지나 스크립트가 있는지부터 점검해야 한다.

사이트 속도를 올리면 코어 웹 바이탈도 자동으로 좋아지나요?

대체로 그렇지만, 완전히 같은 개념은 아니다. 흔히 쓰는 "사이트 속도"라는 말은 페이지가 열리는 전체적인 체감 속도를 뭉뚱그려 가리키는 경우가 많은데, 코어 웹 바이탈은 그중에서도 LCP·INP·CLS라는 세 가지 구체적인 지점을 정밀하게 측정한다.

속도를 개선하는 작업 대부분(이미지 압축, 스크립트 정리, 서버 개선)이 세 지표에도 그대로 긍정적인 영향을 주므로, 방향은 같다고 보면 된다. 다만 "전체적으로 빨라졌다"는 체감과 "세 지표가 모두 좋음 구간에 들었다"는 것은 별개로 확인해야 한다.

개선 작업 후 점수가 반영되기까지 얼마나 걸리나요?

실험실 데이터는 즉시 반영되지만, 필드 데이터는 시간이 걸린다. PageSpeed Insights의 실험실 데이터는 개선 직후 바로 다시 측정해 확인할 수 있다.

반면 서치 콘솔의 코어 웹 바이탈 보고서에 쓰이는 필드 데이터는 최근 28일간의 실제 방문자 데이터를 누적해서 보여주므로, 완전히 반영되기까지 최소 2–4주 정도는 기다려야 한다. 조급해하지 말고 기간을 두고 확인하는 것이 정확하다.

워드프레스가 아니라 Next.js 같은 최신 프레임워크를 쓰면 자동으로 점수가 잘 나오나요?

출발선이 유리할 뿐, 자동으로 보장되지는 않는다. Next.js 같은 최신 프레임워크는 이미지 자동 최적화, 폰트 최적화, 서버 컴포넌트를 통한 자바스크립트 최소화 같은 기능을 기본으로 제공해 코어 웹 바이탈을 관리하기 유리한 구조인 것은 사실이다.

다만 이런 프레임워크를 쓰더라도 무거운 이미지를 원본 그대로 올리거나, 불필요한 서드파티 스크립트를 잔뜩 붙이면 점수는 얼마든지 나빠진다. 프레임워크는 좋은 도구를 쥐여줄 뿐, 그 도구를 제대로 쓰는지는 별개의 문제다.

PageSpeed Insights 점수가 확인할 때마다 달라지는데, 무엇을 믿어야 하나요?

실험실 데이터는 측정 시점의 네트워크·서버 상태에 따라 매번 조금씩 달라질 수 있다. 한 번 측정해서 92점이 나왔다가 다음에 88점이 나오는 정도의 변동은 자연스러운 오차 범위로 봐도 된다.

이런 변동성 때문에 실험실 데이터 점수 하나에 일희일비하기보다, 여러 번 측정한 평균적인 경향서치 콘솔의 필드 데이터(실제 방문자 누적치)를 함께 보고 판단하는 것이 정확하다. 필드 데이터는 특정 순간의 오차에 흔들리지 않는 28일 누적 값이라 훨씬 안정적인 기준이 된다.

구글 애널리틱스에서도 코어 웹 바이탈을 확인할 수 있나요?

기본 리포트로는 제공되지 않지만, 별도 설정으로 연동할 수 있다. 구글 애널리틱스(GA4)는 기본적으로 코어 웹 바이탈을 전용 화면으로 보여주지는 않는다.

정확한 순위 평가 기준을 보고 싶다면 서치 콘솔의 코어 웹 바이탈 보고서가 가장 신뢰도 높은 공식 창구다. 페이지별로 더 정밀한 실사용자 데이터를 보고 싶다면 앞서 소개한 web-vitals 라이브러리를 분석 도구에 직접 연동하는 방법도 있지만, 이는 개발 리소스가 필요한 작업이다.

코어 웹 바이탈이 나쁘면 구글에게 "벌점"을 받는 건가요?

벌점이라기보다 "얻을 수 있었던 가점을 못 받는 것"에 가깝다. 코어 웹 바이탈이 나쁘다고 해서 콘텐츠 자체가 검색에서 제외되거나 별도로 감점당하는 것은 아니다.

다만 비슷한 품질의 페이지들이 경쟁하는 상황에서, 코어 웹 바이탈이 좋은 경쟁 페이지에게 근소한 우위를 내줄 가능성은 있다. "벌을 받는다"보다는 "같은 실력이면 더 빠른 쪽이 이긴다"는 스포츠 경기에 가깝게 이해하는 것이 정확하다.

새로 만드는 홈페이지라면 코어 웹 바이탈을 처음부터 어떻게 준비해야 하나요?

제작 단계에서부터 이미지·스크립트·레이아웃 원칙을 설계에 반영해 두는 것이 가장 효율적이다. 이미 운영 중인 사이트를 나중에 고치는 것보다, 처음 만들 때부터 이미지 최적화 파이프라인을 갖추고, 꼭 필요한 스크립트만 선별해서 붙이고, 배너·팝업이 들어갈 자리를 미리 설계에 포함해 두면 별도의 개선 작업 없이도 좋은 점수가 나온다.

특히 여러 부서나 마케팅 도구가 스크립트를 계속 추가하는 조직이라면, 새 스크립트를 붙일 때마다 코어 웹 바이탈에 미치는 영향을 확인하는 절차를 아예 제작 단계 매뉴얼에 넣어 두는 것을 권한다.

코어 웹 바이탈만 잘 챙기면 SEO는 다 된 건가요?

아니다. 코어 웹 바이탈은 SEO의 여러 요소 중 하나일 뿐이다. 검색에서 손님을 데려오려면 관련성 높은 콘텐츠, 명확한 사이트 구조, 신뢰를 쌓는 백링크 등 여러 요소가 함께 갖춰져야 한다.

속도만 빠르고 콘텐츠가 부실한 사이트보다, 콘텐츠가 좋고 속도도 준수한 사이트가 항상 유리하다. 코어 웹 바이탈은 "이미 잘 만든 콘텐츠가 속도 때문에 손해 보지 않게" 만드는 안전장치로 이해하면 된다. 전반적인 점검이 필요하다면 홈페이지 제작 전 SEO 체크리스트를 함께 참고하면 좋다.

속도 개선은 콘텐츠·백링크 전략과 따로 가지 않는다

코어 웹 바이탈을 다루다 보면 "결국 개발자만 할 수 있는 기술적인 일 아니냐"고 생각하기 쉽다. 하지만 실제로는 콘텐츠 전략, 백링크 전략과 같은 방향을 보고 함께 가야 하는 일이다.

이유는 이렇다. 아무리 코어 웹 바이탈이 완벽해도 검색 의도에 맞지 않는 얕은 콘텐츠라면 애초에 검색 결과 상위에 오르지 못한다. 반대로 아무리 좋은 콘텐츠와 신뢰도 높은 백링크를 쌓아도, 클릭 후 페이지가 느리면 어렵게 데려온 손님을 화면 하나 때문에 놓친다. 콘텐츠가 손님을 데려오는 역할이라면, 코어 웹 바이탈은 그 손님을 놓치지 않는 역할을 한다.

여기서 백링크 이야기를 짚어 둘 필요가 있다. 백링크란 다른 사이트가 내 사이트로 연결해 주는 링크를 말하는데, 관련성 높은 좋은 사이트가 자연스럽게 걸어 주는 품질 좋은 백링크는 여전히 검색 신뢰도의 핵심 신호다. 이렇게 어렵게 얻은 신뢰와 유입을, 정작 느린 페이지 때문에 허무하게 날리는 경우를 실무에서 자주 본다.

그래서 세 요소를 한 팀으로 봐야 한다. 콘텐츠는 검색에 걸리게 만들고, 백링크는 신뢰를 쌓아 순위를 밀어 올리고, 코어 웹 바이탈은 그렇게 데려온 손님을 실제로 붙잡는다. 셋 중 하나만 잘해서는 전체 성과가 나지 않는다. 백링크 전략을 더 자세히 알고 싶다면 백링크, 수량이 아니라 품질이 중요한 이유를 함께 읽어보길 권한다.

실무에서는 보통 콘텐츠와 백링크에는 많은 시간을 쓰면서, 정작 손님이 도착한 이후의 경험인 코어 웹 바이탈은 뒷전으로 미루는 경우가 많다. 애써 상위에 노출시킨 페이지가 로딩 3초 만에 손님을 놓친다면, 그 이전 단계에 들인 노력까지 함께 낭비되는 셈이다. 유입 전략과 유입 이후 경험은 같은 예산, 같은 관심으로 다뤄야 한다.

마무리: 속도는 손님을 붙잡는 첫 예의다

코어 웹 바이탈은 결국 "손님을 기다리게 하지 않는 것"에 관한 이야기다. LCP는 화면이 빨리 뜨는지, INP는 눌렀을 때 바로 반응하는지, CLS는 화면이 안정적인지를 각각 점검한다.

세 지표 모두 좋음 구간에 들었다고 해서 순위가 급격히 오르는 것은 아니지만, 느린 사이트는 순위와 무관하게 이미 들어온 손님을 놓친다는 사실은 변하지 않는다. 애써 만든 콘텐츠와 애써 집행한 광고가 로딩 3초 만에 물거품이 되는 것만큼 아까운 일도 없다.

당장 무엇부터 하면 좋을지 막막하다면, 오늘 아래 네 단계만 따라 해 보자.

  1. PageSpeed Insights에 내 홈페이지 주소를 모바일 기준으로 넣어 세 지표 점수를 확인한다. 어떤 지표가 가장 나쁜지부터 파악한다.
  2. 가장 나쁜 지표 하나를 골라 이 글의 개선법을 하나씩 적용한다. 이미지 압축부터 시작하는 것이 가장 빠르고 효과가 크다.
  3. 개선 직후 실험실 데이터로 먼저 재확인하고, 2–4주 뒤 서치 콘솔의 코어 웹 바이탈 보고서에서 필드 데이터 기준으로 실제로 좋아졌는지 다시 확인한다.
  4. 새로운 배너·위젯·스크립트를 추가할 때마다 같은 방식으로 다시 점검하는 습관을 들인다. 코어 웹 바이탈은 한 번 잡아 두고 끝나는 숙제가 아니라 사이트를 운영하는 동안 계속 관리하는 항목이다.

오늘 배운 것을 요약하면 이렇다.

  • LCP는 2.5초 이내, INP는 200밀리초 이내, CLS는 0.1 이하가 좋음 기준이다.
  • 코어 웹 바이탈은 순위를 뒤집는 요소가 아니라 동점자를 가르는 신호이지만, 매출과는 직결된다.
  • 확인은 PageSpeed Insights서치 콘솔 코어 웹 바이탈 보고서로 무료로 할 수 있다.
  • 개선은 이미지 압축, 스크립트 정리, 레이아웃 안정화 세 방향으로 접근한다.

다만 속도는 검색이라는 큰 그림의 일부일 뿐이다. 아무리 빨리 뜨는 사이트라도, 애초에 검색 결과에서 손님 눈에 띄지 못하면 그 속도를 체감할 기회조차 없다. 무인도에 아무리 예쁜 호텔을 지어도 손님이 그 섬의 존재를 모르면 소용없는 것과 같다.

그래서 우리는 디자인만 예쁜 사이트가 아니라, 검색에 노출되고, 검색에 잡히고, AI가 아는 사이트를 만든다. 빠르고 안정적인 화면은 그 사이트가 손님에게 지키는 첫 예의다.

이루웹은 설계 단계부터 코어 웹 바이탈을 고려해 홈페이지를 만드는 SEO 웹 에이전시입니다. 이미지 최적화, 불필요한 스크립트 정리, 안정적인 레이아웃 설계까지 속도와 검색 노출을 함께 챙겨 드리고 있습니다. 지금 사이트가 느리게 느껴지거나 코어 웹 바이탈 점수가 걱정된다면 SEO 홈페이지 제작 서비스전체 서비스를 살펴보시고, 무료 상담으로 현재 상태를 진단받아 보시길 권해 드립니다. 손님이 기다리지 않는 사이트를 만드는 일부터 함께하겠습니다.

검색되는 사이트가 필요하신가요?

이 글의 원칙을 그대로 적용해 사이트를 만듭니다. 상담은 무료입니다.