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