Ngrok과 PSI를 이용한 Web 성능 측정
Local에 개발 중인 Web의 성능을 측정해보자
개요
Local에 WebServer를 띄워서 개발하던 중 사이트의 성능 측정이 하고 싶어 졌다.
Chrome Dev Tool을 이용해서도 어느 정도 Insight를 얻을 수 있지만, Google에서 만든 Page Speed Insight(이하 PSI)를 이용해서 Feature 별로 성능에 대한 값을 측정하고 싶었는데,
Local에서 개발하고 있는 상태여서 PSI를 이용해서는 측정할 수가 없었다.
그러던 중에 Ngrok을 알게 되어 PSI를 이용해서 성능 측정을 할 수 있었다!
그래서 Ngrok과 PSI를 이용한 성능 측정 방법에 대한 글을 적어보도록 하겠다.
Ngrok
ngrok이 어떠한 것인지 알아보자.
Ngrok의 기본 원리ngrok은 Webhook을 이용하여 local에 떠있는 서버를 방화벽을 넘어 ngrok.com쪽에 바인딩해주는 서비스이다.
이를 이용하면 ngrok.com/xxx로 바인딩된 주소를 이용하여 외부에서도 개발 중인 서버에 접속할 수 있는 것이다.
ngrok 설치
ngrok을 먼저 설치해보자.
ngrok 사이트에 들어가면 자신이 사용하는 OS에 맞게 받을 수 있다.
필자의 경우 Mac을 사용하기 때문에 Mac OS 버전으로 받았다.
다운로드한 후 압축을 풀고 나온 binary 파일을 terminal에서 global로 사용할 수 있도록 /usr/local/bin으로 옮겨준다.
이제 ngrok을 사용할 준비는 모두 완료되었다.
PSI
PSI는 Google Speed Insight의 약자이다.
https://developers.google.com/speed/pagespeed/insights/
위 링크를 통해서 Web Site 성능과 Mobile Friendly 점수도 볼 수 있다.
하지만 위 사이트보다는 CLI Tool을 이용해서 보는 것이 다양한 Item에 대한 Score를 볼 수 있다.
CLI를 통해서 속도를 측정할 수 있는 Node 기반의 라이브러리를 사용하면 된다.
https://github.com/addyosmani/psi
위 사이트에서 하단을 보면 CLI에 설치하는 커맨드가 있다.
npm install --global psi
psi까지 설치 완료한다면 준비는 완료된 것이다.
성능 측정해보기
먼저 ngrok을 이용해 local에 떠있는 서버를 ngrok에 연결시켜줘야 한다.
ngrok http 8080
"8080"부분에는 자신의 웹 서버가 떠 있는 포트를 넣어주면 된다.
실행하면 뭔가 새로운 화면이 보일 텐데 forwarding이라는 부분이 있다.
Forwarding https://43c93 fc0.ngrok.io -> localhost:8080
forwarding과 연결된 ngrok의 URL에 들어가면 Local에 떠 있는 Web Server에 접속되는 것을 볼 수 있다.
이제 psi를 이용해서 성능 테스트만 해주면 된다.
psi https://43c93 fc0.ngrok.io/
이제 터미널에 성능 측정 결과가 나올 것이다!
기본적으로는 mobile 화면일 때를 기준으로 측정되는데 만약 Desktop기준으로 변경하고 싶다면,
psi https://43c93 fc0.ngrok.io/ --strategy=desktop
이렇게 간단하게 개발 중인 Web에 대해서 성능 측정을 할 수 있다!
