Core Web Vitals Visualizer 용 Google Chrome

코어 웹 비탈리티 시각화 도구: 어떤 웹페이지의 코어 웹 비탈리티를 시각화하세요.

RUM Visualizer는 MarketingTracer에서 개발한 Chrome 확장 프로그램입니다. 이 확장 프로그램을 사용하면 모든 웹 페이지의 핵심 웹 핵심 지표를 시각화할 수 있습니다. 이 확장 프로그램을 사용하면 Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), First Contentful Paint (FCP), Interaction to Next Paint (INP) 및 Time To First Byte (TTFB)와 같은 중요한 지표를 쉽게 액세스하고 이해할 수 있습니다.

이 확장 프로그램은 각 지표에 대해 다양한 기능을 제공합니다. LCP의 경우 RUM 값을 얻을 수 있으며 LCP를 시각화하고 Time to First Byte, Resource Load Delay, Resource Load Time 및 Element Render Delay와 같은 구성 요소로 분해할 수 있습니다. 마찬가지로 FID의 경우 RUM 값을 얻을 수 있으며 FID를 시각화하고 분해할 수 있습니다.

CLS 값은 얻을 수 있으며 분해하여 표시하고 애니메이션화할 수 있습니다. FCP 값도 액세스하고 분해할 수 있습니다. INP 값은 시각화할 수 있으며 분해할 수 있습니다. TTFB 값은 분석을 위해 얻을 수 있으며 분해할 수 있습니다.

이러한 기능 외에도 이 확장 프로그램은 쉬운 디버깅 옵션을 제공합니다. 현재 페이지에 대해 느린 네트워크 조건 (3g)을 에뮬레이션하거나 캐싱을 활성화 또는 비활성화할 수 있습니다. 이러한 옵션은 성능 문제를 식별하고 해결하는 데 도움이 됩니다.

이 확장 프로그램은 여러 번의 업데이트를 거쳐 왔으며, 1.2 버전에서는 상세한 LCP 정보를 추가하고, 1.4 버전에서는 왼쪽 측면 메뉴와 렌더 차단 리소스에 대한 추가 정보를 도입했으며, 1.5 버전에서는 코드 및 레이아웃 개선 및 페이지 실험을 포함했습니다. 1.6 버전에서는 더 나은 INP 분해와 작은 코드 개선을 제공하며, 1.7 버전에서는 INP 분석 중 콘솔에 이벤트, 긴 작업 및 긴 애니메이션 프레임을 기록할 수 있도록 사용자에게 허용합니다.

Core Web Vitals Visualizer를 사용하면 웹 개발자와 성능 열정가들은 모든 웹 페이지의 성능에 대한 가치 있는 통찰력을 얻고 사용자 경험을 개선할 수 있습니다.