누적 배치 오프셋 측정하기

누적 레이아웃 오프셋 (때로는 jank) 은 렌더링 지연 내용으로 인해 요소가 이동하는 양을 측정하는 것입니다.배치의 불안정성을 측정할 수 있습니다.제3자 스크립트와 라벨 관리로 인해 이것은 이미 많은 사이트에서 흔히 볼 수 있는 문제가 되었다.

배치가 불안정하다

현대 웹 응용 프로그램은 매우 복잡하다.JavaScript는 DOM을 나타내고 제3자 스크립트는 사탕처럼 첨가되며 주방에는 DOM 내용(광고 네트워크, A/B 테스트 도구 등)을 비동기적으로 보여주는 요리사가 너무 많다.이런 복잡성과 비동기적인 부하는 하나의 주요 문제를 초래했다. 그것이 바로 배치가 불안정하다는 것이다.
DOM 요소가 동적으로 나타나는 내용으로 인해 사방으로 이동하면 레이아웃이 불안정합니다.다음은 모바일 네트워크를 사용한 사람이 연락할 수 있는 예입니다.

DOM 요소는 새 컨텐트에 따라 변경되므로 사용자가 작업을 완료하기 어렵습니다.이 예에서 그것은 특히 조화롭지 못하지만 어떠한 수량의 구조 변화도 사용자 체험에 불리하다.우리는 우리가 건설 중인 사이트에 구조가 불안정한 문제가 있는지 어떻게 확정합니까?

레이아웃 불안정성 측정 API

인터넷 부화기 커뮤니티 그룹(WICG)의 구성원은 an API to help measure layout instability를 제기했다.현재 크롬, 엣지, 오페라 등 supported in Blink-based browsers 만 사용되고 있지만 사용하기에는 상당히 간단하다.목표는 레이아웃 변화를 일치하게 측정하는 정량 방법을 제공하는 것이다.
위의 예에서 API를 사용해 보겠습니다. 이 예에서 광고가 튀어나옵니다.먼저 해야 할 일은 PerformanceObserver 대상을 만드는 것이다.그리고 우리가 주목하고 싶은 항목의 유형을 알려줘야 한다.코드를 실행하기 전에 발생하는 모든 항목을 포함하는 buffered: true 옵션도 전달되었습니다.

new PerformanceObserver(entryList => {
    console.log(entryList.getEntries());
}).observe({ type: "layout-shift", buffered: true });

주의, 우리가 사용하는 것은 PerformanceObserver류이지 performance object류가 아니다.오늘 performance.getEntries() 항목은 포함되지 않습니다.
이 코드는 우리가 디자인한 광고 예시에 다음과 같은 콘솔 출력을 제공합니다.

우리는 두 가지 구조 변화가 있는데 하나하나가 새로운 광고에 대응하는 것을 볼 수 있다.특히 LayoutShift 속성을 주의하십시오.이것은 레이아웃 변화의 폭을 설명하는 분수입니다.점수가 높을수록 전환에 불리하다.점수는impact fraction과distance fraction의 조합이다.이 두 값을 곱하여 value 항목의 값을 계산합니다.WICGAPI document goes in to detail on how the score is calculated.나는 단지 우리가 낮은 점수를 유지하기를 바란다고 말하고 싶다.

누적 배치 이동

브라우저가 웹 페이지와 내용을 비동기적으로 보이기 때문에 많은 레이아웃 변화가 나타날 수 있습니다.위의 예에서 광고가 튀어나올 때 두 가지 전환이 있지만 많은 사이트에서 페이지를 불러오기 전에 반타 또는 더 많은 레이아웃 전환이 있다.레이아웃의 불안정성을 일치되게 토론하기 위해서 우리는 이러한 레이아웃의 편이성에 대해 화합을 구하여 기이한 도량을 얻어야 한다.이 지표를 누적 배치 편이라고 부른다.
구글은 유용한 페이지를 만들어 설명Cumulative Layout Shift (CLS)과 그 의미를 설명했다.CLS는 구글이 사용자 체험의 양호성을 확보하기 위해 추천하는 3대 지표 중 하나“web vitals”이다.우리는 구글이 곧 이 점수에 따라 검색 결과를 순위로 매길 가능성이 높기 때문에 우리의 웹 사이트를 이해하는 것이 중요하다고 생각한다.
구글에 따르면 당신의 CLS는 0.1보다 낮아야'좋다'라고 할 수 있다.위의 모든 내용에서 당신은 비동기적으로 너무 많은 내용을 이동할 수 있습니다.

JavaScript로 CLS 측정

우리는 몇 가지 방법을 통해 코드 부분을 개선하여 누적 레이아웃 변화를 측정할 수 있다.너는 우리가 매 배치 교대 조항의 목적layout-shift을 합쳐서 하루를 계산할 수 있다고 생각할 수도 있지만, 이것은 결코 그렇게 간단하지 않다.모든 레이아웃 변화가 틀렸거나 의외인 것은 아니다.사용자가 단추나 링크를 누르면 레이아웃이 어떤 방식으로 바뀔 것으로 예상할 수 있습니다.우리는 계산에 예상된 레이아웃 변화를 포함하고 싶지 않다. 단지 의외일 뿐이다.
이를 위해 레이아웃 이동 항목에 다른 속성을 사용할 수 있습니다: value.layout shift was likely caused by user input인 경우 이 속성은 진짜입니다.최근 사용자가 입력한 레이아웃 변경 사항을 제외하고 나머지 항목에 대한 합계를 구하여 사이트의 최종 CLS 점수를 얻기 위해 코드 세션을 업데이트합니다.

new PerformanceObserver(entryList => {
    var entries = entryList.getEntries() || [];
    var cls = 0;
    entries.forEach(e => {
        if (!e.hadRecentInput) { // omit entries likely caused by user input
            cls += e.value;
        }
    });
    console.log(`Cumulative Layout Shift: ${cls}`);
}).observe({ type: "layout-shift", buffered: true })

현재, 우리는 이미 이 모든 것을 함께 놓았다. 몇몇 유행 사이트의 CLS 점수를 보자. Chrome Devtools에 불러오고 모바일 시뮬레이션을 열 때.

구글.통신: hadRecentInput

Youtube.통신: 0

미국 유선 텔레비전 뉴스망.통신: 0.049

채스.통신: 0.2898

이 결과들은 모두 사람을 놀라게 하지 않는다.이 두 최악의 웹 사이트는 모두 대량의 자바스크립트 콘텐츠를 보여주는 웹 사이트가 있다.한편, 구글은 자신들의 활약에 자부심을 느낀다. 만약 그들이 자신의 중요한 지표에서 잘하지 못한다면 그것은 허위일 것이다.

CLS 평점의 한계

사이트의 CLS 점수가 불확실합니다.많은 비동기 자원을 불러오고 보여주는 상황에서 CLS는 이러한 자산의 도착과 집행 시간에 따라 변화할 것이다.인터넷 연결 속도가 느리거나 컴퓨터 속도가 느린 사용자는 비동기식 자원에 적응하기 위해 더 많은 레이아웃 변경이 필요하기 때문에 더 높은 CLS를 체험할 수 있다.(에셋이 동시에 있는 경우 브라우저는 애니메이션 프레임 사이에서 배치를 일괄 전환할 수 있습니다.)
또한 CLS 점수는 뷰포트 크기에 크게 영향을 받습니다.이동 사용자의 CLS는 일반적으로 더 높습니다. 왜냐하면 그들은 뷰포트가 더 작고 모든 이동의 백분율이 더 크기 때문입니다.이것은 모든 상황에서 의미가 있는지 의논할 필요가 있다. 만약 사용자가 비동기적인 DOM이 나타나서 단추나 링크를 클릭할 수 없다면, 데스크톱이든 모바일 장치든 그들은 화를 낼 것이다.
CLS는 불완전한 지표이지만 사이트 사용자 체험의 가치 있는 신호이다.페이지가 끊임없이 이동해서 내용을 읽지 못하거나 단추를 누르는 사용자는 화가 난다.

CLS 성능 모니터링

내가 어려운 일을 처리할게.Request Metrics를 사용하여 누적 레이아웃 변화와 같은 실제 사용자 네트워크 포인트를 모니터링합니다.