[Core Web Vitals] 코어 웹 바이탈이란?

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

웹사이트의 사용자 경험을 측정하는 중요한 측정 지표입니다.

이 지표는 페이지 로딩 속도, 상호작용의 반응성, 시각적 안정성을 평가하여

웹사이트의 품질을 개선하는 데 도움을 줍니다.

 

핵심 성능 보고서(Core Web Vitals Report)는

모든 웹 페이지에 적용되는 성능 보고서의 하위 집합으로 웹사이트의 사용자 경험을 평가하는 데 중요한 도구입니다.

Google의 코어 웹 바이탈 지표를 기반으로 합니다.

이 보고서는 웹사이트의 성능을 측정하고, 개선할 수 있는 기회를 제공합니다.

 

이 보고서는 LCP, FID, CLS와 같은 코어 웹 바이탈 지표를 포함하여 웹사이트의 로딩 속도, 반응성, 시각적 안정성을 측정합니다

 

각 코어 웹 바이탈은 사용자 경험의 고유한 측면을 나타내며, 현장에서 측정 가능하며, 중요한 사용자 중심 결과의 실제 경험을 반영합니다.

 

코어 웹 바이탈을 구성하는 주요 측정항목

코어 웹 바이탈을 구성하는 측정항목은 시간이 지남에 따라 진화합니다.

현재 세트는 사용자 환경의 세 가지 측면인 로드, 상호작용, 시각적 안정성에 중점을 두며

다음 측정항목(및 각 측정항목의 기준점)을 포함합니다

 

Largest Contentful Paint (LCP)

• 페이지에서 가장 큰 콘텐츠(예: 이미지, 비디오, 텍스트 블록)가 로드되는 시간을 측정합니다.
  • 페이지가 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 합니다.
  • 즉, 사용자가 페이지를 열고 나서 빠르게 주요 내용을 볼 수 있어야 합니다.

Interaction to Next Paint (INP)

• 사용자가 페이지와 상호작용할 때의 반응 속도를 측정합니다.
  • 페이지의 INP가 200밀리초 이하여야 합니다.
  • 즉, 사용자가 버튼을 클릭하거나 링크를 선택했을 때, 빠르게 반응해야 합니다.

Cumulative Layout Shift (CLS)

• 무엇인가요?: 페이지의 시각적 안정성을 측정합니다.
• 사용자가 페이지를 스크롤할 때 레이아웃이 얼마나 안정적인지를 평가합니다.
  • 페이지의 CLS가 0.1 이하를 유지해야 합니다.
  • 즉, 페이지를 보는 동안 내용이 갑자기 이동하지 않아야 하며, 사용자에게 혼란을 주지 않아야 합니다.

 

코어 웹 바이탈 지표의 목표를 달성

대부분의 사용자에게 좋은 성능을 제공하는 것이 중요합니다.

이를 위해 다음과 같은 방법을 사용할 수 있습니다

75번째 백분위수 측정

웹 페이지의 로드 성능을 평가할 때, 모든 사용자 중에서 상위 75%의 로드 시간을 기준으로 삼는 것입니다.

즉, 가장 느린 25%의 로드 시간은 제외하고, 나머지 75%의 사용자에게서 측정된 성능을 기준으로 삼습니다.

이렇게 하면 평균적인 성능보다 더 많은 사용자에게 좋은 경험을 제공하는지 확인할 수 있습니다.

즉, 페이지가 대부분의 사용자에게 빠르게 로드되고, 상호작용이 원활하며, 시각적으로 안정적인지를 평가할 수 있습니다.

모바일과 데스크탑 구분

모바일 기기와 데스크탑 기기에서 각각의 성능을 따로 측정합니다.

두 기기에서 사용자 경험이 다를 수 있기 때문에, 각각의 성능을 별도로 평가하는 것이 중요합니다.

모바일 사용자는 데스크탑 사용자와 다른 환경에서 웹사이트를 사용하므로, 각 기기에 맞는 최적화를 통해 더 나은 사용자 경험을 제공할 수 있습니다.

코어 웹 바이탈 지표 통과 기준

페이지가 코어 웹 바이탈 지표를 통과하려면, LCP, INP, CLS의 세 가지 지표 모두가 75번째 백분위수에서 추천하는 목표를 충족해야 합니다.

모든 지표가 동시에 충족되어야 사용자에게 전반적으로 우수한 경험을 제공할 수 있습니다.

 

결론적으로, 75번째 백분위수를 기준으로 모바일과 데스크탑에서 코어 웹 바이탈 지표를 평가하면,

대부분의 사용자에게 최적의 성능을 제공하는지 확인할 수 있습니다.

이를 통해 웹사이트의 품질을 높이고 사용자 만족도를 향상시킬 수 있습니다.

 

Lifecycle

코어 웹 바이탈 지표는 세 가지 단계로 구성된 생애 주기를 가지고 있습니다

실험적(Experimental), 대기 중(Pending), 안정적(Stable).

실험적(Experimental)

• 새로운 지표가 처음 개발되어 생태계에 도입될 때 이 단계에 해당합니다.
  • 이 단계에서는 지표의 적합성을 평가하고,
  • 해결해야 할 문제를 탐색하며,
  • 이전 지표들이 놓쳤던 부분을 보완하려고 합니다.
  • 예를 들어, Interaction to Next Paint (INP)는
    • 웹의 런타임 성능 문제를 더 포괄적으로 다루기 위해 실험적 지표로 개발되었습니다.
• 커뮤니티의 피드백이 매우 중요하며, 지표의 정의나 버그를 수정하는 데 유연성을 제공합니다.

대기 중(Pending)

• 실험적 지표가 충분한 피드백을 받고 효과가 입증되면 대기 중 지표로 전환됩니다.
• INP는 2023년에 실험적 단계에서 대기 중 단계로 승격되었으며, 이는 First Input Delay (FID)를 대체할 의도가 있습니다.
• 이 단계에서는 최소 6개월 동안 지표가 유지되며, 생태계가 적응할 시간을 제공합니다.
• 이 기간 동안 커뮤니티 피드백이 여전히 중요합니다.

안정적(Stable)

• 코어 웹 바이탈 후보 지표가 최종 확정되면 안정적 지표로 전환됩니다.
  • 이 단계에서 지표는 코어 웹 바이탈로 인정받습니다.
• 안정적 지표는 적극적으로 지원되며, 버그 수정이나 정의 변경이 있을 수 있습니다.
• 안정적 코어 웹 바이탈 지표는 연간 한 번 이상 변경되지 않으며,
• 변경 사항은 공식 문서와 변경 로그에 명확히 기록됩니다.
• 또한, 코어 웹 바이탈은 모든 평가에 포함됩니다.

현재 코어 웹 바이탈 지표의 생애 주기 단계

• LCP (Largest Contentful Paint): 안정적
• CLS (Cumulative Layout Shift): 안정적
• INP (Interaction to Next Paint): 안정적

이러한 생애 주기 단계를 통해 개발자들은

각 지표의 상태를 이해하고,

적절한 시기에 피드백을 제공하거나 조치를 취할 수 있습니다.

각 단계는 지표의 발전과 사용자 경험 개선에 중요한 역할을 합니다.