새로운 실적 측정항목, PageSpeed Insights 및 Chrome 사용자 환경 보고서(CrUX) 업데이트 등
Chrome Developer Summit에서 폴 아이리시와 저는 Lighthouse의 Lighthouse CI, 새로운 성능 점수 공식 등 업데이트를 발표했습니다. Lighthouse 관련 중요 소식과 함께 새로운 성능 측정항목, PageSpeed Insights 및 Chrome 사용자 환경 보고서 (CrUX) 업데이트, 웹 생태계에 대한 Web Almanac의 분석 통계 등 흥미로운 성능 도구 개발 소식을 전해 드렸습니다.
새로운 실적 측정항목
사용자 환경의 미묘한 차이를 측정하는 것은 수익에 미치는 영향을 수치화하고 개선사항과 회귀를 추적하는 데 중요합니다. 시간이 지남에 따라 이러한 미묘한 차이를 포착하고 사용자 환경 측정의 격차를 메울 수 있는 새로운 측정항목이 발전했습니다. 측정항목에 새로 추가된 항목은 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) | 보통(ms) | 느리게 (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 개발자 서밋의 성능 도구 업데이트에 관한 자세한 내용은 속도 도구 진화 세션을 시청하세요.