Core Web Vitals 측정항목 기준점을 정의하는 방법

Core Web Vitals 기준점의 근거가 되는 연구 및 방법론

Bryan McQuade

Barry Pollard

게시일: 2020년 5월 21일

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

복습: Core Web Vitals 측정항목 및 기준점

Core Web Vitals는 최대 콘텐츠 페인트 (LCP), 다음 페인트에 대한 상호작용 (INP), 누적 레이아웃 이동 (CLS)이라는 세 가지 측정항목으로 구성됩니다. 각 측정항목은 사용자 환경의 서로 다른 측면을 측정합니다. LCP는 인지된 로드 속도를 측정하고 페이지의 기본 콘텐츠가 로드되었을 가능성이 높은 페이지 로드 타임라인의 지점을 표시합니다. INP는 응답성을 측정하고 사용자가 페이지와 상호작용하려고 할 때 느끼는 경험을 수치화합니다. CLS는 시각적 안정성을 측정하고 표시되는 페이지 콘텐츠의 예기치 않은 레이아웃 이동의 양을 수치화합니다.

각 Core Web Vitals 측정항목에는 실적을 '좋음', '개선 필요', '느림'으로 분류하는 기준이 연결되어 있습니다.

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

Core Web Vitals 측정항목 기준점 기준

이 섹션에서는 Core Web Vitals 측정항목 기준을 평가하기 위한 기준을 살펴봅니다. 후속 섹션에서는 이러한 기준을 적용하여 각 측정항목의 임곗값을 선택하는 방법을 자세히 설명합니다. 향후 Google은 웹에서 우수한 사용자 환경을 측정하는 기능을 더욱 개선하기 위해 기준과 기준점을 개선하고 추가할 예정입니다.

고품질 사용자 환경

Google의 주요 목표는 사용자와 사용자 환경 품질을 최적화하는 것입니다. 이를 고려하여 Google은 Core Web Vitals '좋음' 기준점을 충족하는 페이지가 고품질 사용자 환경을 제공하도록 하기 위해 노력하고 있습니다.

Google에서는 고품질 사용자 경험과 관련된 기준을 파악하기 위해 인간의 지각과 HCI 연구를 참고합니다. 이 연구는 고정된 단일 기준점을 사용하여 요약되는 경우가 있지만, 기본 연구는 일반적으로 값 범위로 표현됩니다. 예를 들어 사용자가 포커스를 잃기 전에 일반적으로 기다리는 시간에 관한 연구는 1초로 설명되는 경우가 있지만, 기본 연구는 실제로 수백 밀리초에서 여러 초까지의 범위로 표현됩니다. 인식 기준점이 사용자와 컨텍스트에 따라 다르다는 사실은 집계되고 익명처리된 Chrome 측정항목 데이터에서도 확인할 수 있습니다. 이 데이터는 사용자가 페이지 로드를 중단하기 전에 웹페이지에서 콘텐츠가 표시될 때까지 기다리는 시간이 일정하지 않다는 것을 보여줍니다. 오히려 이 데이터는 원활하고 연속적인 분포를 보여줍니다. 인간의 지각 기준점과 관련 HCI 연구에 대해 자세히 알아보려면 웹 속도 측정항목의 과학을 참고하세요.

특정 측정항목에 관한 관련 사용자 경험 연구가 있고 문헌에서 값 범위에 대한 합리적인 합의가 이루어진 경우 이 범위를 입력으로 사용하여 임곗값 선택 프로세스를 안내합니다. 누적 레이아웃 전환과 같은 새로운 측정항목의 경우와 같이 관련 사용자 환경 연구를 사용할 수 없는 경우 대신 측정항목의 여러 후보 기준점을 충족하는 실제 페이지를 평가하여 우수한 사용자 환경을 제공하는 기준점을 파악합니다.

기존 웹 콘텐츠로 달성 가능

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

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

반대로 소수의 출처만 충족하지 못하는 실적 수준을 파악하여 '나쁨' 기준점을 설정합니다. '나쁨' 기준점을 정의하는 데 관련된 연구가 없는 한 기본적으로 실적이 가장 나쁜 출처의 10~30% 가 '나쁨'으로 분류됩니다.

기기마다 기준을 동일하게 적용할지 아니면 다르게 적용할지 여부

모바일과 데스크톱 사용은 일반적으로 기기 기능과 네트워크 안정성 측면에서 매우 다른 특성을 보입니다. 이는 '달성 가능성' 기준에 큰 영향을 미치므로 각 기준에 대해 별도의 기준을 고려해야 합니다.

그러나 달성 가능성 기준이 기기에 따라 다르더라도 사용자의 우수 또는 열악한 환경에 대한 기대치는 기기에 따라 다르지 않습니다. 이러한 이유로 핵심 웹 성능 보고서 권장 기준점은 기기에 따라 구분되지 않으며 동일한 기준점이 두 가지 모두에 사용됩니다. 또한 이 방법을 사용하면 임곗값을 더 쉽게 이해할 수 있습니다.

또한 기기가 항상 한 카테고리에 잘 들어맞는 것은 아닙니다. 기기 폼 팩터, 처리 능력 또는 네트워크 상태를 기반으로 해야 하나요? 임곗값을 동일하게 설정하면 이러한 복잡성을 피할 수 있는 부수적인 이점이 있습니다.

휴대기기의 제약 조건이 더 많으므로 대부분의 기준점은 모바일 달성 가능성을 기반으로 설정됩니다. 이는 모든 기기 유형에 걸친 실제 공동 기준점이 아니라 모바일 기준점을 나타내는 것일 가능성이 큽니다. 하지만 대부분의 사이트에서 모바일이 트래픽의 대부분을 차지하는 경우가 많으므로 이 문제는 크게 우려되지 않습니다.

기준에 대한 최종 의견

후보 기준점을 평가할 때 기준이 서로 충돌하는 경우가 있는 것으로 확인되었습니다. 예를 들어 지속적으로 달성 가능한 기준점과 지속적으로 우수한 사용자 환경을 보장하는 기준점 사이에는 긴장이 있을 수 있습니다. 또한 인간 인식 연구는 일반적으로 다양한 값을 제공하고 사용자 행동 측정항목은 행동의 점진적인 변화를 보여주므로 측정항목에 대한 단일 '올바른' 기준점이 없는 경우가 많습니다. 따라서 Google은 핵심 성능 보고서에 대해 기준을 가장 잘 충족하는 기준점을 선택하는 동시에, 완벽한 기준점은 없으며 때로는 여러 가지 적절한 후보 기준점 중에서 선택해야 할 수도 있음을 인식하고 있습니다. '완벽한 기준점은 무엇인가요?'라는 질문 대신 '어떤 기준점이 가장 잘 충족되나요?'라는 질문에 초점을 맞췄습니다.

백분위수 선택

앞서 언급한 바와 같이 페이지 또는 사이트의 전반적인 실적을 분류하기 위해 Google에서는 해당 페이지 또는 사이트의 모든 방문 중 75번째 백분위수 값을 사용합니다. 75번째 백분위수는 두 가지 기준에 따라 선택되었습니다. 첫째, 백분위수는 페이지 또는 사이트 방문의 대부분이 타겟 성능 수준을 경험했음을 나타내야 합니다. 두 번째로, 선택한 백분위수의 값이 외부값의 영향을 지나치게 받아서는 안 됩니다.

이러한 목표는 서로 다소 상반됩니다. 첫 번째 목표를 달성하려면 일반적으로 백분위수가 더 높은 것이 좋습니다. 그러나 백분위수가 높을수록 결과 값이 외부값의 영향을 받을 가능성이 높아집니다. 사이트 방문이 불안정한 네트워크 연결에서 이루어져 LCP 샘플이 지나치게 커지는 경우가 있습니다. 이러한 예외 샘플에 의해 사이트 분류가 결정되는 것은 바람직하지 않습니다. 예를 들어 95번째와 같은 높은 백분위수를 사용하여 방문 수가 100인 사이트의 실적을 평가하는 경우, 95번째 백분위수 값이 외부값의 영향을 받기 위해 필요한 외부값 샘플은 5개에 불과합니다.

이러한 목표는 약간 상반되므로 분석한 결과 75번째 백분위수가 적절한 균형을 이룬다고 결론지었습니다. 75번째 백분위수를 사용하면 사이트 방문의 대부분 (4명 중 3명)에서 타겟 성능 수준 이상을 경험했음을 알 수 있습니다. 또한 75번째 백분위수 값은 이상점의 영향을 덜 받습니다. 위의 예로 돌아가서 방문이 100회인 사이트의 경우 75번째 백분위수 값이 외부값의 영향을 받으려면 방문 중 25회가 큰 외부값 샘플을 보고해야 합니다. 샘플 100개 중 25개가 외부값일 수는 있지만 95번째 백분위수의 경우보다 가능성은 훨씬 낮습니다.

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

LCP 기준점은 다음과 같은 환경 품질 및 달성 가능성을 고려하여 설정되었습니다.

환경 품질

1초는 사용자가 태스크에 대한 집중력을 잃기 시작하기 전에 기다리는 시간으로 자주 언급됩니다. 관련 연구를 자세히 살펴본 결과, 1초는 대략 수백 밀리초에서 수초에 이르는 값의 범위를 설명하는 근사치인 것으로 확인되었습니다.

1초 기준점으로 일반적으로 인용되는 두 가지 출처는 Card 외 및 Miller입니다. 카드는 뉴얼의 통합된 인지 이론을 인용하여 1초의 '즉각적인 응답' 기준점을 정의합니다. 뉴얼은 즉각적인 반응을 '약 1초 (즉, 약 0.3초~3초) 이내에 어떤 자극에 대해 취해야 하는 반응'이라고 설명합니다. 이는 Newell의 '인지에 대한 실시간 제약 조건'에 관한 논의에 따른 것으로, 여기서 '인지 고려사항을 불러일으키는 환경과의 상호작용은 초 단위로 발생'하며, 이는 대략 0.5초에서 2~3초에 해당합니다. 1초 기준점으로 흔히 인용되는 또 다른 출처인 밀러는 '인간이 기계 통신을 통해 수행할 수 있고 수행할 작업의 특성은 응답 지연이 2초를 초과하면 심각하게 달라지며 1초 정도 더 연장될 수 있습니다.'라고 말합니다.

밀러와 카드의 연구에 따르면 사용자가 포커스를 잃기 전에 기다리는 시간은 대략 0.3~3초 범위로, 이는 LCP '양호' 기준점이 이 범위에 있어야 함을 시사합니다. 또한 기존의 콘텐츠가 포함된 첫 페인트 '양호' 기준점이 1초이고 최대 콘텐츠 렌더링 시간이 일반적으로 콘텐츠가 포함된 첫 페인트 후에 발생한다는 점을 고려하여 후보 LCP 기준점 범위를 1초에서 3초로 제한합니다. 이 범위에서 기준을 가장 잘 충족하는 임곗값을 선택하기 위해 다음으로 이러한 후보 임곗값의 달성 가능성을 살펴봅니다.

달성 가능성

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

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

또한 최적화된 사이트에서 선택한 임곗값을 일관되게 달성할 수 있도록 웹에서 실적이 우수한 사이트의 LCP 실적을 분석하여 이러한 사이트에서 일관되게 달성할 수 있는 임곗값을 결정합니다. 구체적으로는 실적이 우수한 사이트의 75번째 백분위수에서 일관되게 달성할 수 있는 기준점을 파악하는 것을 목표로 합니다. 1.5초 및 2초 기준점은 일관되게 달성할 수 없지만 2.5초 기준점은 일관되게 달성할 수 있는 것으로 확인되었습니다.

LCP의 '나쁨' 기준점을 식별하기 위해 CrUX 데이터를 사용하여 대부분의 출처에서 충족하는 기준점을 식별합니다.

4초 기준을 적용하면 휴대전화 출처의 약 26% 와 데스크톱 출처의 21% 가 나쁘게 분류됩니다. 이는 10~30%의 타겟 범위에 속하므로 4초가 허용되는 '나쁨' 기준점이라고 결론 내릴 수 있습니다.

따라서 2.5초는 최대 콘텐츠 페인트의 적절한 '양호' 기준점이며 4초는 적절한 '나쁨' 기준점이라고 결론을 내릴 수 있습니다.

다음 페인트에 대한 상호작용

INP 기준점은 다음과 같은 환경 품질 및 달성 가능성을 고려하여 설정되었습니다.

환경 품질

연구에 따르면 최대 100ms의 시각적 피드백 지연은 사용자 입력과 같은 관련 소스에서 발생하는 것으로 인식됩니다. 이는 이상적인 Interaction to Next Paint '좋음' 기준점이 이와 비슷할 것임을 시사합니다.

흔히 인용되는 Jakob Nielsen의 응답 시간: 3가지 중요한 제한에서는 사용자가 시스템이 즉각적으로 반응한다고 느끼는 한도를 0.1초로 정의합니다. 닐슨은 밀러와 카드를 인용하며, 밀러와 카드는 미쇼트의 1962년 저서 인과성의 지각을 인용합니다. 미쇼의 연구에서 실험 참가자에게 '화면에 두 개의 객체가 표시됩니다. 객체 A가 출발하여 B쪽으로 이동합니다. B와 접촉하는 순간에 멈추고 B는 시작하여 A에서 멀어집니다." Michotte는 객체 A가 멈추는 시점과 객체 B가 움직이기 시작하는 시점 사이의 시간 간격을 변경합니다. 미쇼트는 최대 100ms의 지연 시간에 대해 참가자가 물체 A가 물체 B의 움직임을 일으킨다고 생각한다고 합니다. 대략 100ms~200ms의 지연의 경우 인과 관계에 대한 인식이 혼합되며 200ms를 초과하는 지연의 경우 객체 B의 움직임이 더 이상 객체 A에 의해 발생한 것으로 보이지 않습니다.

마찬가지로 밀러는 '제어 활성화에 대한 응답'의 응답 기준점을 '일반적으로 키, 스위치 또는 기타 제어 멤버의 움직임에 의해 제공되는 작업 표시로, 물리적으로 활성화되었음을 이 응답은…운영자가 유도한 기계적 작용의 일부로 인식되어야 합니다. 시간 지연: 0.1초 이하여야 합니다.' 및 '키를 누르는 것과 시각적 피드백 간의 지연은 0.1~0.2초 이하여야 합니다.'

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

이를 고려할 때 연구 결과 100ms가 웹 속도 측정항목의 '양호한' 다음 페인트와의 상호작용 기준점으로 나타났습니다. 또한 사용자가 300ms 이상의 지연 시간에 대해 품질이 낮다고 신고했으므로 이 지연 시간이 '나쁨' 기준점이 되는 것이 이상적입니다.

달성 가능성

CrUX의 데이터를 사용하면 웹의 대부분의 출처가 75번째 백분위수에서 200밀리초 INP '좋음' 기준을 충족하는 것으로 확인됩니다.

또한 사이트 방문의 상당 부분을 차지하는 하위 기기에서 INP를 통과할 수 있는지 여부에도 주의를 기울였습니다. 이를 통해 200ms 기준점이 적합함을 다시 한번 확인했습니다.

환경 품질 및 달성 가능성 기준에 관한 연구에서 뒷받침되는 100밀리초 기준점을 고려할 때 200밀리초가 우수한 환경을 제공하기 위한 합리적인 기준점이라고 결론 내렸습니다.

LCP의 '나쁨' 기준점을 파악하기 위해 CrUX 데이터를 사용하여 대부분의 출처에서 충족하는 기준점을 파악합니다.

따라서 '나쁨' 임계값을 300ms로 설정할 수 있습니다.

그러나 LCP 및 CLS와 달리 INP는 인기도와 반비례 관계입니다. 인기가 높은 사이트는 종종 더 복잡하여 INP가 더 높을 가능성이 높습니다. 인터넷 탐색의 대부분을 차지하는 상위 10,000개 사이트를 살펴보면 더 복잡한 그림이 나타납니다.

모바일에서 300ms의 '나쁨' 기준점을 사용하면 인기 사이트의 대부분이 '나쁨'으로 분류되어 달성 가능성 기준이 늘어나지만, 500ms는 사이트의 10~30% 에 더 적합합니다. 또한 이러한 사이트의 경우 200ms '양호' 기준점이 더 엄격하지만, 여전히 23% 의 사이트가 모바일에서 이 기준을 통과하므로 10% 의 최소 통과율 기준을 충족합니다.

따라서 200ms는 대부분의 사이트에 적절한 '양호' 기준점이며 500ms 초과는 적절한 '나쁨' 기준점이라고 결론짓습니다.

누적 레이아웃 변경

CLS 기준점은 다음과 같은 환경 품질 및 달성 가능성을 고려하여 설정되었습니다.

환경 품질

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

달성 가능성

CrUX 데이터에 따르면 출처의 거의 50% 가 CLS가 0.05 이하입니다.

CrUX 데이터에 따르면 0.05가 적절한 CLS '양호' 기준점일 수 있지만, 방해가 되는 레이아웃 전환을 피하기 어려운 사용 사례가 있음을 알고 있습니다. 예를 들어 소셜 미디어 삽입과 같은 서드 파티 삽입된 콘텐츠의 경우 로드가 완료될 때까지 삽입된 콘텐츠의 높이를 알 수 없는 경우가 있으며, 이로 인해 레이아웃이 0.05를 초과하여 이동할 수 있습니다. 따라서 많은 출처가 0.05 기준을 충족하지만 약간 느슨한 CLS 기준인 0.1이 환경 품질과 달성 가능성 간에 더 나은 균형을 이룬다고 결론 내릴 수 있습니다. 앞으로 웹 생태계에서 서드 파티 삽입으로 인한 레이아웃 전환을 해결하는 솔루션을 찾을 수 있기를 바랍니다. 이를 통해 향후 Core Web Vitals의 반복에서 더 엄격한 CLS '양호' 기준점인 0.05 또는 0을 사용할 수 있을 것입니다.

또한 CLS의 '나쁨' 기준점을 결정하기 위해 CrUX 데이터를 사용하여 대부분의 출처에서 충족하는 기준점을 파악했습니다.

기준이 0.25인 경우 휴대전화 출처의 약 20% 와 데스크톱 출처의 18% 가 '나쁨'으로 분류됩니다. 이는 10~30%의 타겟 범위에 속하므로 0.25가 허용되는 '나쁨' 기준점이라고 결론지었습니다.