새로운 실적 측정항목, PageSpeed Insights 및 Chrome 사용자 환경 보고서 (CrUX) 업데이트 등
Chrome 개발자 회의에서 Paul Irish와 저는 Lighthouse 업데이트(Lighthouse CI, 새로운 성능 점수 수식 등)를 발표했습니다. 중요한 Lighthouse 관련 소식과 함께 새로운 성능 측정항목, PageSpeed Insights 및 Chrome 사용자 환경 보고서 (CrUX) 업데이트, 웹 연감의 웹 생태계 분석에서 얻은 통계를 비롯한 흥미로운 성능 도구 개발 소식도 발표했습니다.
새로운 실적 측정항목
사용자 환경의 미묘한 차이를 측정하는 것은 수익에 미치는 영향을 수치화하고 개선사항과 회귀를 추적하는 데 중요합니다. 시간이 지남에 따라 이러한 미묘한 차이를 포착하고 사용자 경험 측정의 공백을 메우기 위해 새로운 측정항목이 발전했습니다. 측정항목 스토리에 새로 추가된 내용은 W3C 웹 성능 작업 그룹에서 인큐베이션 중인 두 가지 현장 측정항목(콘텐츠가 포함된 최대 페인트(LCP) 및 누적 레이아웃 이동(CLS))과 새로운 실험실 측정항목(총 차단 시간(TBT))입니다.
최대 콘텐츠 렌더링 시간(LCP)
최대 콘텐츠 렌더링 시간 (LCP)은 가장 큰 콘텐츠 요소가 표시 영역에 표시되는 시간을 보고합니다.
최대 콘텐츠 렌더링 시간 이전에는 첫 번째 의미 있는 페인트(FMP) 및 속도 색인 (SI)이 초기 페인트 후 로드 환경을 포착하는 데 사용되었지만, 이러한 측정항목은 복잡하고 페이지의 기본 콘텐츠가 로드된 시점을 파악하지 못하는 경우가 많습니다. 연구에 따르면 페이지에서 가장 큰 요소가 렌더링되는 시점을 확인하는 것만으로도 페이지의 기본 콘텐츠가 로드되는 시점을 더 잘 나타낼 수 있습니다.
새로운 최대 콘텐츠 페인트 측정항목은 곧 Lighthouse 보고서에서 사용할 수 있으며 그때까지는 JavaScript에서 LCP를 측정할 수 있습니다.
총 차단 시간 (TBT)
총 차단 시간 (TBT) 측정항목은 입력 응답성을 방지하기에 충분한 시간 동안 기본 스레드가 차단되었던 콘텐츠가 포함된 첫 페인트 (FCP)와 상호작용 시작 시간 (TTI) 사이의 총 시간을 측정합니다.
태스크가 기본 스레드에서 50밀리초 이상 실행되면 긴 태스크로 간주됩니다. 그보다 긴 밀리초는 해당 작업의 차단 시간으로 집계됩니다.

페이지의 총 차단 시간은 FCP와 TTI 사이에 발생한 모든 긴 작업의 차단 시간의 합입니다.

Time to Interactive는 로드 후반에 기본 스레드가 안정화되는 시점을 잘 식별하지만 Total Blocking Time은 로드 중에 기본 스레드가 얼마나 스트레스를 받는지 수치화하는 것을 목표로 합니다. 이렇게 하면 TTI와 TBT가 서로를 보완하고 균형을 유지할 수 있습니다.
레이아웃 변경 횟수(CLS)
누적 레이아웃 변경 (CLS)은 페이지의 시각적 안정성을 측정하고 사용자가 예기치 않은 레이아웃 변경을 경험하는 빈도를 정량화합니다. 콘텐츠가 예상치 않게 이동하면 매우 불편할 수 있으며 이 새로운 측정항목을 사용하면 사용자에게 얼마나 자주 이 문제가 발생하는지 측정하여 문제를 해결할 수 있습니다.
레이아웃 변경 횟수에 관한 자세한 가이드에서 계산 방법과 측정 방법을 알아보세요.
새로운 Lighthouse 성능 점수 수식은 곧 FMP 및 FCI를 강조하지 않고 페이지가 사용 가능한지 여부를 더 잘 포착하는 세 가지 새로운 측정항목(LCP, TBT, CLS)을 포함할 예정입니다.

자세한 내용은 Lighthouse 성능 점수 및 새로운 web.dev 측정항목 수집을 확인하세요.
PageSpeed Insights에서 필드 데이터 (CrUX) 기준점 조정
지난 1년 동안 Google은 Chrome 사용자 환경(CrUX) 데이터를 통해 현장의 웹 성능을 분석해 왔습니다. 이 데이터에서 얻은 통계를 바탕으로 현장 실적에서 웹사이트에 '느림', '보통', '빠름' 라벨을 지정하는 데 사용하는 기준점을 재평가했습니다.

사이트에 대한 전반적인 평가를 얻기 위해 PageSpeed Insights(PSI)는 현장 데이터의 총 분포에서 특정 백분위수를 해당 사이트의 골드넘버로 사용합니다. 이전에 사용된 기준점은 First Contentful Paint의 90번째 백분위수와 First Input Delay (FID)의 95번째 백분위수였습니다.
예를 들어 사이트의 FCP 분포가 빠름 50%, 보통 30%, 느림 20%인 경우 90번째 백분위 FCP가 느림 섹션에 있으므로 사이트의 전체 필드 점수가 느림이 됩니다.
웹사이트 전반에서 더 나은 전반적인 분포를 위해 조정되었으며 새로운 분류는 다음과 같습니다.
측정항목 | 전체 백분위수 | 빠름 (밀리초) | 보통(ms) | 느림 (밀리초) |
FCP | 75번째 백분위수 | 1000 | 1000-3000 | 3000+ |
FID | 95번째 백분위수 | 100 | 100-300 | 300+ |
예를 들어 사이트의 FCP 분포가 빠름 50%, 보통 30%, 느림 20% 인 경우 75번째 백분위 FCP가 보통 섹션에 있으므로 사이트의 전반적인 필드 점수는 보통이 됩니다.
PageSpeed Insights의 표준 URL 리디렉션
사용자 환경을 최대한 정확하게 측정할 수 있도록 PageSpeed Insights팀에서 PSI에 재분석 메시지를 추가했습니다. 새 URL로 리디렉션되는 사이트의 경우 실제 실적을 더 완전하게 파악하기 위해 방문 페이지 URL에서 보고서를 다시 실행하라는 메시지가 표시됩니다.

새 Search Console 속도 보고서의 CrUX
Search Console은 Chrome Dev Summit 일주일 전에 새로운 속도 보고서를 출시했습니다. Chrome 사용자 환경 보고서의 데이터를 사용하여 사이트 소유자가 잠재적인 사용자 환경 문제를 파악할 수 있도록 지원합니다. 속도 보고서는 유사한 URL 그룹을 '빠름', '보통', '느림' 버킷에 자동으로 할당하고 특정 문제의 성능 개선에 우선순위를 두는 데 도움이 됩니다.

웹 연감

개막 기조연설에서 Google은 웹 상태에 관한 통계와 동향을 웹 커뮤니티의 전문성과 일치시키는 연례 프로젝트인 웹 연감의 출시를 발표했습니다. Chrome 개발자와 웹 커뮤니티로 구성된 85명의 참여자가 이 프로젝트에 자원봉사로 참여했습니다. 이 프로젝트는 사이트가 빌드, 전송, 사용되는 방식을 다루는 웹의 20가지 핵심 측면을 분석합니다. 웹 연감을 살펴보고 웹의 성능, JavaScript, 서드 파티 코드 상태에 관해 자세히 알아보세요.
자세히 알아보기
Chrome 개발자 서밋의 성능 도구 업데이트에 관한 자세한 내용은 속도 도구 진화 세션을 시청하세요.