새로운 “Performance Insights” 개발자 도구 살펴보기

개요

크롬 102 버전에서 처음으로 등장한 새로운 개발자 도구 탭입니다. 아직 실험단계이지만 체험해 볼 수 있습니다. 이름에서 알 수 있듯이 성능을 측정하는 탭 같지만, 성능 탭과 라이트하우스, web vitals같은 도구들이 이미 있는데 왜 굳이 새로운 탭을 만들었을까요?

문서에서 소개하는 이유는 3가지입니다.

1. (아마 기존 성능 탭을 의미하는 것 같지만) 정보가 너무 많습니다. 표시되는 데이터를 간소화해 관련된 정보만 표시합니다.
2. 사용 사례(use case)를 구분하기가 어려웠습니다. Performance insights 탭은 use-case-driven 분석이 가능합니다. (현재는 페이지 로드 사례만 측정이 가능한 것처럼 보이지만 이후에는 상호작용 같은 케이스도 대응이 가능하도록 개발될 것처럼 보입니다.)
3. 브라우저를 효과적으로 사용하기 위해는 깊은 전문 지식이 필요했습니다. 이 패널에서는 주목해야 하는 특정 지점들을 강조해주고 실행할 수 있는 피드백들을 제공합니다.

아래에서 사용하는 모습을 보여드리겠지만, 실제로 시각적으로 보기 좋게 여러 탭에서 구석구석 찾아야 했던 정보들이 나타나고 한 번에 잘 나타나고 있습니다. 그럼 간단하게 사용해보도록 하겠습니다.

사용하기

준비

위 이미지처럼 More options > More tools > Performance insights 순서로 들어가서 클릭하거나

위 이미지처럼 Command Menu로도 실행이 가능합니다.

해당 창을 열게 되면 위 이미지와 같은 도구가 나타나게 됩니다.