Core Web Vitals Visualizer: CWV 디버깅을 위한 무료 Chrome 확장 프로그램

Core Web Vitals 디버깅을 위한 무료 Chrome 확장 프로그램

Core Web Vitals Visualizer는 DevTools를 열지 않고 Core Web Vitals를 디버깅하기 위해 제가 만든 무료 Chrome 확장 프로그램입니다. 어떤 페이지에든 실시간 오버레이를 생성하여 LCP, CLS 및 INP에 영향을 미치는 요소를 정확히 보여줍니다. 14,000명 이상의 개발자가 사용하고 있습니다.

2026년 3월 Arjen Karel 최종 검토

저는 Core Web Vitals 전문가로서 페이지와 상호 작용할 때 페이지가 어떻게 반응하고 응답하는지 확인하는 데 많은 시간을 보냅니다. 그것이 Core Web Vitals에 어떤 영향을 미치며, 모바일 에뮬레이션으로 전환하거나 브라우저 캐싱을 비활성화할 때 지표가 어떻게 변할까요?

물론 저는 RUM 추적을 사용합니다. 이는 페이지 수준에서 어떤 지표가 통과하고 실패하는지 알려줍니다. 하지만 왜 실패할까요? 그것은 페이지와 상호 작용할 때만 실제로 파악할 수 있는 부분입니다.

많은 시간을 절약하기 위해 저는 긴 프로세스의 작은 부분을 자동화하고 지루한 작업의 일부를 대신해 주는 Chrome 확장 프로그램을 만들기로 결정했습니다. 그 결과가 바로 Core Web Vitals Visualizer입니다. 저는 이것을 모두가 사용할 수 있도록 공개하기로 했으니, 지금 바로 Chrome 웹 스토어에서 확인해 보세요.

Core Web Vitals Visualizer는 무엇을 하나요?

먼저 페이지와의 상호 작용을 기반으로 Core Web Vitals를 기록합니다. Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift, First Contentful Paint 및 Time to First Byte를 추적합니다.

다음으로 이러한 모든 지표를 시각화하는 오버레이를 생성합니다. 이를 통해 Largest Contentful Paint 요소가 무엇인지, 시각적 불안정성을 유발하는 요소가 무엇인지, 그리고 페이지와 상호 작용한 경우 어떤 이벤트가 최악의 입력 지연을 유발했는지 알 수 있습니다.

지표를 클릭하면 Core Web Vitals Visualizer가 해당 지표를 가장 기본적인 구성 요소로 세분화합니다. LCP의 경우 resource load delay, load duration 및 element render delay를 확인할 수 있습니다. INP의 경우 input delay, processing time 및 presentation delay를 확인할 수 있습니다.

왜 Lighthouse를 사용하지 않나요?

저는 이 질문을 많이 받습니다. 제 대답은 항상 "제가 Lighthouse를 사용하지 않는다고 말한 적은 없습니다"입니다 (하지만 Lighthouse를 그렇게 자주 사용하지는 않습니다). Lighthouse는 훌륭한 도구이며 익숙해지는 것이 좋습니다.

하지만 중요한 차이점이 있습니다. Lighthouse는 실험실 테스트이므로 데이터가 실제 상황을 대변하지 않을 수 있습니다. 이것이 제 확장 프로그램이 브라우저의 실제 데이터를 사용하는 이유입니다. 또한 Lighthouse는 실제 상호 작용 결과를 제공하지 않습니다. 페이지와 상호 작용하는 실제 사용자가 없기 때문에 INP를 측정할 수 없습니다. 대신 Total Blocking Time을 프록시로 사용합니다. 제 확장 프로그램은 발생하는 실제 CLS를 시각화하고 LCP 및 INP를 하위 부분으로 세분화하여 시간이 정확히 어디에 소요되는지 확인할 수 있게 해줍니다.

Google의 Web Vitals 확장 프로그램은 어떻게 되었나요?

Google은 2025년 1월에 Web Vitals Chrome 확장 프로그램의 지원을 중단했습니다. 이제 대신 DevTools의 Performance 패널을 사용하는 것을 권장합니다. DevTools는 강력하지만 전체 프로파일링 세션을 열지 않고 빠른 오버레이만 보고 싶을 때가 있습니다. 그것이 바로 Core Web Vitals Visualizer가 하는 일입니다. 또한 DevTools에서 단일 보기로 표시하지 않는 지표 하위 부분 분류도 제공합니다.

Core Web Vitals Visualizer 설치

Chrome 웹 스토어로 이동하여 Core Web Vitals Visualizer를 설치하세요. 마음에 드신다면 리뷰를 남겨주시면 감사하겠습니다.