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