DEVOCEAN

시작하는 글

안녕하세요 웹 프론트엔드 개발자 Felix입니다.

웹 프론트엔드 성능 측정 방법 및 Tips에 대한 내용으로 두번째 글을 쓰려고 합니다.

• 웹 프론트엔드 성능 측정 방법 및 Tips(1) : https://devocean.sk.com/blog/techBoardDetail.do?ID=165395

위 글에서는 웹 성능 측정 도구들과 웹 성능을 측정하는 방법 중 Chrome 브라우저의 Lighthouse를 사용하는 방법에 대해 소개해드렸고, 분석 방법에 대해서도 간단히 설명드렸습니다.

Lighthouse는 로컬 개발시에 많이 활용했던 방법입니다.

물론 Lighthouse로도 실제 운영 환경 서비스에서도 측정은 가능하지만 정확하지는 않아서 Page Speed Insights나 Web pagetest를 사용하는데요.

이번 글에서는 WebPageTest에 대해 소개해드리고, WebPageTest의 특징, 측정 방법에 대해서 설명해드리려고 합니다.

구글에서 사용하는 측정 도구들은 이전 블로그에서 언급 드렸던 Web Core Vital이라는 성능 지표를 기반으로 웹 사이트의 성능을 측정합니다.

이번에 소개드릴 WebPageTest도 구글의 성능 측정 지표를 기반으로 성능을 측정합니다. Page Speed Insights도 좋지만, 개인적으로는 Google Page Speed보다 WebPageTest만이 가질 수 있는 장점이 많다고 생각합니다.

이번 글을 읽어보시면 WebPageTest의 전반적인 사용법에 대해서 알 수 있습니다.

WebPageTest란?

WebPageTest는 오픈소스 도구로써, 웹사이트를 모니터링하고 웹 성능 최적화하는데 도움을 주는 온라인 도구입니다.

웹 사이트의 로딩 시간, 렌더링 속도, 네트워크 트래픽을 포함한 내용들을 보기 좋게 제공한다.

2008년에 출시되었고, 오픈소스이며, 유료로 과금한다면 사용할 수 있는 API도 제공되기도 합니다.

WebPageTest의 특장점

WebPageTest가 실제 운영 사이트를 측정하는 Page Speed Insight, PingDom 등과 비교한 WebPageTest에 대한 장점을 나열해보았습니다.

첫 번째, 글로벌 웹사이트에 대해 웹 성능 측정하기에 적합한 측정 도구입니다. 다양한 환경에서 테스트가 가능합니다.

아래처럼, 정해진 모바일, 데스크톱뿐만 아니라, 3G, 4G 등 여러 환경에서 측정할 수 있습니다.

테스트 지역별로 다양한 지역을 선택해서 테스트 할 수 있습니다.

크롬, 파이어폭스 등 브라우저 종류를 선택하여 테스트 할 수도 있습니다.

다양한 네트워크 환경에 대해 가정하여 테스트 할 수가 있습니다.

Cable, 3G Slow, 3G, 4G 등 여러가지 옵션 중 설정이 가능합니다.

추가적으로 Number of Tests to Run 항목에서 설정 가능한데 테스트를 몇 번 시뮬레이션 할 지 설정도 가능합니다.

두 번째, WebPageTest에서 웹 성능 측정시 결과를 보기가 깔끔합니다.

크롬 브라우저에 탑재된 Lighthouse의 경우도 측정이 가능하지만 같은 지표들에 대해서도 WebPageTest가 가독성이 더 좋다고 생각합니다.

세 번째, 심층적인 결과 리포트가 잘 제공됩니다.

위에 결과 화면처럼, 실제 데이터 결과를 기반으로 측정해서 사용자들의 지표에 대한 결과 확인도 가능합니다.

위에는 실제 리포트인데요. FCP, LCP, CLS, FID, INP 모두 Good이라는 좋은 성능 수치를 기록함을 확인할 수 있습니다.

TTFB 수치는 다른 것들에 비해 상대적으로 개선이 필요할 수 있겠습니다.

한번의 측정만으로 아래처럼 다양한 정보 확인이 가능합니다.

마지막으로, WebPagetest는 웹 프론트엔드 성능 측정에 강력한 무료 측정도구 입니다.

유료버전이 있지만, 많은 경우에 무료 버전으로도 사용이 충분하다고 생각합니다.

아래를 보면 무료버전과 유료버전의 차이를 확인 할 수가 있습니다.

무료 계정이여도 매달 300번 테스트를 할 수 있고, 테스트 갯수가 모자르면 계정을 하나 더 만들면 됩니다.

그리고 기존 테스트한 내용에 대한 히스토리 저장도 가능한 점이 좋다고 생각합니다.

실제 운영 중인 사이트에 대해 웹 성능 측정 기록들을 축적하여 확인할 수가 있습니다.

WebPageTest 측정 방법 : Quick Guide

WebPageTest를 이용한 웹 사이트 성능 측정은 매우 간단합니다.

WebPageTest (https://www.webpagetest.org/) 사이트에 접속하여 측정하고자 하는 url을 넣고 테스트를 실행하면 됩니다.

url 입력 후 아래 노란색 버튼의 ‘Start Test’를 클릭하면 됩니다.

웹 성능 측정 시작을 알리는 노란 버튼을 클릭하면 실시간으로 테스트가 됨을 확인할 수 있습니다.

보통 1분 내로 아래와 같이 측정하고자 하는 사이트의 웹 성능 측정에 대한 결과를 확인할 수가 있습니다.

마치는 글

웹 사이트에 대한 개발도 중요하지만, 사용자에게 좋은 웹사이트를 제공하려면 지속적인 성능 측정을 통해 웹 사이트 성능 최적화에 힘써야 합니다.

필자가 다양한 성능 측정도구를 사용해봤지만, 실제 운영 중인 웹사이트의 성능을 측정할 때는, WebPageTest를 추천드립니다.

구글의 PageSpeed Insights를 많이 사용하지만 WebPageTest가 다양한 옵션과 상황에서 테스트 할 수 있고, 결과에 대한 UI/UX도 좋아서 해석도 하기에 용이합니다.

이번시간에는 WebPageTest의 간단한 사용법과 특징에 대해 알아봤습니다.

다음번에는 WebPageTest 분석 방법에 대해 작성하도록 하겠습니다.

그리고 필자가 많이 사용했던 도구 사용법에 대해서도 공유하고자 합니다.

감사합니다.