콘텐츠로 건너뛰기
Home » 검색엔진 최적화 » 코어 웹 바이탈 (Core Web Vitals)이란?

코어 웹 바이탈 (Core Web Vitals)이란?

코어 웹 바이탈 (Core Web Vitals)이란?
코어 웹 바이탈 (Core Web Vitals)이란?
코어 웹 바이탈 (Core Web Vitals)이란?

2023년에는 SEO (검색엔진최적화) 에 있어 사용자 경험 최적화가 더욱 중요해졌습니다. Google 및 기타 검색 엔진은 UX를 순위 요소로 더욱 강조하고 있습니다. 이는 웹 사이트 소유자가 사용하기 쉽고, 빠르게 로드되며, 모든 장치에서 액세스할 수 있는 웹 사이트를 만드는 데 집중해야 함을 의미합니다.

웹사이트를 UX에 맞게 최적화하려면 페이지 속도, 모바일 응답성, 탐색 등의 요소에 집중해야 합니다. 이를 위해서는 명확하고 간결한 메뉴와 링크를 사용하여 웹 사이트를 탐색하기 쉽게 만들어야 합니다. 또한 빠른 로딩을 위해 이미지와 비디오를 최적화하고 다양한 화면 크기에 적응하는 반응형 디자인을 사용하여 최적화된 환경을 조성해 나가는 것이 앞으로의 과제일 것입니다.


💡아래에서 관심 있는 주제를 클릭하여 해당 본문으로 바로 이동해보세요.

코어 웹 바이탈이란?

SEO에서 코어 웹 바이탈이 중요한 이유

코어 웹 바이탈 측정 항목

– LCP (Largest Contentful Paint)

– FID (First Input Delay)

– CLS (Cumulative Layout Shift)

코어 웹 바이탈 측정 방법


코어 웹 바이탈이란?

코어 웹 바이탈 (Core Web Vitals)은 웹 사이트가 검색 엔진 결과에 표시되는 위치에 영향을 미치는 세 가지 웹 성능 측정값입니다. 여기에는 사이트의 전반적인 로딩 속도, 상호작용, 웹페이지의 시각적 안정성, 보안 문제 등 여러 요소를 포함하고 있습니다. 구글에서는 웹 사이트에 방문하는 유저들의 경험을 좌우하는 여러 요소들 중 가장 기본이자 핵심 지표로 보기 때문에 ‘코어 (Core)’라는 단어를 붙여 부릅니다. 

다시 말해, 코어 웹 바이탈은 웹페이지 유저들의 사용 경험을 측정하는 구글의 표준화된 측정 항목 집합입니다. 구글 검색을 효과적으로 활용하고 전체적으로 유저들에게 좋은 환경을 제공하려면 우수한 코어 웹 바이탈을 유지하는 것이 좋습니다.

사용자 경험과 밀접한 연관이 있는 코어 웹 바이탈
Source GOOGLE (Image inspired by Growfusely)

코어 웹 바이탈은 다음을 포함하여 사용자 경험의 세 가지 기본 영역에 대한 지표를 생성하여 사용자 경험 문제를 식별합니다.

  • 페이지 로딩 성능
  • 상호작용의 용이성
  • 사용자 관점에서 본 페이지의 시각적 안정성

이러한 각 지표는 사용자가 웹 사이트와 상호작용하고 참여하는 방식에 영향을 미치는 다양한 요소에 대한 고유한 관점을 제공합니다. 이러한 측정 항목이 웹 사이트의 사용자 경험에 대한 전체적인 내용을 알려주는 것은 아니지만, 각 측정 항목을 종합하여 효율적이고 체계적인 방식으로 문제를 해결하는 데 도움이 될 수 있다는 점을 기억해야 합니다.


SEO에서 코어 웹 바이탈이 중요한 이유

코어 웹 바이탈은 웹 사이트의 사용자 경험에 직접적인 영향을 미치고, 결과적으로 검색 엔진 순위에 영향을 미칠 수 있기 때문에 SEO에 중요합니다. Google에서는 좋은 사용자 경험을 제공하는 웹 사이트에 우선순위를 두고 싶다는 점을 분명히 밝혔으며, 코어 웹 바이탈은 그러한 경험을 측정하는 한 가지 방법입니다.

또한, 코어 웹 바이탈을 우선시하는 웹 사이트 소유자는 검색 엔진 순위 향상 이상의 이점을 누릴 가능성이 높습니다. 빠르게 로드되는 웹 사이트는 사용하기 쉽고 안정적인 사용자 경험을 제공할 수 있기 때문에 사용자의 참여를 유지하고 고객으로 전환할 가능성이 더 높습니다.


코어 웹 바이탈 측정 항목

웹 페이지를 개선하기 위해 코어 웹 바이탈에 포함된 세 가지 주요 측정 항목을 살펴보겠습니다. 

코어 웹 바이탈 측정 항목
Image inspired by web.dev

LCP (Largest Contentful Paint)

LCP는 웹 페이지의 로딩 속도에 대한 지표로 콘텐츠 렌더링 시간을 의미합니다. 웹 페이지가 완전히 로드되는 데 걸리는 시간을 측정하는 것이 아니라, 가장 중요한 부분이 로드되는 시점에만 집중합니다. 즉, 뷰포트* 내에서 가장 큰 페이지 요소(큰 텍스트 블록, 이미지 또는 비디오)를 표시하는 데 걸리는 시간을 측정합니다. 

(*뷰포트 : 웹페이지 사용자가 별도의 스크롤 동작 없이 볼 수 있는 영역)

텍스트와 큰 이미지만을 포함한 간단한 웹페이지의 경우, 해당 큰 이미지가 LCP로 간주됩니다. 이는 브라우저에 로드할 수 있는 콘텐츠 중 가장 큰 부분이므로 사용자에게 깊은 인상을 남길 수 있습니다. 더 빠르게 로드하면 웹페이지가 훨씬 더 빠르게 나타날 수 있습니다. 

구글에 따르면 웹페이지 로드 후 처음 2.5초 이내에 LCP가 발생하도록 목표를 세워야 합니다. 2.5초~4초 미만은 개선이 필요하며, 그 이상의 시간이 소요되는 것은 성능이 좋지 않다고 간주할 수 있습니다.

  • 좋음 – 가장 큰 콘텐츠 요소가 2.5초 이내에 렌더링됩니다 .
  • 개선 필요 – 가장 큰 콘텐츠 요소는 4초 이내에 렌더링되지만 2.5초보다 오래 걸립니다 .
  • 나쁨 – 가장 큰 콘텐츠 요소를 렌더링하는 데 4초 이상 걸립니다 .

FID (First Input Delay)

FID는 사이트의 상호작용성과 반응성에 대한 사용자의 첫인상을 결정한다고 볼 수 있습니다. 왜냐하면 FID는 사용자가 웹페이지와 상호작용을 시도하는 첫 번째 순간부터 웹페이지가 응답하는 시간을 측정하기 때문입니다. 즉, 브라우저에서 다음 액션이 발생되는 시간까지의 길이를 측정한 지표이며, 밀리세컨드(ms)로 측정합니다.

이 때, FID가 중요하게 여기는 요소는 요청받은 액션을 처리하는데 걸리는 시간이 아닌, 입력 지연을 시키는 시간입니다.

좋은 사용자 경험을 제공하기 위해 사이트는 첫 번째 입력 지연이 100ms 이하가 되도록 노력해야 합니다. 100ms에서 300ms 사이는 개선이 필요하며, 그 이상은 성능이 좋지 않은 것으로 판단하게 됩니다.

연결과 장치가 빨라짐에 따라 사용자들의 인내심과 관심은 짧아졌습니다. 사용자의 상호작용에 대한 즉각적인 피드백을 제공하는 것은 사용자의 관심을 유지하는 데 중요합니다. 대부분의 상호작용 문제는 페이지 로드 중에 발생합니다. 초기에 모든 문제를 제거함으로써 웹사이트 전반적으로 개선을 할 수 있습니다.

  • 양호 – 페이지가 100ms 미만인 경우 페이지의 FID 점수가 매우 높습니다 .
  • 개선 필요 – 페이지 점수가 100ms를 초과하고 300ms 미만인 경우 FID 점수를 개선해야 합니다.
  • 나쁨 – FID 점수가 300ms보다 길면 성능이 좋지 않은 것으로 간주됩니다.

CLS (Cumulative Layout Shift)

CLS는 페이지가 로드될 때 페이지가 얼마나 안정적인지 측정하고 ‘시각적 안정성’을 이루고자 합니다. CLS는 모바일 중심의 지표입니다. 데스크톱 웹사이트에서는 화면 크기 문제가 대부분 존재하지 않기 때문입니다.

CLS는 특히 페이지 요소가 화면에서 얼마나 자주 이동하는지 측정합니다. 이로 인해 사용자가 작은 모바일 화면의 콘텐츠와 상호작용 하기가 더 어려워집니다. 화면 요소가 이동하는 일반적인 원인으로는 사용자가 이미 페이지 콘텐츠와 상호작용하고 탐색하기 시작한 후에 렌더링되는 광고, 이미지 및 기타 레이아웃 요소가 있습니다.

따라서 페이지가 로드될 때 페이지의 요소가 너무 많이 움직인다면 CLS가 높다는 것이므로 개선이 필요합니다. 이 때, CLS 점수 또한 세 가지 범주로 나뉩니다.

  • 좋음 – 페이지의 CLS 점수가 0.1 미만 이면 좋은 것입니다 .
  • 개선 필요 – 페이지의 CLS 점수가 0.25 미만, 0.1 이상인 경우 개선이 필요합니다 .
  • 나쁨 – 페이지의 CLS 점수가 0.25 이상으로 낮으면 많은 작업이 필요합니다.

코어 웹 바이탈 측정 방법

  • Chrome UX 보고서(CrUX) Chrome 사용자가 보고한 필드 데이터를 제공하여 사이트 소유자에게 실제 사용자가 웹 사이트를 어떻게 경험하는지에 대한 데이터를 제공합니다.
  • Google Lighthouse 코어 웹 바이탈에 대한 실험실 지표를 제공하는 무료 도구입니다. 성능, SEO, 접근성 등을 개선하기 위한 실행 가능한 통찰력을 제공합니다.
  • Google PageSpeed ​​Insights CrUX와 Lighthouse의 기능을 결합하여 CWV 및 기타 웹 바이탈에 대한 현장 및 실험실 데이터를 모두 제공합니다. 사용자는 PageSpeed ​​Insights를 사용하여 웹 사이트 소유 여부에 관계없이 웹 사이트의 성능을 확인할 수 있습니다. 아래 이미지는 페이지스피드 인사이트 보고서의 예입니다.
PageSpeed Insights 보고서 - TBWA DataLab
PageSpeed Insights 보고서
PageSpeed Insights 보고서 - TBWA DataLab
PageSpeed Insights 보고서
  • Google Search Console 부분적으로 CrUX 필드 데이터를 기반으로 하며 URL 또는 URL 그룹별로 CWV 성능 데이터를 제공합니다. 아래 이미지는 구글 서치 콘솔 보고서의 예입니다.
Google Search Console 보고서 - TBWA DataLab
Google Search Console 보고서


이번 글을 요약하면, 코어 웹 바이탈이 SEO에 미치는 영향은 상당합니다. 코어 웹 바이탈 점수가 좋은 웹 사이트는 검색 순위가 향상되는 반면, 점수가 낮은 웹 사이트는 검색 순위가 하락할 수 있습니다.

물론, 검색 순위는 코어 웹 바이탈 외에도 여러 요인에 따라 달라집니다. 하지만, 코어 웹 바이탈 점수가 좋으면 웹사이트 순위 향상에 반영된다는 점을 꼭 기억해야 합니다. 따라서 웹사이트 소유자는 검색 순위를 유지하거나 향상시키기 위해 코어 웹 바이탈 점수 개선에 우선순위를 두는 것이 중요합니다.

코어 웹 바이탈과 밀접한 연관이 있는 SEO에 대해 더 궁금한 사항들이 있으시면 아래 링크를 통해 TBWA DataLab의 SEO 컨설팅 서비스를 받아보세요!

댓글 남기기