새로운 성능 측정항목, PageSpeed Insights 및 Chrome 사용자 환경 보고서 (CrUX) 업데이트 등이 있습니다.
Chrome Developer Summit에서 폴 아일랜드와 저는 Lighthouse의 업데이트인 Lighthouse CI, 새로운 성능 점수 수식 등을 발표했습니다. Lighthouse 관련 주요 소식과 함께 새로운 성능 측정항목, PageSpeed Insights 및 Chrome 사용자 환경 보고서 (CrUX) 업데이트, 웹 생태계에 관한 웹 알람의 분석 통계 등 흥미로운 성능 도구 개발 정보도 선보였습니다.
새로운 실적 측정항목
사용자 환경의 미묘한 차이를 측정하는 것은 사용자 환경이 수익에 미치는 영향을 수치화하고 개선사항과 회귀를 추적하는 데 핵심적입니다. 시간이 지남에 따라 이러한 미묘한 차이를 포착하고 사용자 환경 측정의 간극을 메울 수 있도록 새로운 측정항목이 발전했습니다. 측정항목 스토리에 가장 최근에 추가된 것은 두 가지 필드 측정항목인 최대 콘텐츠 페인트 (LCP) 및 누적 레이아웃 변경 (CLS)입니다. W3C 웹 성능 실무 그룹에서 각광받고 있으며 새로운 실험실 측정항목인 총 차단 시간(TBT)이 있습니다.
최대 콘텐츠 렌더링 시간(LCP)
콘텐츠가 포함된 최대 페인트 (LCP)는 표시 영역에 가장 큰 콘텐츠 요소가 표시되는 시간을 보고합니다.
최대 콘텐츠 페인트 전에는 첫 번째 의미 있는 페인트(FMP) 및 속도 색인 (SI)이 초기 페인트 이후의 로드 환경을 캡처하는 데 사용되었지만 이러한 측정항목은 복잡하며 페이지의 주요 콘텐츠가 로드되었을 때 식별되지 않는 경우가 많습니다. 연구에 따르면 페이지에서 가장 큰 요소가 렌더링되는 시점을 보는 것만으로 페이지의 주요 콘텐츠가 로드될 때 더 잘 나타난다고 합니다.
새로운 최대 콘텐츠 렌더링 시간 측정항목이 곧 Lighthouse 보고서에서 제공될 예정이며 그때까지는 자바스크립트에서 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년 동안 Chrome 사용자 환경(CrUX) 데이터를 통해 현장의 웹 실적을 분석해 왔습니다. Google은 이 데이터에서 얻은 통계를 바탕으로 웹사이트의 필드 성능에서 '느림', '보통', '빠름' 라벨을 지정하는 데 사용하는 기준을 다시 평가했습니다.
PageSpeed Insights(PSI)에서는 사이트의 전반적인 평가를 위해 필드 데이터 총 분포의 특정 백분위수를 해당 사이트의 황금수로 사용합니다. 이전에 사용된 기준은 콘텐츠가 포함된 첫 페인트의 경우 90번째 백분위수, 최초 입력 지연 (FID)의 경우 95번째 백분위수였습니다.
예를 들어 사이트의 FCP 분포가 빠름 50%, 보통 30%, 느린 20%인 경우 90번째 백분위수 FCP가 느린 섹션에 있으므로 사이트의 전체 필드 점수가 느립니다.
웹사이트 전반에 걸쳐 더 효율적으로 분포되도록 조정되었으며 새로운 분류는 다음과 같습니다.
| 측정항목 | 전체 백분위수 | 빠름 (ms) | 보통(밀리초) | 느림 (밀리초) |
| FCP | 75번째 백분위수 | 1000 | 1000-3000 | 3,000명 이상 |
| 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은 웹 커뮤니티의 전문성과 웹 상태에 관한 통계 및 트렌드를 일치시키는 연간 프로젝트인 Web Almanac의 출시를 발표했습니다. Chrome 개발자와 웹 커뮤니티로 구성된 85명의 참여자가 프로젝트에 자발적으로 참여했습니다. 이 프로젝트에서는 사이트의 구축, 제공, 경험과 관련된 웹에 관한 20가지 핵심 측면을 분석합니다. 웹의 성능, JavaScript, 서드 파티 코드의 상태에 대해 자세히 알아보려면 웹 개요를 살펴보세요.
자세히 알아보기
Chrome Developer Summit의 성능 도구 업데이트에 관한 자세한 내용은 속도 도구의 진화에 관한 강연을 시청하세요.