코어 SEO 웹 바이탈(이하 CWV)는 웹 시스템의 성능을 측정하는 주요 지표 중 하나다. ​웹사이트의 사용성 자체를 뜻하기도 하는데, 2021년도부터 Google이 중요하게 다룰거라고 발표하면서 좀 크게 대두되게 됐다. 구글에서 SEO 알고리즘에 대해서 대놓고 말하지는 않지만, CWV 수치가 높은 사이트일수록 높은 순위로 검색이 되는 것이 실험으로 증명됐다.​​​​주요 지표​CWV는 총 3가지로 구성된다. 1. Largest Contentful Paint (LCP)2. First Input Delay (FID)3. Cumulative Layout Shift (CLS)이 외에도 자잘한게 몇개 있긴 한데, 가장 중요한건 이 3가지다. ​​​측정 도구​CWV 측정 SEO 도구는 몇가지 있긴 한데, 기본적으로 가장 널리 쓰이는건 크롬의 확장도구인 Lighthouse가 있다. Google LightHouse는 대표적인 웹페이지 품질 검사 도구 중 하나다. 단순 성능부터 시작해서 검색 엔진 ...​예를 들어 Lighthouse로 Github 사이트를 돌려보면, 이런 식으로 나온다.셋다 기본 메트릭으로 제공이 되는걸 볼 수 있다. 일단 깃헙은 이런거에 별로 신경을 쓰지 않고 있다는 것을 알았다. 저게 다 뭔지 하나씩 살펴보겠다.​​​1. Largest Contentful Paint (LCP)​이건 로딩에 걸리는 시간을 나타낸다. 정확히 말하면, 웹페이지의 메인 데이터들이 렌더링되는데 완료되는 SEO 시간이다. 모든 내용이 렌더링되는 시간이 아님에 유의한다. ​뷰포트, 그러니까 사용자가 스크롤하지 않고 볼 수 있는 범위 내에서 같은 대부분의 텍스트/이미지 요소들이 렌더링되는 것을 기준으로 삼는다. ​2.5초 미만이면 잘 만든 것이고, 4초 이상 걸리면 문제가 있다고 판단한다. ​개선안a. CDN 등을 사용해서 콘텐츠 다운로드 속도를 줄인다. b. 이미지 크기 최적화를 통해 콘텐츠 다운로드 시간을 줄인다. c. 적절한 Lazy Loading을 통해서 렌더링 시간을 최소화한다. 다만, 남발할 경우 LCP가 오히려 낮아지기도 한다. 그래서 Lazy Loading은 뷰포트 SEO 바깥에 있는 대상에 대해서만 수행할 것이 권장된다. ​​​2. First Input Delay (FID)​이건 사용자가 첫번째로 무언가 액션을 수행했을때 걸리는 반응속도를 나타낸다. ​다만 이 반응이라는게, 액션으로 인한 동작이 완전히 끝나는 걸 기준으로 하진 않는다. ​예를 들어 사용자가 페이지에 진입해서 2 페이지 이동 버튼을 클릭했을때, 2 페이지가 로드되기 직전까지의 시간을 계산하는 것이다. 2 페이지가 완전히 로딩되기까지의 시간이 아니라, 2 페이지가 로딩되기 시작하는 시간까지를 잰다. ​구글의 가이드라인에 따르면 좋은 FID는 100밀리초 이하다. 초 단위로 가지는 않아야 SEO 한다. ​개선안a. minify 등을 통해 Javascript 코드나 함수의 크기를 최소화한다. 코드 크기가 클수록 Delay가 커지기 쉽다. b. static generation이나 SSR 등을 통해서 빠른 로딩이 가능하도록 구성한다. c. 불필요하거나 남용되는 서드파티 스크립트 제거를 통해 스크립트 로딩 시간 줄이기 ​​​3. Cumulative Layout Shift (CLS)​이건 조금 직관적으로 받아들이기 어려울 수도 있다. 페이지가 로딩될때 레이아웃이 안정적으로 유지된 채로 렌더링되는 것을 나타내는 지표다. ​예를 들면, 이런 경험이 있을 것이다. 페이지에 들어가서 2 페이지 이동 버튼을 눌렀는데, 갑자기 SEO 중간에 배너가 끼어들듯이 렌더링돼서 실수로 잘못 누르는 경우 말이다. 이렇게 레이아웃이 와리가리치면서 UX를 망치는 정도를 나타내는게 이 지표다. ​CLS는 페이지가 로드될때 가장 큰 레이아웃 이동을 수치로 계산하며, 1-5초 정도를 burst라고 해서 측정 기간으로 삼는다. 정확한 계산식까지는 굳이 다루진 않겠다. ​0.1 이하면 안정적인 수치고, 0.25 이상이면 나쁜 상태라고 판단한다. ​개선안a. 서드파티 컴포넌트 최소화. 서드파티 컴포넌트들은 기존 레이아웃 요소들과 별개로 렌더링되기 때문에 통제하기가 매우 어렵다. b. 서드파티 컴포넌트를 위한 공간 미리 예약하기. 서드파티를 어쩔 SEO 수 없이 써야 한다면 미리 크기를 정해서 가짜 영역을 할당해서라도 레이아웃 이동을 최소화할 수 있다. c. 각 화면 형태에 따라 다른 크기의 이미지를 표시해야할 경우, 각 형태에 맞는 최적화된 이미지를 미리 준비해두고 바로 쓰도록 한다. 만약 데스크롭용 큰 이미지를 최초에 로드했다가 모바일임을 감지해서 reload할 경우에는 와리가리가 발생할 수 있다.d. 이미지가 비디오에 대해서 height와 width 정보 명시하기. 이미지에 대해서 크기를 명시하지 않으면 로딩 전후로 레이아웃이 팽창하는 참사가 발생할 수 있다. 크기를 명시하면 브라우저는 SEO 크기를 미리 예약해서 레이아웃이 안정적으로 유지될 수 있다. e. CSS aspect ratio 사용. 이를 통해 페이지 공간을 잘 보존할 수 있다. ​​​​참조코어 웹 바이탈(CWV)은 Google에서 검색 순위 알고리즘의 일부로 사용하는 웹 성능 메트릭입니다. CWV가 SEO에 미치는 영향을 알아보세요.Core Web Vitals는 실제 사용자 환경을 측정하는 측정항목입니다. Google 검색 및 Core Web Vitals에 관해 자세히 알아보세요.Page detailing Google Core Web Vitals and how brands should be preparing their sites for them to improve SEO SEO rankings and site speed.​