장기 페이지에 더 공정하게 적용되도록 CLS 측정항목을 개선할 계획입니다.
게시: 2021년 4월 7일
Chrome 속도 측정항목팀은 최근 오래 열려 있는 페이지에 CLS 측정항목을 더 공정하게 적용하기 위한 옵션에 관한 초기 연구를 발표했습니다. 많은 유용한 의견을 받았으며 대규모 분석을 완료한 후 측정항목에 적용할 변경사항을 최종 결정했습니다. 최대 세션 시간(1초 간격, 최대 5초)
자세한 내용을 보려면 계속 읽어보세요.
옵션은 어떻게 평가했나요?
개발자 커뮤니티로부터 받은 모든 의견을 검토하고 이를 고려했습니다.
또한 Chrome에 인기 옵션을 구현하고 수백만 개의 웹페이지에서 측정항목을 대규모로 분석했습니다. 각 옵션이 개선된 사이트 유형과 옵션을 비교한 결과, 특히 옵션에 따라 점수가 다르게 부여된 사이트를 살펴봤습니다. 전반적으로 다음과 같은 사실을 확인했습니다.
- 모든 옵션은 페이지에 머문 시간과 레이아웃 변경 점수 간의 상관성을 줄였습니다.
- 어떤 옵션도 페이지의 점수를 낮추지 않았습니다. 따라서 이번 변경사항으로 인해 사이트 점수가 나빠질까 걱정하지 않으셔도 됩니다.
결정 사항
세션 기간을 사용하는 이유는 무엇인가요?
이전 게시물에서는 점수가 무한대로 증가하지 않도록 하면서 레이아웃 이동을 그룹화하는 몇 가지 다른 창 전략을 다뤘습니다. 개발자로부터 받은 의견에 따르면 세션 창 전략이 레이아웃 전환을 가장 직관적으로 그룹화하기 때문에 가장 선호되는 것으로 나타났습니다.
세션 기간을 검토하려면 다음 예를 참고하세요.
위 예시에서 사용자가 페이지를 보는 동안 시간이 지남에 따라 많은 레이아웃 전환이 발생합니다. 각각 파란색 막대로 표시됩니다. 위에서 파란색 막대의 높이가 다르다는 것을 확인할 수 있습니다. 이는 각 개별 레이아웃 변경의 점수를 나타냅니다. 세션 창은 첫 번째 레이아웃 변경과 함께 시작하고 레이아웃 변경 없이 간격이 있을 때까지 계속 확장됩니다. 다음 레이아웃 전환이 발생하면 새 세션 창이 시작됩니다. 레이아웃 변경 없이 간격이 세 개 있으므로 이 예에서는 3개의 세션 기간이 있습니다. 현재 CLS 정의와 마찬가지로 각 시프트의 점수가 합산되므로 각 창의 점수는 개별 레이아웃 시프트의 합계입니다.
초기 연구를 바탕으로 세션 기간 사이에 1초의 간격을 선택했으며 이 간격은 대규모 분석에서 잘 작동했습니다. 따라서 위 예시에서 표시된 '세션 간격'은 1초입니다.
최대 세션 기간인 이유
초기 연구에서 요약 전략을 다음 두 가지 옵션으로 좁혔습니다.
- 매우 긴 세션 기간 설정 (세션 간 간격이 5초인 제한되지 않은 기간 설정)의 모든 세션 기간 설정의 평균 점수입니다.
- 세션 기간이 짧은 경우(5초로 제한되며 세션 간 간격은 1초) 모든 세션 기간의 최대 점수입니다.
초기 조사 후 수백만 개의 URL에 대해 대규모 분석을 수행할 수 있도록 각 측정항목을 Chrome에 추가했습니다. 대규모 분석에서 다음과 같은 레이아웃 전환 패턴이 있는 URL이 많이 발견되었습니다.
오른쪽 하단에서 세션 창 2에 작은 레이아웃 전환이 하나만 있어 점수가 매우 낮음을 알 수 있습니다. 즉, 평균 점수가 상당히 낮습니다. 하지만 개발자가 이 작은 레이아웃 이동을 수정하면 어떻게 될까요? 그러면 세션 기간 1에서만 점수가 계산되므로 페이지의 점수가 거의 두 배가 됩니다. 레이아웃 전환을 개선했는데 점수가 더 나빠지는 것을 발견하면 개발자에게 매우 혼란스럽고 실망스러울 것입니다. 그리고 이 작은 레이아웃 전환을 삭제하면 사용자 환경이 약간 개선되므로 점수가 나빠지지 않습니다.
평균과 관련된 이 문제로 인해 Google은 더 작고 한도가 설정된 최대 기간을 사용하기 시작했습니다. 따라서 위의 예시에서는 세션 창 2가 무시되고 세션 창 1의 레이아웃 이동 합계만 보고됩니다.
왜 5초인가?
여러 창 크기를 평가한 결과 다음 두 가지를 발견했습니다.
- 짧은 창의 경우 페이지 로드가 느리고 사용자 상호작용의 응답이 느리면 레이아웃이 여러 창으로 나뉘어 점수가 개선될 수 있습니다. 속도가 느려지는 것을 방지하기 위해 창을 충분히 크게 유지하고자 했습니다.
- 일부 페이지는 작은 레이아웃 변경이 지속적으로 스트림됩니다. 예를 들어 득점 업데이트마다 약간씩 이동하는 스포츠 점수 페이지가 있습니다. 이러한 전환은 성가시지만 시간이 지날수록 더 성가시지는 않습니다. 따라서 이러한 레이아웃 변경 유형에 따라 창이 제한되었는지 확인하고자 했습니다.
이러한 두 가지 사항을 고려하여 여러 실제 웹페이지에서 다양한 창 크기를 비교한 결과, 5초가 창 크기에 적합한 제한이라고 결론지었습니다.
이것이 내 페이지의 CLS 점수에 어떤 영향을 주나요?
이번 업데이트는 페이지의 CLS를 제한하므로 이번 변경으로 인해 점수가 더 나빠지는 페이지는 없습니다.
또한 분석에 따르면 출처의 55% 는 75번째 백분위수에서 CLS가 전혀 변경되지 않을 것입니다. 이는 페이지에 현재 레이아웃 전환이 없거나 전환이 이미 단일 세션 창으로 제한되어 있기 때문입니다.
나머지 원본의 75번째 백분위수에서 점수가 개선되는 것을 확인할 수 있습니다. 대부분은 약간 개선되었지만 약 3% 의 경우 '개선이 필요함' 또는 '나쁨'에서 '좋음' 평점으로 점수가 향상됩니다. 이러한 페이지는 이전 게시물에 설명된 대로 무한 스크롤러를 사용하거나 느린 UI 업데이트가 많습니다.
사용해 보려면 어떻게 해야 하나요?
곧 새로운 측정항목 정의를 사용하도록 도구가 업데이트될 예정입니다. 그때까지는 JavaScript 구현 예시 또는 Core Web Vitals 확장 프로그램의 포크를 사용하여 모든 사이트에서 업데이트된 버전의 CLS를 사용해 볼 수 있습니다.
이전 게시물을 읽고 의견을 보내주신 모든 분들께 감사드립니다.