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

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

Addy Osmani

Elizabeth Sweeny

오늘은 Google이 디지털 AI 생태계의 측정 방식을 어떻게 발전시키고 있는지 레이아웃 변경 횟수 (CLS) 측정항목을 테스트할 수 있습니다. 개발자에게 있어 이러한 변경사항은 앱의 사용자 경험을 오래 지속되는 페이지 (예: 무한 스크롤 또는 단일 페이지 앱) 이러한 CLS 업데이트는 Lighthouse, PageSpeed Insights, Chrome UX 보고서입니다.

웹에서 레이아웃 변경이 줄어들었으면 좋겠습니다. 여기서 CLS 측정항목이 웹페이지의 시각적 안정성을 측정하는 데 유용한 것으로 입증되었습니다. 사이트가 콘텐츠에 대한 측정기준을 설정하도록 유도하는 데 도움이 됩니다 예를 들면 이미지, 광고, 사용자에게 갑작스런 콘텐츠 급증을 유도할 수 있는 콘텐츠가 포함되어 있습니다

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

CLS 측정항목 개선에서 발표한 바와 같이 CLS 측정항목이 5초로 제한되는 1초 간격의 최대 세션 기간 이 업데이트는 오래 지속되는 페이지의 사용자 환경을 더 잘 반영합니다. 이 변경사항이 적용되면 출처의 70% 는 75번째 백분위수에서 CLS 변화가 없을 것으로 예상해서는 안 됩니다. 원본의 나머지 30% 는 개선되는 것을 확인할 수 있습니다

CLS에 기간 설정 조정 적용

1초 간격의 최대 세션 기간인 업데이트된 CLS 정의에 대해 설명했습니다. 최대 5초입니다 이것은 도구에 어떤 영향을 미칠까요?

오늘부터 이번 CLS 변경사항은 Lighthouse, PageSpeed Insights, Chrome UX 보고서 아래에서 CLS 기간 설정 조정 출시의 요약을 확인할 수 있습니다. 기존 구현과 비교하여 벤치마킹할 수 있는 기능을 제공하는 도구도 포함됩니다.

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

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

'이전' CLS

참고로 '이전' CLS는 페이지의 전체 수명에 걸쳐 레이아웃 변경을 측정합니다. 일부 개발자는 기간 설정 조정과 함께 CLS의 이전 정의를 모니터링하고자 할 수 있습니다. 좋은 소식이 있습니다. YouTube는 '이전 CLS'를 노출하고 있습니다. Lighthouse 및 CrUX에서 사용할 수 있습니다

Lighthouse v8에서는 JSON에서 audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift

다음과 같이 표시됩니다. experimental_uncapped_cumulative_layout_shift CrUX API에서 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

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

Lighthouse에서 CLS 가중치 업데이트

Lighthouse에 CLS가 처음 도입되었을 때 이는 완전히 새로운 측정항목이었습니다. 따라서 개발자가 앱을 테스트하고, 벤치마킹하고, CLS의 가중치가 성능 점수에서 덜 중요했습니다.

이제 개발자들에게 약간의 시간을 준 후에 Lighthouse 점수는 CLS의 가중치를 5% 에서 15%로 늘렸습니다. Core Web Vitals를 사용하는 방법과 일치하는 Lighthouse 점수에서 가장 가중치가 높은 측정항목입니다.

Lighthouse v8의 업데이트된 측정항목 가중치는 점수 계산기를 사용하면 됩니다.

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

하지만 실습과 필드 CLS의 주된 차이점은 실습 CLS의 관찰 기간이 '완전히 로드됨'에서 종료된다는 점입니다. 관찰 기간은 로드 후 활동을 포함한 전체 페이지 수명으로 연장됩니다. 즉, 기간 설정 조정은 이러한 차이를 크게 완화합니다.

현장에서 직접 측정

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

또는 Kubernetes의 웹 바이탈 JavaScript 라이브러리를 사용하면 이 변경사항으로 업데이트되었습니다.

추가 업데이트

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

• 업데이트 중: 최대 콘텐츠 페인트 측정항목의 최신 정의를 참고하세요. CrUX API, PSI, PSI API, Search Console이 2021년 6월 1일에 업데이트됩니다. CrUX BigQuery가 2021년 6월 8일에 업데이트됩니다.
• CrUX에서 첫 콘텐츠 페인트 트라이비닝 기준점이 다음과 같이 업데이트되었습니다. 좋음: [0~1.8초], 개선 필요: (1.8초~3초), 나쁨: [3초-∞]

결론

이번 변경은 대부분의 사이트에 대한 원활한 전환을 반영할 것으로 예상되므로 웹 바이탈 CLS 최적화 에서 레이아웃 변경을 측정하고 최적화하는 방법에 관한 도움말 및 유용한 정보를 확인하세요. 언제든지 web-vitals-feedback 그룹 측정항목 및 도구별 의견 포럼에 대한 Lighthouse Chrome UX 보고서 도움이 될 것입니다 감사합니다.

Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, 제프 호세, 폴 아이리시에게 의견을 제공해 주셔서 감사합니다.

히어로 이미지 제공: Barn Images / @barnimages, Unsplash