수명이 긴 페이지에 더 공정하도록 CLS 측정항목을 개선하기 위한 계획
최근 Chrome 속도 측정항목 팀은 오랫동안 열려 있는 페이지에 대해 CLS 측정항목을 더 공정하게 만들기 위한 옵션 있습니다. 매우 일반적인 고객 사례 연구가 대규모 분석을 완료한 후 측정항목에 적용할 변경사항: 최대 세션 기간 1초 최대 5초로 제한됩니다.
자세한 내용을 보려면 계속 읽어보세요.
옵션을 어떻게 평가했나요?
Google에서는 개발자 커뮤니티에서 받은 모든 의견을 검토한 후 고려해야 합니다
또한 Google은 상단에 옵션을 설정합니다. 수백만 개의 웹페이지에 대한 측정항목을 대규모로 분석했습니다. 각 옵션이 개선된 사이트 유형과 옵션 비교 특히 사이트별로 점수가 다른 사이트를 조사한 후 있습니다. 다음과 같은 결론을 내렸습니다.
- 모든 옵션이 페이지에 머문 시간과 레이아웃 변경 점수
- 페이지의 점수가 낮아지지 않은 옵션이 있습니다. 따라서 여기에는 이러한 변경사항이 사이트의 점수를 악화시킬 것을 우려해야 합니다.
결정 사항
세션 기간이 필요한 이유
이전 게시물에서 몇 가지 다른 윈도잉을 전략 점수가 늘어나지 않도록 하면서 레이아웃 변경을 그룹화하기 위해 무한합니다. 개발자로부터 받은 피드백은 레이아웃 변경을 가장 많이 함께 그룹화하기 때문에 세션 기간 전략은 이해할 수 있습니다.
세션 기간을 검토하려면 다음 예를 참고하세요.
<ph type="x-smartling-placeholder">위의 예에서는 시간이 지남에 따라 사용자가 있습니다. 각각 파란색 막대로 표시됩니다. 위에서 파란색 막대가 높이가 다릅니다. 점수를 나타내는 개별 레이아웃이 바뀔 때마다 세션 창은 첫 번째 레이아웃 변경과 함께 시작됩니다. 레이아웃 변경 없이 간격이 있을 때까지 계속 확장됩니다. 다음 레이아웃이 변경되면 새 세션 창이 시작됩니다. 이 두 가지 모델에 세 가지 레이아웃 변경 없이 예시에 세 개의 세션 기간이 있습니다. 유사한 각 교대 근무의 점수를 더해서 window의 점수는 개별 레이아웃 변경의 합입니다.
초기 연구에서는 세션 기간 사이에 1초의 간격을 두었고 이 간격은 대규모 분석이 가능합니다 따라서 '세션 격차'는 위의 예에 표시된 값은 1입니다. 둘째,
최대 세션 기간인 이유
요약의 범위를 좁혔을 뿐 아니라 다양한 전략을 초기 연구에서는 두 가지 옵션이 있었습니다.
- 매우 큰 세션에 대한 모든 세션 기간의 평균 점수 기간 (그 사이에 5초 간격의 제한이 없음)
- 더 작은 세션 기간에 대한 모든 세션 기간의 최대 점수 (5초로 제한, 1초 간격).
초기 조사 후 Chrome에 각 측정항목을 추가하여 대규모 분석을 제공합니다. 대규모 분석에서 다음과 같은 레이아웃 변경 패턴이 있는 여러 URL을 발견했습니다.
오른쪽 하단에서 레이아웃 변경은 단 한 번뿐인 것을 볼 수 있습니다. 세션 기간 2는 점수가 매우 낮습니다. 즉, 평균 점수는 상당히 낮습니다 하지만 개발자가 아주 작은 레이아웃 변경을 수정하면 어떻게 될까요? 그런 다음 점수는 세션 윈도우 1에서만 계산되므로 거의 두 배입니다. 그것은 개발자에게 정말 혼란스럽고 낙심할 소지가 있습니다. 점수가 더 나빠졌다는 것을 알게 되었습니다. 또한 이 작은 레이아웃 변경을 삭제하는 것이 사용자에게 점수가 악화되면 안 됩니다.
이러한 평균값의 문제가 있기 때문에 더 작은, 제한, 최대 기간 따라서 위 예에서 세션 기간 2는 무시되며 세션 기간 1의 레이아웃 변경 합계만 보고되지 않습니다.
왜 5초인가?
여러 창 크기를 평가한 결과 다음 두 가지를 발견했습니다.
- 짧은 창의 경우 페이지 로드가 느리고 사용자 상호작용에 대한 응답이 느립니다. 레이아웃 변경을 여러 창으로 분할하여 점수를 개선할 수 있습니다. 감속을 보상하지 않도록 창을 충분히 크게 유지하고 싶었습니다.
- 일부 페이지는 작은 레이아웃 변경이 지속적으로 스트림됩니다. 대상 점수가 업데이트될 때마다 조금씩 바뀌는 스포츠 경기 결과 페이지를 예로 들 수 있습니다. 이러한 짜증이 나지만 시간이 지나도 더 성가시지 않습니다 그래서 우리는 이러한 레이아웃 변경 유형에 따라 창이 제한되었는지 확인하고자 했습니다.
이 두 가지를 염두에 두고 여러 기기에서 다양한 창 크기를 5초로 제한하는 것이 바람직한 페이지라는 결론을 창 크기
이것이 내 페이지의 CLS 점수에 어떤 영향을 주나요?
이 업데이트는 페이지의 CLS를 제한하므로 더 낮은 점수는 발생하지 않습니다. .
Google의 분석에 따르면 55% 의 조직에서는 CLS에 변화가 전혀 없을 것이라고 합니다. 가장 높은 비율을 차지할 수 있습니다. 이는 해당 게시자의 페이지가 현재 레이아웃 변경 또는 변경이 이미 단일 세션 윈도우입니다.
나머지 원본은 75번째 백분위수에서 점수가 개선되는 것을 확인할 수 있습니다 대부분이 약간만 개선될 것으로 보이지만 약 3% 는 개선될 것으로 예상됨 '개선이 필요함' 상태가 되면 점수가 높아집니다 또는 '나쁨' 등급 '좋은' 평점 이러한 페이지는 무한 스크롤러를 사용하거나 UI 업데이트가 느린 UI를 사용하는 경우 이전 강의에서 설명한 것처럼 게시물을 참고하세요.
사용해 보려면 어떻게 해야 하나요?
곧 새로운 측정항목 정의를 사용하도록 도구가 업데이트될 예정입니다. 감사합니다. 예시 JavaScript 구현 웹 바이탈의 포크는 확장 프로그램을 사용합니다.
시간을 내어 이전 게시물을 읽고 의견을 보내주세요!