<aside> 💡 목차

</aside>

모던 브라우저의 SEO(검색엔진최적화)에 있어 사용자 경험 최적화가 더욱 중요해졌다. Google 및 기타 검색 엔진은 UX를 웹사이트 순위의 중요한 요인으로 강조하고 있다.

이는 웹사이트가 사용하기 쉽고, 빠르게 로드되며, 모든 장치에서 액세스 할 수 있는 웹 사이트를 만드는 데 집중해야 함을 의미한다.

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

Core Web Vitals?

코어 웹 바이탈(Core Web Vitals)은 검색 엔진 결과 순위에 영향을 미치는 3가지 웹 성능 측정 값이다.

여기서 바이탈은 바이탈 체크할 때의 뜻과 같다. 생명 유지에 필수적인 요소들을 말한다. 따라서 웹 바이탈은 웹사이트의 생명을 유지하는 데 필수적인 요소들을 말한다고 할 수 있다.

여기에는 사이트의 전반적 로딩 속도, 상호작용, 웹페이지의 시각적 안정성, 보안 문제 등 여러 요소를 포함하고 있다.

구글에서는 웹 사이트에 방문하는 유저들의 경험을 좌우하는 여러 요소들 중 가장 기본이자 핵심 지표로 보기 때문에 ‘코어(Core)’라는 단어를 붙여 부른다.

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

코어 웹 바이탈 측정 항목

Untitled

**코어 웹 바이탈**은 다음과 같은 사용자 경험의 3가지 기본 영역에 대한 지표를 생성하여 사용자 경험 문제를 식별한다.

모든 항목은 최소 75% 페이지 방문에서 평균 수치를 평가한다.

  1. 최대 콘텐츠 렌더링 시간 (Largest Contentful Paint, LCP)
    1. 로드 성능을 측정한다. 우수한 사용자 환경을 제공하려면 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야한다.
    2. 웹 페이지가 완전히 로드되는 시간을 측정하는 것이 아니라, 가장 중요한 부분이 로드되는 시점에만 집중한다. 즉 뷰포트 내에서 가장 큰 페이지 요소(큰 텍스트 블록, 이미지 또는 비디오)를 표시하는 데 걸리는 시간을 측정한다.
  2. 다음 페인트에 대한 상호작용 (Interaction to NextPaint, INP)
    1. 상호작용, 응답성을 측정한다. 우수한 사용자 환경을 제공하려면 페이지의 INP가 200밀리초 이하여야 한다.
    2. INP는 특정한 작업을 수행한 후 페이지 요소가 얼마나 빨리 반응하는 지를 측정한다. 예를 들어 어떤 버튼을 클릭하면 페이지가 새 콘텐츠를 렌더링하는데 걸리는 시간을 측정하고 이를 INP 점수로 보고한다.
  3. 사용자 관점에서 본 페이지의 시각적 안정성 (Cumulative Layout Shift, CLS)
    1. 시각적 안정성을 측정한다. 우수한 사용자 환경을 제공하려면 CLS를 0.1. 이하로 유지해야한다.
    2. CLS는 모바일 중심의 지표이다. 데스크톱 웹사이트에는 화면 크기 문제가 대부분 존재하지 않는다. CLS는 특히 페이지 요소가 화면에서 얼마나 자주 이동하는 지 측정한다. 이로 인해 사용자가 작은 모바일 화면의 콘텐츠와 상호작용하기가 어려워질 수 있다. 화면 요소가 이동하는 일반적 원인으로는 사용자가 이미 페이지 콘텐츠와 상호작용하고 탐색하기 시작한 후에 렌더링되는 광고, 이미지 및 기타 레이아웃 요소가 있다.
    3. 따라서 페이지가 로드될 때 페이지의 요소가 너무 많이 움직인다면 CLS가 높다는 것이므로 개선이 필요하다.