Core Web Vitals란 무엇인가
구글은 2021년부터 Core Web Vitals(코어 웹 바이탈) 점수를 SEO 순위 알고리즘에 직접 반영하고 있습니다. 단순히 "사이트가 빠른지"를 넘어, 사용자 경험을 수치로 정량화한 3개의 지표가 검색 순위에 영향을 미칩니다.
세 지표는 LCP(Largest Contentful Paint), CLS(Cumulative Layout Shift), INP(Interaction to Next Paint)입니다. 2024년 3월 INP가 FID(First Input Delay)를 공식 대체했습니다.
LCP — 가장 큰 콘텐츠가 로딩되는 시간
LCP는 페이지에서 가장 큰 이미지 또는 텍스트 블록이 화면에 렌더링되는 시간을 측정합니다.
| 등급 | 기준값 |
|---|---|
| Good (녹색) | 2.5초 이하 |
| Needs Improvement (노란색) | 2.5초 ~ 4.0초 |
| Poor (빨간색) | 4.0초 초과 |
구글은 LCP가 2.5초 이하인 페이지를 우선적으로 상위 노출합니다. 4초를 초과하면 검색 순위 알고리즘에서 페널티가 부여됩니다.
LCP에 가장 큰 영향을 미치는 요소는 히어로 이미지입니다. 최상단에 배치된 대형 이미지가 최적화되지 않으면 LCP가 즉시 Poor 등급으로 떨어집니다. WebP 포맷, loading="eager", fetchpriority="high" 속성 적용이 기본입니다.
CLS — 레이아웃 이동 누적 점수
CLS는 페이지가 로딩되는 동안 요소들이 예기치 않게 이동하는 정도를 측정합니다.
| 등급 | 기준값 |
|---|---|
| Good (녹색) | 0.1 이하 |
| Needs Improvement (노란색) | 0.1 ~ 0.25 |
| Poor (빨간색) | 0.25 초과 |
사용자가 링크를 누르려는 순간 광고 배너가 로딩되어 버튼 위치가 바뀌는 경험이 CLS 문제의 전형적인 사례입니다.
CLS가 높아지는 주요 원인은 크기가 명시되지 않은 이미지입니다. <img> 태그에 width와 height 속성이 없으면 브라우저가 이미지 크기를 모른 채 렌더링하다가 이미지 로딩 후 레이아웃을 재조정합니다. 모든 이미지에 명시적 크기를 지정하는 것만으로 CLS를 0.1 이하로 낮출 수 있습니다.
웹 폰트 로딩 시 발생하는 텍스트 깜빡임(FOIT/FOUT)도 CLS를 높입니다. font-display: swap 설정이 필요합니다.
INP — 사용자 상호작용 반응 속도
INP는 사용자가 페이지에서 클릭, 탭, 키보드 입력 등의 상호작용을 했을 때 다음 화면 업데이트가 이루어지기까지의 지연 시간을 측정합니다. 2024년 3월 구글이 FID를 대체하는 지표로 공식 채택했습니다.
| 등급 | 기준값 |
|---|---|
| Good (녹색) | 200ms 이하 |
| Needs Improvement (노란색) | 200ms ~ 500ms |
| Poor (빨간색) | 500ms 초과 |
INP가 나쁜 원인은 대부분 무거운 JavaScript입니다. 사용자가 버튼을 클릭했을 때 메인 스레드가 JS 실행으로 막혀 있으면 화면 업데이트가 지연됩니다. 코드 분할(Code Splitting)과 불필요한 서드파티 스크립트 제거가 핵심 개선 방법입니다.
빌더 사이트 vs 커스텀 사이트 — 실제 점수 비교
2026년 Google PageSpeed Insights 데이터를 기준으로, 아임웹과 카페24로 제작된 소상공인 사이트의 평균 모바일 Lighthouse 점수는 35~55점 범위에 분포합니다.
같은 콘텐츠를 Next.js 기반 커스텀 코드로 제작한 사이트는 85~98점을 기록합니다. 치로웹디자인이 제작한 사이트는 기본 목표가 Lighthouse 95점 이상입니다.
점수 차이가 나는 구조적 원인은 세 가지입니다.
첫째, 빌더는 범용 코드를 사용합니다. 아임웹, 카페24가 생성하는 HTML/CSS/JS는 모든 사이트에 공통으로 적용되는 범용 코드입니다. 내 사이트에 불필요한 스크립트도 모두 로딩됩니다.
둘째, 빌더는 이미지 최적화를 제어할 수 없습니다. WebP 변환, lazy loading 전략, 이미지 사이즈 지정을 세밀하게 제어할 수 없습니다.
셋째, 빌더는 렌더링 전략을 선택할 수 없습니다. Next.js의 SSG(정적 생성), ISR(증분 재생성) 같은 렌더링 전략을 빌더에서는 사용할 수 없습니다.
Core Web Vitals가 SEO 순위에 미치는 영향
구글은 Core Web Vitals를 Page Experience 신호로 분류하고 순위 알고리즘에 반영합니다. 동일한 키워드에서 콘텐츠 품질이 비슷한 두 사이트가 있을 때, Core Web Vitals 점수가 높은 사이트가 우선 노출됩니다.
Searchmetrics의 2025년 연구에 따르면, LCP가 Good 등급인 사이트는 Poor 등급 사이트 대비 평균 1.8배 높은 순위를 기록했습니다. CLS가 0.1 이하인 페이지는 이탈률이 평균 24% 낮았습니다.
SEO 효과 외에도 속도는 전환율에 직접 영향을 미칩니다. Google의 연구에 따르면 페이지 로딩이 1초 지연될 때마다 전환율이 7% 감소합니다.
치로웹디자인의 SEO/AEO 서비스는 Core Web Vitals 최적화를 기본으로 포함합니다. 모든 프로젝트에서 Lighthouse 95점 이상을 목표로 코드를 작성합니다.
개선 방법 — 항목별 체크리스트
LCP 개선
- 히어로 이미지를 WebP 포맷으로 변환
<img fetchpriority="high" loading="eager">적용- 이미지 파일 크기를 200KB 이하로 압축
- CDN 사용으로 서버 응답 시간 단축
<link rel="preload">태그로 중요 리소스 사전 로딩
CLS 개선
- 모든
<img>태그에 width, height 명시 - 광고, 임베드 영역에 고정 크기 컨테이너 적용
font-display: swap설정으로 폰트 로딩 충격 완화- 동적으로 삽입되는 콘텐츠를 페이지 상단에 배치하지 않음
INP 개선
- 불필요한 서드파티 스크립트 제거 (채팅 위젯, 분석 도구 등)
- JavaScript 코드 분할(Code Splitting) 적용
- 무거운 연산을 Web Worker로 이전
requestIdleCallback으로 중요하지 않은 작업 지연 처리
FAQ
Q. Core Web Vitals 점수는 어디서 확인할 수 있나요?
Google PageSpeed Insights(pagespeed.web.dev)에서 URL을 입력하면 LCP, CLS, INP 점수를 무료로 확인할 수 있습니다. Chrome의 개발자 도구 Lighthouse 탭에서도 동일한 측정이 가능합니다. 모바일과 데스크톱을 각각 확인해야 합니다.
Q. 아임웹, 카페24 사이트도 Core Web Vitals를 개선할 수 있나요?
이미지 파일 크기 최적화처럼 업로드 전 조정 가능한 항목은 일부 개선됩니다. 하지만 렌더링 방식, 스크립트 로딩 전략, 커스텀 캐시 헤더 같은 구조적 최적화는 코드 접근 없이 불가능합니다. 빌더 사이트는 구조적 한계가 있습니다.
Q. LCP가 2.5초를 초과하면 즉시 순위가 하락하나요?
순위는 단일 지표로 결정되지 않습니다. 하지만 콘텐츠 품질이 비슷한 경쟁 페이지가 있을 때 Core Web Vitals가 타이브레이커 역할을 합니다. 장기적으로 LCP 개선은 검색 트래픽 증가와 직결됩니다.
Q. 무료로 Core Web Vitals를 진단받을 수 있나요?
치로웹디자인의 무료 사이트 진단을 통해 Core Web Vitals 점수와 개선 포인트를 정리한 리포트를 받을 수 있습니다. 3일 이내 결과를 전달합니다.
치로웹디자인의 Core Web Vitals 접근
치로웹디자인은 모든 프로젝트에서 Lighthouse 95점 이상을 기본 목표로 삼습니다. Next.js의 Image 컴포넌트를 활용한 자동 WebP 변환, 라우트별 코드 분할, 폰트 최적화, CDN 배포가 기본 세팅에 포함됩니다.
빌더로 제작된 사이트를 커스텀 코드로 리뉴얼했을 때 Lighthouse 점수가 40점대에서 95점 이상으로 상승한 사례가 있습니다. 이는 단순한 디자인 개선을 넘어 검색 순위와 전환율 모두에 영향을 미치는 변화입니다.
사이트 속도가 비즈니스 성과에 미치는 영향이 궁금하다면 무료 사이트 진단을 신청하십시오.