웹 도구의 누적 레이아웃 변경 변화

오늘부터 Lighthouse, PageSpeed Insights, Chrome UX 보고서를 비롯한 Chrome의 여러 웹 도구 표시 경로에 CLS가 적용되었습니다.

Addy Osmani

Elizabeth Sweeny

오늘은 여러 Chrome 웹 도구 표시 경로에서 누적 레이아웃 변경 (CLS) 측정항목의 측정이 어떻게 발전하고 있는지 공유하고자 합니다. 개발자에게 이러한 변경사항은 장기 페이지(예: 무한 스크롤 또는 단일 페이지 앱)의 사용자 환경을 더 잘 반영합니다. 이러한 CLS 업데이트는 Lighthouse, PageSpeed Insights, Chrome UX 보고서 등의 도구에 출시될 예정입니다.

웹에서 레이아웃 변경 횟수가 줄어들기를 바랐습니다. 여기에서 CLS 측정항목이 웹페이지의 시각적 안정성을 측정하는 데 유용하다는 것이 입증되었습니다. 사이트에서 이미지 또는 광고와 같은 콘텐츠의 크기를 더 잘 설정하도록 장려하여 사용자가 갑작스럽게 콘텐츠를 급증시키는 데 기여할 수 있습니다.

이 측정항목의 이름은 '누적'입니다. 각 개별 이동의 점수가 페이지 수명 동안에 합산되기 때문입니다. 웹에서 모든 레이아웃이 변경되면 사용자 환경이 저하되지만 단일 페이지 앱 (SPA) 또는 무한 스크롤 앱과 같이 수명이 긴 페이지에서는 시간이 지남에 따라 자연스럽게 더 많은 CLS가 누적됩니다. 집계를 최악의 교대 '기간'으로 제한함으로써 이제 세션 기간에 관계없이 CLS를 더 일관되게 측정할 수 있습니다.

CLS 측정항목 개선에서 발표한 것처럼 CLS 측정항목을 최대 세션 기간이 1초, 5초로 제한으로 조정될 예정입니다. 이 업데이트는 수명이 긴 페이지의 사용자 환경을 더 잘 반영합니다. 이 변경사항이 적용되면 출처의 70% 는 75번째 백분위수에서 CLS의 변화를 예상해서는 안 되며 나머지 30% 의 출처는 개선될 것입니다.

CLS에 기간 설정 조정 출시

업데이트된 CLS 정의는 1초 간격(최대 5초)의 최대 세션 기간이라고 설명했습니다. 도구에는 어떤 의미가 있을까요?

오늘부터 CLS의 이러한 변경사항이 Lighthouse, PageSpeed Insights, Chrome UX 보고서 등 Chrome의 여러 웹 도구 표시 경로에 적용되었습니다. 아래에서 CLS 기간 설정 조정 출시에 관한 요약과 원래 구현을 기준으로 벤치마킹하는 기능을 제공하는 도구를 확인할 수 있습니다.

Chrome DevTools도 곧 창 설정을 지원하도록 업데이트될 예정입니다. CLS 업데이트는 Search Console에도 적용되었으며 2021년 6월 1일부터 반영됩니다.

대부분의 개발자는 수정 후의 데이터를 활용하기 위해 별도의 조치를 취할 필요 없이 이 변경사항이 원활하게 적용될 것으로 예상됩니다.

'이전' CLS

참고로 '이전' CLS는 페이지의 전체 수명에 걸쳐 레이아웃 변경을 측정합니다. 일부 개발자는 창 조정과 함께 CLS의 이전 정의를 모니터링하려고 할 수 있으므로 좋은 소식을 전해드립니다. Lighthouse 및 CrUX에서 '이전 CLS'를 노출한다는 좋은 소식입니다.

Lighthouse v8에서는 JSON 형식의 audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift으로 제공됩니다.

CrUX API에서는 experimental_uncapped_cumulative_layout_shift으로, CrUX BigQuery에서는 experimental.uncapped_cumulative_layout_shift로 표시됩니다.

6월 1일 이후 CrUX API 요청은 '이전 CLS' 측정항목을 반환합니다.

{
  "origin": "https://web.dev",
  "metrics": [
    "experimental_uncapped_cumulative_layout_shift"
  ]
}

6월 8일 이후에는 다음 CrUX BigQuery가 이전 CLS와 새 CLS를 비교합니다.

WITH
  new_data AS (
  SELECT
    cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone'),
  old_data AS (
  SELECT
    uncapped_cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone')
SELECT
  cls.start AS start,
  cls.`END` AS `end`,
  cls.density AS cls_density,
  uncapped_cls.density AS uncapped_cls_density
FROM
  new_data
INNER JOIN
  old_data
ON
  new_data.cls.start = old_data.uncapped_cls.start

2021년 12월 14일에 '이전 CLS'가 지원 중단되고 최대 6개월 동안 이 데이터를 계속 사용할 수 있습니다.

Lighthouse에서 CLS 가중치 업데이트

CLS가 Lighthouse에 처음 도입되었을 때 완전히 새로운 측정항목이었습니다 따라서 개발자가 CLS를 테스트하고 벤치마킹하고 최적화할 시간을 확보할 수 있도록 성능 점수에서 CLS의 비중을 덜었습니다.

개발자들에게 어느 정도 시간을 준 후 Lighthouse 점수로 인해 CLS의 가중치가 5% 에서 15%로 늘어났습니다. 이는 Lighthouse 점수에서 코어 웹 바이탈이 가장 가중치가 높은 측정항목이 되도록 하는 방법과 일치합니다.

Lighthouse v8의 업데이트된 측정항목 가중치는 점수 계산기에서 확인할 수 있습니다.

Lighthouse 8.0의 CLS 구현에는 서브프레임의 윈도잉과 CLS 기여가 모두 포함됩니다. 8.0 이전에는 Lighthouse의 CLS가 측정항목 계산에 하위 프레임의 CLS를 포함하지 않았지만 지금은 포함됩니다. 확인을 위해 CrUX로 측정된 필드 CLS는 윈도잉과 서브프레임도 유사하게 처리합니다.

여전히 실습 CLS와 필드 CLS의 주요 차이점은 실습 CLS의 관찰 기간이 실습 조건에서 결정된 대로 '완전히 로드됨'에 종료되지만, 필드에서는 관찰 기간이 로드 후 활동을 포함한 전체 페이지 전체 기간으로 확장된다는 점입니다. 하지만 기간 조정으로 이 차이를 크게 완화할 수 있습니다.

현장에서 직접 측정

최신 CLS 구현을 측정하려면 다음 PerformanceObserver 스니펫을 사용하여 RUM을 통해 필드 데이터에 이를 기록할 수도 있습니다.

또는 이번 변경으로 업데이트된 웹 바이탈 자바스크립트 라이브러리를 직접 사용할 수도 있습니다.

추가 업데이트

누적 레이아웃 변경 업데이트 외에도 웹 도구에 다음과 같은 측정항목 관련 업데이트가 적용되었습니다.

• 최대 콘텐츠 렌더링 시간 측정항목의 최근 정의를 따르도록 업데이트하고 있습니다. CrUX API, PSI, PSI API, Search Console이 2021년 6월 1일에 업데이트됩니다. CrUX BigQuery는 2021년 6월 8일에 업데이트됩니다.
• CrUX에서 첫 콘텐츠 페인트 트라이 비닝 기준점이 좋음: [0~1.8s], 개선 필요: (1.8초~3초), 나쁨: [3s-∞]으로 업데이트되었습니다.

결론

이번 변경으로 대부분의 사이트가 원활하게 전환될 것으로 예상되므로 웹 바이탈 및 CLS 최적화에서 레이아웃 변경의 측정 및 최적화 방법에 관한 도움말 및 유용한 정보를 확인해 보시기 바랍니다. 늘 그렇듯 언제든지 web-vitals-feedback 그룹에 문의하여 측정항목에 관한 의견과 Lighthouse의 도구 관련 의견 포럼, 도구 문제에 관한 Chrome UX 보고서를 확인하세요. 건배!

의견을 보내 주신 Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, 제프 호세, 폴 아이리시에게 감사드립니다.

Unsplash에 있는 Barn Images / @barnimages의 히어로 이미지