성능 측정을 위해 활용할 수 있는 WebPageTest

yceEffort 님의 '새로 바뀐 네이버 메인 훔쳐보기' 라는 글을 훔쳐보던 중, MIME 타입별 리소스를 요청한 횟수와 그 크기를 보여주는 차트가 눈에 들어왔다.

이 차트는 어떤 신문물이란 말인가..!

네트워크 탭에서 MIME별로 태그를 걸면, 해당하는 리소스의 기록만을 조회할 수 있다.

그동안은 성능을 디버깅하기 위해 네트워크 탭에 필터를 걸어가며 리소스를 조회해 왔는데, 저런 물건이 데브툴에 있었다니.

너무 궁금해 찾아보았지만 데브툴은 물론 라이트하우스 보고서에도 저런 차트는 찾아볼 수 없었다.

다행히 구글 렌즈로 이미지를 검색해 이것이 "WebPageTest" 라는 도구로 생성된 차트임을 알 수 있었는데, 라이트하우스와 비슷한 기능을 제공하지만 WebPageTest 쪽이 조금 더 내가 찾던 도구에 가깝다고 느껴졌다.

 

둘의 역할은 정말 비슷하지만 라이트하우스는 "성능 및 접근성을 올리려면 OO를 수정하세요" 를 제안하는 컨설팅의 느낌을 주는 것 같고, WebPageTest 는 여러 성능 지표 및 렌더링 과정에서의 여러 지표를 담백하게 표시해주는 것 같다.

대략 이런 느낌?

Lighthouse : '여기 200개의 문제가 있어요. 어떻게 수정해야 하나면...'
WebPageTest : '이걸 보고도 느끼는게 없으신가요?'

라이트하우스가 너무 많은 정보와 조언을 제공하는 것처럼 느껴져 보다 담백한 레포트를 확인해보고 싶은 개발자라면, 한번쯤은 WebPageTest 를 사용해보는 것도 분명 괜찮은 경험이 될 것 같다.