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