사이트 성능 측정

사이트 성능 측정을 위한 도구는 여러 가지가 있다. 대표적으로 webpagetest.org, 크롬의 개발자 도구에서 제공하고 있는 Lighthouse(구 Audits) 패널, sitespeed.io 등 사이트를 꼽을 수 있다.

 

사이트의 렌더링 성능 측정을 위해 위에서 나열한 도구들을 사용해보았다.

 

 

1. webpagetest.org

성능을 측정해주는 웹 서비스로써, 성능 테스트를 하길 원하는 사이트 URL을 입력하고 테스트 지역 / 브라우저 환경 등을 선택하면 테스트 결과를 보여준다. 이미 서비스 중이며 성능 개선 작업이 예정된 경우에 before 성능 기록 용도로 활용하면 좋다.

하지만 webpagetest에서 접근할 수 없는 사이트(공개되지 않은 사이트: 로컬/개발 환경 등)에 대해서는 활용이 불가하였다.

 

2. Lighthouse 패널

브라우저에서 테스트를 원하는 사이트에 접속한 후 Lighthouse 패널에서 리포트 생성 버튼만 누르면 결과를 알려주어 편리하다. 브라우저에서 렌더링 결과와 성능 측정 수치들을 함께 볼 수 있어 좋았다.

하지만 단일 측정 수치만 확인이 가능하였기 때문에 측정 수치의 중간 값이나 평균치를 얻기 위해선 수동으로 새로고침하여 테스트해야만 했다.

Lighthouse의 경우 오픈소스로 공개되어 있으며 크롬 브라우저의 개발자 도구와 별개로도 사용이 가능하다.

https://github.com/GoogleChrome/lighthouse

공개된 오픈소스를 사용하여 다중 성능 측정 위한 코드를 작성해보았으나, 측정이 끝나고 크롬을 종료한 후에 다시 측정을 시작하는 것이 불가하였다. 부가적인 도구를 함께 사용해서 이 현상을 우회하는 처리가 필요해 보였다.

옵션이 많아 세부적인 측정이 가능하나 그로 인해 사용이 어렵다. (자유도가 높을수록 난이도도 높아지는 관계가 적용된다.)

 

3. sitespeed.io

웹 서비스가 아니다. 소개에 따르면 오픈 소스 도구의 모음이라고 한다. 마찬가지로 sitespeed.io도 오픈 소스이다.

https://github.com/sitespeedio/sitespeed.io

개발 환경에 설치하고 원하는 설정을 진행한 후 성능 측정을 원하는 사이트에 대해 측정을 진행할 수 있다.

설치만 마치면 측정은 아주 쉽다.

 

 

필자는 sitespeed.io를 사용하여 다음과 같이 반복 횟수, 브라우저명만 설정한 후 테스트를 진행하였는데

들인 시간 대비 가장 만족스러운 결과를 얻을 수 있었다.

{
  "browsertime": {
    "iterations": 10,
    "browser": "chrome"
  }
}

sitespeed.io 를 실행하면 sitespeed-result 폴더에 결과 페이지가 생성된다. 페이지를 실행하면 테스트의 중간 값 수치 및 여러 타입의 측정 결과를 보여준다.