코어 웹 바이탈 측정항목 기준점 정의

코어 웹 바이탈 기준점의 기반이 되는 연구 및 방법론

브라이언 맥퀘이드
브라이언 맥퀘이드

코어 웹 바이탈은 웹에서 실제 사용자 환경의 중요한 측면을 측정하는 필드 측정항목 집합입니다. 코어 웹 바이탈에는 측정항목과 각 측정항목의 목표 기준점이 포함되어 있어 개발자가 사이트 환경이 '양호', '개선이 필요함' 또는 '나쁨'인지 정성적으로 파악할 수 있습니다. 이 게시물에서는 코어 웹 바이탈 측정항목의 기준점을 선택하는 데 일반적으로 사용되는 접근 방식과 특정 코어 웹 바이탈 측정항목의 기준점이 선택된 방식을 설명합니다.

복습: 코어 웹 바이탈 측정항목 및 기준

2020년의 코어 웹 바이탈은 최대 콘텐츠 페인트 (LCP), 최초 입력 지연 (FID), 누적 레이아웃 변경 (CLS)이라는 세 가지 측정항목입니다. 각 측정항목은 사용자 환경의 다양한 측면을 측정합니다. LCP는 인지된 로드 속도를 측정하고 페이지의 주요 콘텐츠가 로드되었을 가능성이 있는 페이지 로드 타임라인의 지점을 표시합니다. FID는 반응성을 측정하고 사용자가 페이지와 처음 상호작용하려고 할 때 느끼는 경험을 수치화하며, CLS는 시각적 안정성을 측정하고 표시되는 페이지 콘텐츠의 예상치 못한 레이아웃 변화의 양을 정량화합니다.

각 코어 웹 바이탈 측정항목에는 성능을 '좋음', '개선이 필요함' 또는 '나쁨'으로 분류하는 관련 기준이 있습니다.

최대 콘텐츠 렌더링 시간 기준 권장사항 최초 입력 반응 시간 기준 권장사항 누적 레이아웃 변경 기준점 권장사항
  양호 나쁨 백분위수
콘텐츠가 포함된 최대 페인트 2,500밀리초 이하 >4000밀리초 75
최초 입력 반응 시간 100밀리초 이하 300밀리초 초과 75
누적 레이아웃 변경 0.1 이하 0.25 초과 75

또한 페이지 또는 사이트의 전반적인 실적을 분류하기 위해 해당 페이지 또는 사이트에 대한 모든 페이지 조회의 75번째 백분위수 값을 사용합니다. 즉, 사이트의 페이지 조회수 중 75% 이상이 '좋음' 기준점을 충족하면 해당 측정항목은 해당 측정항목에 대해 '양호한' 실적을 달성한 것으로 분류됩니다. 반대로 페이지 조회수의 25% 이상이 '나쁨' 기준점을 충족하면 사이트 성능이 '나쁨'으로 분류됩니다. 예를 들어 2초인 75번째 백분위수 LCP는 '양호'로 분류되고 75번째 백분위수 LCP 5초는 '나쁨'으로 분류됩니다.

코어 웹 바이탈 측정항목 기준점의 기준

코어 웹 바이탈 측정항목의 기준을 설정할 때 먼저 각 기준이 충족해야 하는 기준을 파악했습니다. 아래에는 Google에서 2020년 코어 웹 바이탈 측정항목 기준점을 평가하는 데 사용한 기준을 설명합니다 이후 섹션에서는 이러한 기준이 2020년에 각 측정항목의 기준을 선택하는 데 어떻게 적용되었는지 자세히 설명합니다. 향후 몇 년 동안은 웹에서의 우수한 사용자 환경을 측정하는 기능을 더욱 개선하기 위해 기준 및 기준을 개선하고 추가할 예정입니다.

고품질 사용자 환경

Google의 주요 목표는 사용자와 사용자 경험의 질에 맞게 최적화하는 것입니다. 이를 감안하여 Google은 코어 웹 바이탈의 '양호한' 기준을 충족하는 페이지가 고품질 사용자 환경을 제공하도록 하고자 합니다.

Google은 고품질 사용자 환경과 관련된 임곗값을 식별하기 위해 인간의 인식과 HCI 연구를 살펴봅니다. 이 연구는 고정된 단일 임곗값을 사용하여 요약되는 경우도 있지만, 기본적인 연구는 일반적으로 값의 범위로 표현됩니다. 예를 들어 사용자가 포커스를 잃기 전에 일반적으로 기다리는 시간에 관한 연구는 1초로 설명되는 반면, 기본 연구는 실제로 수백 밀리초에서 수 초에 이르는 범위로 표현되기도 합니다. 인식 기준이 사용자와 컨텍스트에 따라 달라진다는 사실은 집계 및 익명처리된 Chrome 측정항목 데이터를 통해서도 추가로 뒷받침됩니다. 이는 사용자가 웹페이지 로드를 취소하기 전에 콘텐츠가 표시될 때까지 기다리는 시간이 한 번도 없다는 것을 보여줍니다. 그보다는 매끄럽고 연속적인 분포를 보여줍니다. 인간의 인식 임곗값과 관련 HCI 연구에 대한 자세한 내용은 웹 바이탈의 과학을 참고하세요.

특정 측정항목에 대한 관련 사용자 환경 연구가 있고 문헌에 나와 있는 값의 범위에 대해 합리적인 합의가 있는 경우, 이 범위를 기준 선택 프로세스의 지침으로 사용합니다. 관련 사용자 환경 연구를 사용할 수 없는 경우(예: 누적 레이아웃 변경 등) Google에서는 측정항목에 대해 다른 후보 기준점을 충족하는 실제 페이지를 평가하여 우수한 사용자 환경을 제공하는 임곗값을 식별합니다.

기존 웹 콘텐츠로 달성 가능

또한 사이트 소유자가 사이트를 최적화하여 '양호'한 기준점을 충족할 수 있도록 하려면 웹의 기존 콘텐츠에도 이러한 기준점을 충족할 수 있어야 합니다. 예를 들어 0밀리초가 이상적인 LCP '양호한' 임계값이고 즉각적인 로드 경험을 제공하지만 네트워크 및 기기 처리 지연 시간으로 인해 대부분의 경우 0밀리초 임계값을 실질적으로 달성할 수 없습니다. 따라서 0밀리초는 코어 웹 바이탈의 LCP '양호' 기준점이 아닙니다.

후보 코어 웹 바이탈의 '양호' 기준점을 평가할 때 Google에서는 Chrome 사용자 환경 보고서(CrUX)의 데이터를 기반으로 이러한 기준점을 달성할 수 있는지 확인합니다. 기준점을 달성할 수 있는지 확인하려면 현재 출처의 10% 이상이 '좋음' 기준점을 충족해야 합니다. 또한 최적화된 사이트가 필드 데이터의 가변성으로 인해 잘못 분류되는 것을 방지하기 위해 잘 최적화된 콘텐츠가 '양호' 기준점을 일관되게 충족하는지 확인합니다.

반대로, 소수의 출처만 현재 충족되지 않는 성능 수준을 식별하여 '나쁨' 기준점을 설정합니다. '느림' 임곗값 정의와 관련된 연구가 없는 한, 기본적으로 실적이 가장 저조한 10~30% 의 출처가 '나쁨'으로 분류됩니다.

기준에 대한 최종 의견

후보 임곗값을 평가할 때 기준이 서로 충돌하는 경우가 있는 것으로 확인되었습니다. 예를 들어 일관되게 달성할 수 있는 기준과 일관되게 우수한 사용자 환경을 보장하는 기준 사이에는 긴장이 존재할 수 있습니다. 또한 인간의 인식 연구는 일반적으로 다양한 값을 제공하고 사용자 행동 측정항목은 행동의 점진적인 변화를 보여준다는 점을 감안할 때 측정항목에 대한 하나의 '올바른' 기준점은 없는 경우가 많습니다. 따라서 2020 코어 웹 바이탈에 관한 Google의 접근 방식은 위의 기준을 가장 잘 충족하는 기준점을 선택하는 동시에 완벽한 기준점은 없으며 때로는 여러 합리적인 후보 기준점 중에서 선택해야 할 수도 있음을 인식하는 것입니다. '완벽한 임곗값은 무엇인가요?' 대신 '어떤 후보 임곗값이 우리의 기준에 가장 잘 부합하는가?'에 집중했습니다.

백분위수 선택

앞에서 설명한 것처럼 페이지 또는 사이트의 전반적인 실적을 분류하기 위해 해당 페이지 또는 사이트의 전체 방문 수의 75번째 백분위수 값을 사용합니다. 75번째 백분위수는 두 가지 기준에 따라 선택되었습니다. 첫째, 백분위수는 페이지나 사이트에 대한 대부분의 방문에서 목표 수준의 실적을 경험했는지 확인해야 합니다. 둘째, 선택한 백분위수의 값이 이상점에 과도한 영향을 받으면 안 됩니다.

이러한 목표는 서로 다소 상충합니다. 첫 번째 목표를 달성하기 위해서는 일반적으로 백분위수가 높은 것이 좋습니다 하지만 백분위수가 높을수록 결과 값이 이상점의 영향을 받을 가능성도 커집니다. 사이트 방문이 불안정한 네트워크 연결로 인해 LCP 샘플이 지나치게 커지는 경우, 이러한 이상점 샘플이 사이트 분류를 결정하지 않도록 해야 합니다. 예를 들어 95번째 백분위수와 같이 높은 백분위수를 사용해 방문이 100회인 사이트의 실적을 평가하는 경우, 이상점의 영향을 받는 95번째 백분위수 값에 대해 이상점 샘플 5개만 필요합니다.

이러한 목표가 다소 상충한다는 점을 감안할 때, Google은 분석 후 75번째 백분위수가 적절한 균형을 이루고 있다고 판단했습니다. 75번째 백분위수를 사용함으로써 대부분의 사이트 방문 (3/4)이 목표 수준의 실적 이상을 경험했음을 알 수 있습니다. 또한 75번째 백분위수 값은 이상점의 영향을 받을 가능성이 작습니다. 위의 예로 돌아가서, 100회의 방문이 있는 사이트에서 25회의 방문은 이상점의 영향을 받으려면 75번째 백분위수의 값에 대해 큰 이상점 샘플을 보고해야 합니다. 100개의 샘플 중 25개가 이상점일 가능성은 있지만 95번째 백분위수의 사례보다 가능성은 훨씬 낮습니다.

콘텐츠가 포함된 최대 페인트

경험의 질

1초는 사용자가 작업에 집중하지 못하는 시점까지 기다리는 시간으로 종종 언급됩니다. 관련 연구를 자세히 살펴보면 1초가 약 수백 밀리초에서 몇 초까지 값 범위를 설명하기 위한 근사값인 것을 확인했습니다.

1초 임곗값과 관련하여 일반적으로 인용되는 두 가지 소스는 카드 외밀러입니다. 카드는 Newell의 Unified Theories of Cognition를 인용하여 1초의 '즉시 응답' 임곗값을 정의합니다. 뉴웰은 즉각적인 응답을 '약 1초 이내 (즉, 대략 0.3초~3초 이내에) 어떤 자극에 대해 이루어져야 하는 응답'이라고 설명합니다. 이는 뉴웰이 언급한 '인지의 실시간 제약'에 대한 설명으로 이어지며, 여기에는 '인지적 고려를 불러일으키는 환경과의 상호작용은 몇 초 단위로 발생'하며 그 범위는 대략 0.5~2~3초입니다. 1초 임곗값에 대해 흔히 인용되는 또 다른 출처인 밀러는 '인간이 기계 통신으로 수행할 수 있고 앞으로 수행할 작업이 응답 지연이 2초 이상이면 성격이 크게 바뀌고 1초 정도 더 연장될 수 있다'고 언급했습니다.

Miller and Card의 연구에서는 사용자가 포커스를 잃기 전에 기다리는 시간(약 0.3~3초)을 범위로 설명합니다. 이는 LCP '양호' 기준점이 이 범위 내에 있어야 함을 알 수 있습니다. 또한 기존의 첫 콘텐츠 페인트 '양호' 기준점이 1초이고 최대 콘텐츠 페인트는 일반적으로 콘텐츠가 포함된 페인트 이후에 발생한다는 점을 감안하여 후보 LCP 기준점 범위를 1초에서 3초로 추가로 제한합니다. 기준을 가장 잘 충족하는 이 범위의 임곗값을 선택하기 위해 아래에서 이러한 후보 임곗값의 달성 가능성을 살펴봅니다.

달성 가능성

CrUX의 데이터를 사용하여 후보 LCP '양호' 기준점을 충족하는 웹 출처의 비율을 파악할 수 있습니다.

'양호'로 분류된 CrUX 출처의 비율(후보 LCP 기준점)

  1초 1.5초 2초 2.5초 3초
phone 3.5% 13% 27% 42% 55%
데스크톱 6.9% 19% 36% 51% 64%

10% 미만의 출처가 1초 기준점을 충족하지만 1.5~3초의 다른 모든 기준점은 최소 10% 의 출처가 '양호' 기준점을 충족하므로 여전히 유효한 후보라는 요구사항을 충족합니다.

또한 최적화가 잘된 사이트에서도 선택한 기준점을 일관되게 달성할 수 있도록 Google에서는 웹 전반에서 성능이 우수한 사이트의 LCP 성능을 분석하여 이러한 사이트에서 일관되게 달성할 수 있는 기준점을 파악합니다. 특히 실적이 우수한 사이트의 75번째 백분위수에서 일관되게 달성할 수 있는 임곗값을 식별하는 것을 목표로 합니다. 1.5초 및 2초 기준점은 일관되게 달성할 수 없지만 2.5초는 일관되게 달성할 수 있습니다.

LCP의 '불량' 임곗값을 식별하기 위해 CrUX 데이터를 사용하여 대부분의 출처에서 충족한 임곗값을 식별합니다.

'불량'으로 분류된 CrUX 출처의 비율(후보 LCP 기준점)

  3초 3.5초 4초 4.5초 5초
phone 45% 35% 26% 20% 15%
데스크톱 36% 26% 19% 14% 10%

4초 기준의 경우 휴대전화 출처의 약 26% 와 데스크톱 출처의 21% 가 나쁨으로 분류됩니다. 이는 목표 범위인 10~30%에 해당하므로 4초가 허용 가능한 '불량' 임계값이라고 결론을 내렸습니다.

따라서 2.5초는 합리적인 '양호' 기준점이며 4초는 콘텐츠가 포함된 최대 페인트에 관한 합리적인 '불량' 기준점이라고 결론을 내릴 수 있습니다.

최초 입력 반응 시간

경험의 질

연구 결과에 따르면 최대 약 100ms의 시각적 피드백 지연이 사용자 입력과 같은 관련 소스에 의해 발생한 것으로 인식됩니다. 이는 100ms의 최초 입력 반응이 '양호'한 임계값이 최소 막대로 적절하다는 것을 의미합니다. 입력 처리 지연이 100ms를 초과하면 다른 처리 및 렌더링 단계가 제시간에 완료될 가능성이 없습니다.

제이콥 닐슨이 자주 인용한 응답 시간: 3가지 중요한 제한에 따르면 사용자가 시스템이 즉각적으로 반응한다고 느낄 수 있는 제한값은 0.1초로 정의합니다. 닐슨은 Michotte의 1962년작 The Perception of Causality를 인용한 Miller와 Card를 언급합니다. Michotte의 연구에서 실험 참가자는'한 화면에 있는 두 개의 객체'를 보게 됩니다. 객체 A가 출발하여 B를 향해 이동합니다. 그것은 B와 접촉하는 순간 멈추고, B는 그런 다음 시작하여 A에서 멀어집니다." Michotte는 객체 A가 중지된 시점부터 객체 B가 이동을 시작하는 시점 사이의 시간 간격을 변경합니다. Michotte는 최대 약 100ms의 지연 시간에서 참가자가 객체 A가 객체 B의 움직임을 유발한다는 것을 발견합니다. 약 100ms에서 200ms 사이의 지연 시간에서는 인과관계가 혼합되어 있고, 200ms를 초과하는 지연의 경우 객체 B의 움직임이 더 이상 객체 A로 인해 발생한 것으로 보이지 않습니다.

마찬가지로 밀러는 '활성화 제어 응답'의 응답 임계값을 '일반적으로 키, 스위치 또는 물리적으로 활성화되었음을 알리는 다른 제어 구성원의 이동을 통해 이루어지는 작업의 표시'로 정의합니다. 이 응답은 운영자가 유도하는 기계 작업의 일부로 인식되어야 합니다. 시간 지연: 0.1초 이하여야 합니다.' 및 '키 누르기와 시각적 피드백 사이의 지연 시간은 0.1~0.2초를 초과하면 안 됩니다.'

최근의 Temorly Perfect Virtual Button에서 Kaaresoja 등은 터치스크린의 가상 버튼 터치와 다양한 지연으로 인해 버튼이 터치되었음을 나타내는 후속 시각적 피드백 사이의 동시성에 대한 인식을 조사했습니다. 버튼 누르기와 시각적 피드백 사이의 지연이 85ms 이하인 경우 참가자들은 시각적 피드백이 버튼을 누를 때마다 동시에 표시되었다고 보고했습니다. 또한 100ms 이하의 지연의 경우 참여자는 버튼 누르기의 품질이 지속적으로 높다고 보고했습니다. 인지된 품질은 100ms에서 150ms의 지연으로 떨어지고 300ms의 지연에서는 매우 낮은 수준에 도달했습니다.

위의 내용을 감안할 때 연구 결과가 웹 바이탈의 적절한 최초 입력 지연 임곗값으로 약 100ms의 값 범위를 나타낸다고 결론지었습니다. 또한 사용자가 300ms 이상의 지연에 대해 낮은 품질 수준을 보고한 점을 감안할 때 300ms는 합리적인 '불량' 임계값으로 표시됩니다.

달성 가능성

CrUX의 데이터를 사용하여 대다수의 웹 출처가 75번째 백분위수에서 100ms FID '양호' 기준점을 충족함을 확인합니다.

FID 100ms 임계값에 대해 '양호'로 분류된 CrUX 출처의 비율

100ms
phone 78%
데스크톱 >99%

또한 웹 전체의 상위 사이트는 75번째 백분위수에서 이 임계값을 지속적으로 충족할 수 있습니다 (종종 95번째 백분위수에서 충족되는 경우도 있음).

위의 내용을 감안할 때 100ms가 FID에 대한 합리적인 '양호한' 임계값이라고 결론을 내렸습니다.

누적 레이아웃 변경

경험의 질

누적 레이아웃 변경 (CLS)은 페이지에 표시되는 콘텐츠가 얼마나 많이 이동하는지 측정하는 새로운 측정항목입니다. CLS가 새로 도입되었기 때문에 이 측정항목의 기준을 직접적으로 알릴 수 있는 연구는 없습니다. 따라서 사용자 기대치에 부합하는 임곗값을 식별하기 위해 레이아웃 변경의 양이 다른 실제 페이지를 평가하여 페이지 콘텐츠를 소비할 때 심각한 중단을 일으키기 전에 허용 가능한 것으로 인식되는 최대 이동량을 확인했습니다. 내부 테스트 결과, 0.15 이상에서의 변화 수준은 일관되게 지장을 주는 것으로 여겨지는 반면, 0.1 이하의 변화는 눈에 띄지만 지나치게 지장을 주지 않는 것으로 나타났습니다. 따라서 레이아웃 이동이 없는 것이 이상적이지만 0.1까지의 값이 '양호한' CLS 임곗값 후보라는 결론을 내렸습니다.

달성 가능성

CrUX 데이터에 따르면 출처의 거의 50% 가 CLS가 0.05 이하인 것을 알 수 있습니다.

'양호'로 분류된 CrUX 출처의 비율(후보 CLS 기준점)

  0.05 0.1 0.15
phone 49% 60% 69%
데스크톱 42% 59% 69%

CrUX 데이터는 0.05가 합리적인 CLS '양호' 기준점일 수 있음을 시사하지만, 현재 중단을 야기하는 레이아웃 변경을 방지하기 어려운 사용 사례가 있다는 것을 알고 있습니다. 예를 들어 소셜 미디어 삽입과 같은 서드 파티 삽입된 콘텐츠의 경우 삽입된 콘텐츠의 높이는 로드가 완료될 때까지 알 수 없는 경우가 있으며 이 경우 레이아웃 변경이 0.05보다 커질 수 있습니다. 따라서 많은 출처가 0.05 임곗값을 충족하지만 약간 덜 엄격한 CLS 임곗값인 0.1이 경험의 질과 달성 가능성 사이의 균형을 더 잘 잡는다고 결론지었습니다. Google은 앞으로 웹 생태계가 서드 파티 삽입으로 인한 레이아웃 변경을 처리하는 솔루션을 식별하여 향후 코어 웹 바이탈의 반복에서 더 엄격한 CLS '양호' 임곗값 0.05 또는 0을 사용할 수 있기를 바랍니다.

또한 CLS의 '불량' 임곗값을 판단하기 위해 CrUX 데이터를 사용하여 대부분의 출처에서 충족되는 임곗값을 식별했습니다.

'불량'으로 분류된 CrUX 출처의 비율(후보 CLS 기준점)

  0.15 0.2 0.25 0.3
phone 31% 25% 20% 18%
데스크톱 31% 23% 18% 16%

임곗값이 0.25이면 휴대전화 출처의 약 20%, 데스크톱 출처의 18% 가 '나쁨'으로 분류됩니다. 이는 Google의 목표 범위인 10~30%에 해당하므로 0.25가 허용 가능한 '나쁨' 임곗값이라고 결론을 내렸습니다.