레이아웃 변경 횟수 측정항목을 개선하기 위한 Google의 계획을 알아보고 의견을 보내주세요.
레이아웃 변경 횟수 (CLS)는 웹페이지의 시각적 안정성을 측정하는 측정항목입니다. 이 측정항목을 누적 레이아웃 변경이라고 합니다. 페이지 수명 동안 모든 개별 이동의 점수가 합산되기 때문입니다.
모든 레이아웃 변경은 열악한 사용자 경험을 제공하지만, 페이지가 더 오래 열려 있으면 문제가 됩니다. 이러한 이유로 Chrome 속도 측정항목팀은 페이지 방문 시간을 중립적으로 조정하기 위해 CLS 측정항목을 개선하기 위한 작업에 착수했습니다.
사용자가 로드 후 페이지를 스크롤하거나 탐색할 때 부정적인 경험을 하는 경우가 많으므로 전체 페이지 전체 기간에 걸쳐 사용자 환경에 초점을 맞추는 것이 중요합니다. 그러나 이러한 기능이 사용자가 일반적으로 오랫동안 열어 둔 페이지인 장기 페이지에 어떤 영향을 미치는지에 대한 우려가 있었습니다. 더 오래 열리는 경향이 있는 여러 유형의 페이지가 있습니다. 가장 일반적인 예로는 무한 스크롤 및 단일 페이지 애플리케이션이 있는 소셜 미디어 앱이 있습니다.
CLS 점수가 높은 장기 페이지의 내부 분석 결과, 대부분의 문제는 다음과 같은 패턴으로 인해 발생한 것으로 나타났습니다.
- 사용자가 스크롤할 때 콘텐츠를 이동하는 무한 스크롤러
- 자리표시자 또는 스켈레톤 패턴 없이 사용자 상호작용에 응답하여 UI를 업데이트하는 데 500밀리초 이상 걸리는 입력 핸들러
Google은 개발자가 이러한 사용자 환경을 개선하도록 권장하지만, 측정항목을 개선하고 가능한 접근 방식에 대한 의견을 수렴하기 위해 노력하고 있습니다.
새로운 측정항목이 더 나은지 어떻게 판단할 수 있을까요?
측정항목 설계를 본격적으로 알아보기에 앞서 다양한 실제 웹페이지와 사용 사례에 대한 아이디어를 평가하고자 했습니다. 먼저 소규모 사용자 연구를 설계했습니다.
먼저 다양한 웹사이트를 통한 34명의 사용자 경험을 동영상과 Chrome 트레이스로 녹화했습니다. 사용자 경험을 선택할 때 Google은 다음과 같은 몇 가지를 목표로 삼았습니다.
- 뉴스, 쇼핑 사이트 등 다양한 유형의 사이트
- 다양한 사용자 경험(예: 초기 페이지 로드, 스크롤, 단일 페이지 앱 탐색, 사용자 상호작용)
- 사이트에서 개별 레이아웃 변경의 횟수와 강도가 다양합니다.
- 레이아웃 변경 외에는 사이트에서 부정적인 경험이 거의 없습니다.
우리는 41명의 동료에게 한 번에 두 개의 동영상을 보도록 요청했고, 그 중 레이아웃 변경 측면에서 더 나은 동영상을 평가했습니다. 이 순위를 바탕으로 이상적인 사이트 순위 순서를 만들었습니다. 사용자 순위의 결과에 따르면, 대부분의 사용자와 마찬가지로 동료들도 로드 후, 특히 스크롤 및 단일 페이지 앱 탐색 시의 레이아웃 변경으로 인해 실제로 불편을 겪고 있다는 의심이 확인되었습니다. 이러한 활동 중에 일부 사이트가 다른 사이트보다 훨씬 더 나은 사용자 환경을 경험하는 것을 확인했습니다.
동영상과 함께 Chrome 트레이스를 기록했기 때문에 각 사용자 여정에서 개별 레이아웃 변경에 관한 모든 세부정보를 파악했습니다. 이를 사용하여 각 사용자 여정에 대한 각 아이디어의 측정항목 값을 계산했습니다. 이를 통해 각 측정항목 대안이 사용자 여정에 어떤 순위를 매겼는지, 이상적인 순위와 얼마나 다른지 확인할 수 있었습니다.
어떤 측정항목 아이디어를 테스트했나요?
기간 설정 전략
페이지에서 여러 레이아웃 변경이 밀접하게 함께 있는 경우가 많습니다. 새 콘텐츠가 조각되어 있을 때 요소가 여러 번 이동할 수 있기 때문입니다. 그래서 교대 근무를 그룹화하는 기술을 시도해 보았습니다. 이를 달성하기 위해 세 가지 기간 설정 접근 방식을 살펴봤습니다.
- 텀블링 윈도우
- 슬라이딩 기간
- 세션 기간
각 예에서 페이지의 레이아웃 변경은 시간이 지남에 따라 심각도가 다릅니다. 각 파란색 막대는 단일 레이아웃 변경을 나타내고 길이는 해당 이동의 점수를 나타냅니다. 이미지는 다양한 기간 설정 전략이 시간 경과에 따른 레이아웃 변화를 그룹화하는 방식을 보여줍니다.
텀블링 윈도우
가장 간단한 방법은 페이지를 동일한 크기의 청크로 분할하는 것입니다. 이를 텀블링 기간이라고 합니다 위에서 네 번째 막대는 실제로 두 번째 텀블링 창으로 그룹화되어야 하는 것처럼 보이지만, 창은 모두 고정된 크기이므로 첫 번째 창에 대신 표시됩니다. 페이지에서 로드 시간이나 사용자 상호작용이 약간 차이가 나는 경우 동일한 레이아웃 변경이 텀블링 창 경계의 다른 측면에 발생할 수 있습니다.
슬라이딩 기간
동일한 길이의 가능한 그룹을 더 많이 볼 수 있는 접근 방식은 시간이 지남에 따라 잠재적 기간을 지속적으로 업데이트하는 것입니다. 위의 이미지는 한 번에 하나의 슬라이딩 기간을 보여주지만 가능한 모든 슬라이딩 윈도우 또는 그 하위 집합을 살펴보고 측정항목을 만들 수 있습니다.
세션 기간
레이아웃 변경이 폭주하는 페이지 영역을 식별하는 데 집중하고 싶다면 한 번의 전환 시 각 창을 시작하고 레이아웃 변경 사이에 특정 크기의 간격이 발생할 때까지 계속 확장할 수 있습니다. 이 접근 방식은 레이아웃 변경을 함께 그룹화하고 이동하지 않는 대부분의 사용자 환경을 무시합니다. 잠재적인 문제 중 하나는 레이아웃 변경에 차이가 없으면 세션 기간에 기반한 측정항목이 현재 CLS 측정항목과 마찬가지로 무제한으로 증가할 수 있다는 점입니다. 최대 창 크기로 이를 시도했습니다.
창 크기
이 측정항목은 실제 기간의 크기에 따라 매우 다른 결과를 제공할 수 있으므로 여러 가지 창 크기를 시도했습니다.
- 각 이동을 자체 기간으로 사용 (창 없음)
- 100ms
- 300ms
- 1초
- 5초
요약
다양한 기간을 요약하는 여러 방법을 시도해 보았습니다.
백분위수
최대 기간 값과 95번째 백분위수, 75번째 백분위수, 중앙값을 살펴봤습니다.
평균
평균 윈도우 값을 살펴보았습니다.
예산
사용자가 알아차리지 못하는 최소 레이아웃 변경 점수가 있는지 궁금하여 이 '예산'에 대한 레이아웃 변경만 점수에서 계산할 수 있었습니다. 따라서 다양한 잠재적 '예산' 값에 대해 예산 대비 변동 비율과 예산 대비 총 이동 점수를 살펴봤습니다.
기타 전략
또한 전체 레이아웃 변경을 페이지에 머문 시간으로 나눈 값, 최악의 개별 이동 횟수의 평균값과 같이 기간을 포함하지 않은 여러 전략도 살펴봤습니다.
초기 결과
전체적으로 위 아이디어의 순열을 바탕으로 145개의 서로 다른 측정항목 정의를 테스트했습니다. 각 측정항목에 대해 측정항목의 점수를 기준으로 모든 사용자 여정의 순위를 매기고 이상적인 순위에 얼마나 근접했는지를 기준으로 측정항목의 순위를 지정했습니다.
또한 기준을 알아보기 위해 현재 CLS 점수를 기준으로 모든 사이트의 순위를 지정했습니다. CLS는 32위로 다른 13개 전략과 동률을 이루었습니다. 따라서 위의 전략 중 대부분의 순열보다 나았습니다. 유의미한 결과를 얻기 위해 세 가지 무작위 순서를 추가했습니다. 예상대로 무작위 순서 지정은 테스트한 모든 전략보다 좋지 않았습니다.
데이터 세트에 대한 과적합 여부를 파악하기 위해, 분석 후 몇 가지 새로운 레이아웃 변경 동영상과 트레이스를 기록하고, 수동으로 순위를 매겼으며, 측정항목 순위가 새 데이터 세트와 원래 데이터 세트와 매우 유사하다는 것을 확인했습니다.
몇 가지 눈에 띄는 전략이 순위에서 드러났습니다.
최적의 전략
전략의 순위를 정할 때 세 가지 유형의 전략이 목록에서 가장 높은 것을 확인했습니다. 두 그룹 모두 거의 동일한 실적을 거두었으므로 이 세 가지 모두에 대해 보다 심층적으로 분석할 계획입니다. 또한 개발자 의견을 듣고 사용자 경험과 무관한 요인 중 결정을 내릴 때 고려해야 할 요소가 있는지 알아보고자 합니다. (의견을 제공하는 방법은 아래를 참고하세요.)
긴 기간의 높은 백분위수
다음과 같은 몇 가지 기간 설정 전략은 긴 창 크기에 적합했습니다.
- 1초 슬라이딩 윈도우
- 세션 기간은 1초 간격으로 5초로 제한
- 세션 기간은 1초 간격으로 제한 없음
이들은 모두 95번째 백분위수와 최댓값 모두에서 정말 좋은 평가를 받았습니다.
하지만 이렇게 큰 창 크기의 경우 95번째 백분위수를 사용하는 것에 대해 우려했습니다. 종종 4~6개의 기간만 확인했으며 이 중 95번째 백분위수를 취하는 것은 많은 보간입니다. 측정항목 값 측면에서 보간이 어떤 역할을 하는지 명확하지 않습니다. 최댓값이 훨씬 명확하므로 최댓값을 확인하기로 결정했습니다.
긴 간격이 있는 세션 기간의 평균
제한이 없는 모든 세션 기간(5초 간격)의 점수를 평균화한 결과는 매우 우수했습니다. 이 전략에는 몇 가지 흥미로운 특징이 있습니다.
- 페이지가 레이아웃 변경 간에 차이가 없으면 현재 CLS와 정확하게 동일한 점수를 가진 하나의 긴 세션 기간이 됩니다.
- 이 측정항목은 유휴 시간을 직접 고려하지 않았으며 페이지에서 발생한 변경만 고려했으며 페이지가 이동하지 않는 특정 시점은 고려하지 않았습니다.
짧은 기간의 높은 백분위수
최대 300ms 슬라이딩 윈도우는 95번째 백분위수뿐만 아니라 매우 높은 순위로 지정되었습니다. 짧은 창 크기의 경우 큰 창 크기에 비해 백분위수 보간이 더 적지만 '반복' 슬라이딩 기간도 우려했습니다. 2개의 프레임에서 일련의 레이아웃 변경이 발생하면 이러한 프레임이 포함된 여러 300ms의 기간이 있기 때문입니다. 최대값을 선택하는 것이 95번째 백분위수를 선택하는 것보다 훨씬 명확하고 간단합니다. 그래서 이번에도 최댓값을 확인하면서 계속 진행하기로 결정했습니다.
실패한 전략
레이아웃 변경 없이 또는 레이아웃 변경 시 소비한 시간의 '평균' 환경을 고려한 전략은 매우 열악했습니다. 윈도우즈 전략에서 사이트 순위를 매긴 중앙값 또는 75번째 백분위수 요약은 없었습니다. 시간이 지남에 따라 레이아웃의 합도 변하지 않았습니다.
Google에서는 수용 가능한 레이아웃 변경에 관해 다양한 '예산'을 평가했습니다.
- 일정 예산을 초과하는 레이아웃 변경 비율입니다. 다양한 예산에서 이러한 항목들은 모두 낮은 순위를 차지했습니다.
- 일부 초과 이상으로 평균 레이아웃이 변경되었습니다. 이 전략을 적용한 대부분의 변형은 실적이 저조했지만, 긴 세션의 간격이 있는 긴 세션의 평균 초과분은 거의 비슷한 수준이었습니다. 우리는 후자가 더 간단하기 때문에 후자만 진행하기로 결정했습니다.
다음 단계
대규모 분석
Google은 Chrome에 위에 나열된 최우선 전략을 구현하여 훨씬 더 많은 웹사이트에서 실제 사용에 대한 데이터를 얻을 수 있었습니다. Google은 측정항목 점수를 기반으로 사이트 순위를 지정하는 이와 유사한 방식을 사용하여 대규모 분석을 수행할 계획입니다.
- CLS 및 각각의 새로운 측정항목 후보별로 모든 사이트의 순위를 지정합니다.
- CLS 및 각 후보자에 따라 가장 다르게 순위가 매겨지는 사이트는 무엇인가요? 이러한 사이트를 검토할 때 예상치 못한 부분이 있나요?
- 새로운 측정항목 후보 간의 가장 큰 차이점은 무엇인가요? 특정 후보에게 장단점이 있는 것으로 드러나는 차이점이 있나요?
- 위의 분석을 반복하되 각 페이지를 로드할 때 소요된 시간으로 버케팅합니다. 수용할 수 있는 레이아웃 변경으로 수명이 긴 페이지 로드에서 예상되는 개선이 확인되나요? 단기 페이지에 대해 예상치 못한 결과가 발생하나요?
Google의 접근 방식에 대한 의견
Google은 이러한 접근 방식에 대한 웹 개발자들의 의견을 기다리고 있습니다. 새로운 접근 방식을 고려할 때 유의해야 할 사항은 다음과 같습니다.
변경되지 않는 사항
새로운 접근 방식으로도 많은 부분이 바뀌지 않을 것입니다.
- 측정항목 아이디어는 개별 프레임의 레이아웃 변경 점수가 계산되는 방식을 변경하지 않으며 여러 프레임을 요약하는 방식만 변경합니다. 즉, 레이아웃 변경을 위한 JavaScript API는 동일하게 유지되며 개발자 도구에서 사용하는 Chrome 트레이스의 기본 이벤트도 동일하게 유지되므로 WebPageTest 및 Chrome DevTools와 같은 도구에서 레이아웃 변경 rect가 계속 동일한 방식으로 작동합니다.
- Google은 web-vitals 라이브러리에 반영하고, web.dev에서 문서화하고, Lighthouse와 같은 개발자 도구에 보고하는 등 개발자가 쉽게 도입할 수 있는 측정항목을 만들기 위해 계속 노력할 것입니다.
측정항목 간의 절충
상위 전략 중 하나는 레이아웃 변경 기간을 평균으로 요약하고, 나머지 전략은 최대 기간을 보고합니다. 매우 오랫동안 열린 페이지의 경우 평균값이 더 대표성을 보고할 수 있지만, 일반적으로 개발자는 단일 기간에서 조치를 취하는 것이 더 쉬울 수 있습니다. 즉, 발생한 시점, 변한 요소 등을 기록할 수 있습니다. 어느 것이 개발자에게 더 중요한지 의견을 듣고 싶습니다.
슬라이딩 또는 세션 기간이 이해하기 쉽다고 생각하시나요? 이러한 차이가 중요합니까?
의견을 보내는 방법
JavaScript 구현 예시 또는 코어 웹 바이탈 확장 프로그램을 사용하여 모든 사이트에서 새로운 레이아웃 변경 측정항목을 사용해 볼 수 있습니다.
web-vitals-feedback Google 그룹에 의견을 보내 주세요. 제목에 '[Layout Shift Metrics]'라고 적혀 있습니다. 소중한 의견을 기다리겠습니다.