수명이 긴 페이지에 더 공정하도록 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 구현 웹 바이탈의 포크는 확장 프로그램을 사용합니다.
시간을 내어 이전 게시물을 읽고 의견을 보내주세요!