CLS란 무엇인가요? 누적 레이아웃 이동(Cumulative Layout Shift, CLS)

CLS란 무엇인가요?

씨엘에스 페이지 수명 주기 동안 발생하는 모든 것을 측정합니다.사고레이아웃 오프셋의 가장 큰 시퀀스레이아웃 이동 점수.

표시되는 요소의 위치가 렌더링된 프레임 간에 변경될 때마다 발생합니다.레이아웃 오프셋 .

레이아웃 전환이라고도 불리는 일련의세션 창, 빠른 연속으로 발생하는 하나 이상의 단일 레이아웃 전환을 말하며, 각 전환은 1초 미만 간격으로 발생하고 전체 창에 대해 최대 5초 동안 지속됩니다.

가장 큰 체인은 해당 창 내의 모든 레이아웃 변화 중 누적 점수가 가장 큰 세션 창을 나타냅니다.

이전에는 CLS가 페이지 수명 주기 전체에서 발생한 이벤트를 측정했습니다.모든 단일 레이아웃 시프트 점수원래 형태로 측정 기능을 제공하는 도구를 보려면 다음을 참조하세요.웹 도구 세트의 누적 레이아웃 오프셋 진화 .

좋은 CLS 점수는 어느 정도라고 생각하시나요?

좋은 사용자 경험을 제공하기 위해 웹사이트는 CLS 점수를 다음과 같이 유지해야 합니다.0.1 또는 그 이하입니다. 대부분의 사용자 방문에 대해 권장 목표를 달성하고 있는지 확인하려면 적절한 측정 임계값이 필요합니다.75번째 백분위수이 임계값은 모바일 및 데스크톱 기기 모두에 적용됩니다.

이러한 권장 값의 기반이 되는 연구 및 방법론에 대한 자세한 내용은 다음을 참조하세요.핵심 웹 메트릭에 대한 메트릭 임계값 정의

레이아웃 이동 세부 정보

레이아웃 오프셋은 다음에 의해 결정됩니다.레이아웃 불안정성 API요소의 시작 위치가 시각적 영역에 표시되는 한 정의됨(예: 요소가 기본 위치에 있는 경우)쓰기 모드API는 상단 및 왼쪽 위치가 다음과 같은 경우를 보고합니다. 레이아웃 시프트 항목. 이러한 요소는 고려됩니다.불안정한 원소.

기존 요소의 시작 위치만 변경하는 경우에만 레이아웃 변경으로 간주됩니다. DOM에 새 요소가 추가되거나 기존 요소의 크기가 변경되는 경우, 해당 변경으로 인해 다른 표시되는 요소의 시작 위치가 변경되지 않는 한 레이아웃 변경으로 간주되지 않습니다.

레이아웃 이동 점수

브라우저가 계산 중입니다레이아웃 이동 점수, 가시 영역의 크기와 두 개의 렌더링된 프레임 사이에 있는 가시 영역을 살펴봅니다.불안정한 원소레이아웃 전환 점수는 이 전환에 대한 두 가지 측정값의 곱입니다.영향 점수그리고거리 점수(두 가지 모두 아래에 정의되어 있습니다).
레이아웃 이동 점수 = 충격 점수 * 거리 점수

영향 점수

영향 점수측정불안정한 원소프레임 사이의 눈에 보이는 영역에 미치는 효과.

이전 프레임그리고현재 모든 프레임불안정한 원소보이는 영역 설정(전체 보이는 영역의 일부)은 현재 프레임입니다.영향 점수.

위 그림에서 한 요소는 한 프레임에서 가시 영역의 절반을 차지합니다. 그런 다음 다음 프레임에서 해당 요소는 가시 영역 높이의 25%만큼 아래로 이동합니다. 빨간색 점선 사각형은 두 프레임에서 요소의 가시 영역 집합을 나타냅니다. 이 예에서 해당 집합은 전체 가시 영역의 75%를 차지하므로영향 점수0.75입니다.

거리 점수

레이아웃 이동 점수 계산의 다른 부분은 불안정한 요소가 뷰포트에 비해 얼마나 이동했는지 측정합니다.거리 점수모든 것을 말합니다불안정한 원소한 프레임에서 이동한 최대 거리(수평 또는 수직)를 뷰포트의 가장 큰 차원(너비 또는 높이 중 더 큰 쪽)으로 나눈 값입니다.

위의 예에서 가장 큰 뷰포트 차원은 높이이고 불안정한 요소는 뷰포트 높이의 25%만큼 변위되므로거리 점수0.25입니다.

따라서 이 예에서,영향 점수0.75입니다거리 점수0.25이므로레이아웃 이동 점수0.75 * 0.25 = 0.1875입니다.

초기에 레이아웃 전환 점수는 다음에만 기반합니다.영향 점수계산을 수행합니다.거리 점수이는 작은 변위로 인해 큰 요소에 과도한 불이익이 발생하는 것을 방지하기 위한 것입니다.

다음 예에서는 기존 요소에 콘텐츠를 추가하는 것이 레이아웃 이동 점수에 미치는 영향을 보여줍니다.

"클릭하세요!" 버튼은 검은색 텍스트가 있는 회색 상자의 바닥에 부착되어 있고, 흰색 텍스트가 있는 녹색 상자를 아래로 밀어냅니다(그리고 부분적으로는 보이는 영역 바깥에 있습니다).

이 예에서 회색 상자의 크기는 변경되지만 시작 위치는 변경되지 않으므로 회색 상자는불안정한 원소.

"Click me!" 버튼은 처음에는 DOM에 없었으므로 시작 위치가 변경되지 않았습니다.

그러나 녹색 상자의 시작 위치는 변경되지만 녹색 상자의 일부는 이미 가시 영역 밖에 있으므로영향 점수보이지 않는 영역은 고려되지 않습니다. 두 프레임의 녹색 상자의 보이는 영역 집합(빨간색 점선 사각형으로 표시)은 첫 번째 프레임의 녹색 상자의 면적, 즉 보이는 영역의 50%와 같습니다.영향 점수0.5입니다.

거리 점수보라색 화살표로 표시되어 있습니다. 녹색 상자가 아래로 이동하는 거리는 가시 영역의 약 14%입니다.거리 점수0.14입니다.

레이아웃 변화율은 0.5 x 0.14 = 0.07입니다.

마지막 예에서는 여러 가지를 보여줍니다.불안정한 원소상황:

위의 첫 번째 프레임에는 동물 이름에 대한 API 요청 결과 네 개가 알파벳순으로 정렬되어 있습니다. 두 번째 프레임에는 정렬된 목록에 더 많은 결과가 추가되었습니다.

목록의 첫 번째 항목("Cat")의 시작 위치는 두 프레임 사이에서 변경되지 않았으므로 안정적입니다. 마찬가지로 목록에 추가된 새 항목은 이전에 DOM에 존재하지 않았으므로 시작 위치가 변경되지 않았습니다. 그러나 "Dog", "Horse", "Zebra" 항목의 시작 위치는 모두 변경되었으므로 안정적입니다.불안정한 원소.

마찬가지로 빨간색 점선 사각형은 이 세 가지를 나타냅니다.불안정한 원소이 예에서 이전 및 다음 프레임의 영역은 가시 영역의 약 38%를 차지합니다.영향 점수0.38입니다).

화살표는 다음을 나타냅니다.불안정한 원소시작 위치를 기준으로 한 변위 거리입니다. 파란색 화살표로 표시된 "Zebra" 요소는 가장 큰 변위 거리를 가지며, 이는 가시 영역 높이의 약 30%입니다.거리 점수0.3입니다.

레이아웃 이동 점수는 0.38 x 0.3 = 0.1172입니다.

예상된 레이아웃 변경 vs. 예상치 못한 레이아웃 변경

레이아웃 변경이 항상 나쁜 것은 아닙니다. 실제로 많은 동적 웹 애플리케이션은 페이지 요소의 시작 위치를 자주 변경합니다.

사용자가 시작한 레이아웃 변경

레이아웃 변경은 사용자가 예상치 못한 경우에만 문제가 됩니다. 다시 말해, 사용자 상호작용(링크 클릭, 버튼 탭, 검색창 입력 등)에 반응하여 발생하는 레이아웃 변경은 일반적으로 문제가 되지 않습니다. 단, 사용자가 맥락을 명확하게 파악할 수 있을 만큼 상호작용과 가까운 곳에서 변경이 이루어진다면 문제없습니다.

예를 들어, 사용자 상호작용으로 인해 완료까지 시간이 걸릴 수 있는 네트워크 요청이 발생하는 경우, 요청이 완료되는 동안 레이아웃이 변경되는 것을 방지하기 위해 즉시 공간을 확보하고 로딩 표시기를 표시하는 것이 좋습니다. 사용자가 무언가가 로딩 중이거나 리소스가 언제 준비될지 알지 못하면, 기다리는 동안 다른 콘텐츠를 클릭하려고 할 수 있습니다.

사용자 입력 후 500밀리초 이내에 발생하는 레이아웃 변경은 다음과 같이 표시됩니다.hadRecentInput계산에서 이러한 오프셋을 제외하려면 플래그를 지정합니다.

참고: hadRecentInput 플래그는 터치, 클릭, 키 입력과 같은 개별 입력 이벤트에만 적용됩니다. 스크롤, 드래그, 핀치 투 줌 제스처와 같은 연속적인 상호작용은 "최근 입력"으로 간주되지 않습니다. 자세한 내용은 다음을 참조하세요.레이아웃 불안정성 사양.

애니메이션 및 전환

애니메이션과 전환 효과를 잘 활용하면 사용자를 놀라게 하지 않고 페이지 콘텐츠를 업데이트하는 훌륭한 방법입니다. 페이지 콘텐츠의 갑작스럽고 예상치 못한 변화는 거의 항상 부정적인 사용자 경험을 초래합니다. 하지만 콘텐츠가 한 위치에서 다음 위치로 점진적이고 자연스럽게 이동한다면, 사용자가 현재 상황을 더 잘 이해하고 상태 간 변화를 안내하는 데 도움이 될 수 있습니다.

CSS 변환속성을 사용하면 레이아웃을 이동하지 않고도 요소에 애니메이션을 적용할 수 있습니다.

대신 transform: scale()을 사용하고 높이와 너비 속성을 조정하세요.
요소를 이동해야 하는 경우 transform:translate()를 대신 사용하고 top, right, bottom 또는 left 속성을 조정할 수 있습니다.

CLS 측정 방법

CLS는 가능합니다실혐실측정하거나실제측정되어 다음 도구에서 사용할 수 있습니다.

참고: Labs 도구는 일반적으로 합성 환경에서 페이지를 로드하기 때문에 페이지 로드 중에 발생하는 레이아웃 변화만 측정할 수 있습니다. 따라서 Labs 도구가 특정 페이지에 대해 보고하는 CLS 값은 실제 사용자가 경험하는 값보다 낮을 수 있습니다.

측정 도구

실험실 도구

JavaScript에서 CLS 측정

JavaScript에서 CLS를 측정하려면 다음을 사용할 수 있습니다.레이아웃 불안정성 API다음 예제에서는 다음을 만드는 방법을 보여줍니다.퍼포먼스 옵저버예상치 못한 레이아웃 이동 항목을 수신하고, 세션별로 항목을 그룹화하고, 최대 세션 값을 기록하고, 최대 세션 값이 변경되면 레코드를 업데이트합니다.
clsValue = 0으로 설정합니다. clsEntries = []로 설정합니다. sessionValue = 0으로 설정합니다. 세션 항목을 []로 설정합니다. 새로운 PerformanceObserver((entryList) => { (entryList.getEntries()의 const 항목에 대해) // 최신 사용자 입력 플래그가 없는 레이아웃 오프셋만 계산합니다. if (!entry.hadRecentInput) { const 첫 번째 세션 항목 = 세션 항목[0]; const 마지막 세션 항목 = 세션 항목[세션 항목.길이 - 1]; // 현재 입력과 이전 입력 사이의 시간이 1초 미만인 경우 // 첫 번째 항목과 세션 사이의 시간 간격이 5초 미만이면 항목 // 현재 세션에 포함합니다. 그렇지 않으면 새 세션을 시작합니다. if (세션값 && entry.startTime - lastSessionEntry.startTime < 1000 && entry.startTime - firstSessionEntry.startTime < 5000) { 세션값 += 항목값; 세션 항목.push(항목); } 또 다른 { 세션값 = 항목값; 세션 항목 = [항목]; } // 현재 세션 값이 현재 CLS 값보다 큰 경우, // 그런 다음 CLS와 관련 항목을 업데이트합니다. if (세션값 > cls값) { clsValue = 세션값; clsEntries = 세션 항목; // 업데이트된 값(및 해당 항목)을 콘솔에 기록합니다. console.log('CLS:', clsValue, clsEntries) } } } }).observe({유형: '레이아웃-시프트', 버퍼링: true});

경고: 위 코드는 CLS를 계산하고 기록하는 기본적인 방법을 보여줍니다. 하지만 CLS를 정확하게 측정하고Chrome 사용자 경험 보고서 측정값이 (CrUX) 값과 일치하면 측정이 더 복잡해집니다. 자세한 내용은 아래를 참조하세요.

대부분의 경우, 페이지가 언로드될 때의 현재 CLS 값은 해당 페이지의 최종 CLS 값이지만 몇 가지 중요한 예외가 있습니다.

다음 섹션에서는 API가 보고하는 내용과 측정항목을 계산하는 방법의 차이점을 나열합니다.

지표와 API의 차이점

페이지가 백그라운드에서 로드되거나 브라우저가 아무것도 그리지 않고 백그라운드로 이동한 경우 해당 페이지는 CLS 값을 보고해서는 안 됩니다.
페이지가 지나가면왕복 캐시페이지가 복원되면 해당 페이지의 CLS 값은 0으로 재설정되어야 합니다. 이는 사용자에게 다른 페이지 방문 경험이 되기 때문입니다.
API는 iframe 내의 오프셋을 기반으로 레이아웃 이동 항목을 보고하지 않지만, CLS를 정확하게 측정하려면 이러한 오프셋을 고려해야 합니다. 자식 프레임은 이 API를 사용하여 이러한 오프셋 레이아웃 이동 항목을 부모 프레임에 보고할 수 있습니다.중합.

CLS는 위의 예외 외에도 전체 페이지 수명 주기를 측정하므로 이 지표에는 몇 가지 추가적인 복잡성이 있습니다.

사용자는매우탭을 장시간(며칠, 몇 주, 몇 달) 열어 두는 경우. 실제로 사용자가 탭을 전혀 닫지 않을 수도 있습니다.
모바일 OS에서 브라우저는 일반적으로 백그라운드 탭에 대한 페이지 언로드 콜백을 실행하지 않습니다. 실행하면 "최종" 값을 보고하기 어렵기 때문입니다.

이러한 상황을 처리하려면 페이지가 언로드될 때에도 페이지가 백그라운드에 있을 때마다 CLS를 보고해야 합니다.가시성 변경 이벤트데이터를 수신하는 분석 시스템은 백엔드에서 최종 CLS 값을 계산해야 합니다.

개발자는 이러한 모든 사례를 기억하고 스스로 처리하는 대신 다음을 사용할 수 있습니다.웹 바이탈스 JavaScript 라이브러리CLS를 측정하기 위해 라이브러리는 위의 모든 사례를 스스로 처리합니다.
'web-vitals'에서 {getCLS}를 가져옵니다. // CLS를 보고해야 하는 모든 경우 // 측정하고 기록합니다. getCLS(콘솔.로그);
JavaScript에서 CLS를 측정하는 방법에 대한 전체 예는 (getCLS)의 소스 코드를 참조하세요.
일부 경우(예: 크로스 도메인 iframe)에는 JavaScript에서 CLS를 측정할 수 없습니다. 자세한 내용은 웹 바이탈 라이브러리를 참조하세요.한정부분.

CLS를 개선하는 방법

대부분의 사이트에서는 몇 가지 지침을 따르면 예상치 못한 레이아웃 변경을 모두 방지할 수 있습니다.

이미지 및 비디오 요소에는 항상 크기 속성을 포함해야 합니다.CSS 종횡비 컨테이너이 방법을 사용하면 이미지가 로드되는 동안 브라우저가 문서에 정확한 공간을 할당할 수 있습니다.크기가 조정되지 않은 미디어 기능 정책이러한 동작은 기능 정책을 지원하는 브라우저에서 적용됩니다.
사용자 상호작용에 따른 응답이 아닌 이상 기존 콘텐츠 위에 콘텐츠를 삽입하지 마세요. 이렇게 하면 레이아웃 변경이 예상대로 진행됩니다.
레이아웃을 변경하는 속성 애니메이션보다 전환 애니메이션을 사용하는 것이 좋습니다. 애니메이션 전환의 목적은 상태 간의 맥락적 연속성을 제공하는 것입니다.

CLS 개선 방법에 대한 자세한 내용은 다음을 참조하세요.CLS 최적화그리고레이아웃 이동 디버깅.

1/5 - (1 투표)