FrontEnd 성능 측정 도구 및 구성 방안

프론트엔드 성능을 무엇으로 재고 어떻게 누적해서 볼지 정리한 글이다. 백엔드와 배치는 기준이 명확한데 프론트엔드는 그렇지 않다는 문제의식에서 출발해, 측정 도구들을 비교하고 시계열 대시보드의 필요성을 짚은 뒤 sitespeed.io를 도커로 띄워 대시보드까지 만드는 절차를 보여준다.

핵심 포인트

백엔드는 초당 처리 건수, 배치는 총 소요 시간이 기준인데 프론트엔드는 딱 잘라 말할 기준이 없다.
측정 항목은 전반적인 최적화 점수, 특정 동작의 처리 소요 시간, 입력 반응과 애니메이션 부드러움으로 나뉜다.
대부분의 측정 도구가 첫 번째 항목만 다루며 나머지는 브라우저 개발자 도구의 런타임 분석을 봐야 한다.
로컬에서 간단히 볼 목적이면 브라우저에 내장된 검사 탭이 여러모로 간편하다.
측정을 계속하면 결과가 쌓이는데 변화를 보려면 시계열 차트 대시보드가 필요하다.
정기 배포가 있는 서비스라면 주기적 측정을 자동화해 항목별 변화를 감지하고 알림을 받을 수 있다.

상세 정리

문제의식: 프론트엔드는 봐야 하는 것이 너무 많아 난해하고 그래서 측정 도구도 많이 나와 있다.
항목 1: 로딩 속도 등 전반적인 최적화 점수인데 도구마다 기준이 다르다.
항목 2: 특정 자바스크립트 동작이 끝나기까지의 시간으로, 예컨대 달력이 뜨기까지 걸리는 시간이다.
항목 3: 키보드와 마우스 반응 속도, 애니메이션의 매끄러움이다.
도구의 한계: 대부분 첫 번째 항목에 해당하며 나머지는 브라우저 개발자 도구의 성능 평가 문서를 참고하라고 안내한다.
도구 비교: 여러 측정 사이트와 도구를 나열하고 검색 트렌드로도 비교해본다. 다만 키워드 선정이 잘못됐을 수 있으니 참고만 하라고 단서를 단다.
누적의 문제: 결과가 많아지면 항목별로 어떻게 변했는지 보려고 여러 개를 펼쳐놓고 눈으로 대조하는 수고가 생긴다.
대시보드가 필요한 조건: 일회성 측정이면 상관없지만 지속적으로 변화를 보고 분석하려면 시계열 차트가 반드시 필요하다.
자동화의 효용: 정기 배포가 있는 서비스에서 주기적 측정을 걸어두면 항목별 성능 변화를 감지하거나 알림을 받을 수 있다.
도구 선택: 도커로 쉽게 띄울 수 있는 오픈소스인 sitespeed.io를 골랐다. 로그인 처리도 되고 다른 도구의 측정 결과도 같은 대시보드에서 볼 수 있다.
사전 준비: 도커 데스크톱을 설치하고 실행해 정상 화면이 뜨는 것까지 확인한다.
라이선스 주의: 도커 데스크톱이 유료로 전환됐으므로 업무에 적용하기 전 무료 사용 범위인지 확인하라고 짚는다. 소규모 기업과 개인 사용, 교육, 비상업 오픈소스가 범위다.
구축 절차: 데이터 저장 디렉터리를 만들고 공식 저장소의 compose 파일을 받아 실행하면 저장소와 대시보드가 함께 올라온다.
측정 실행: 컨테이너를 일회성으로 띄워 대상 사이트를 측정하고 결과를 저장소로 보낸다. 테스트 이름은 임의로 지정한다.
결과 확인 1: 결과 디렉터리에 실행 시각별 폴더가 생기고 그 안의 진입 파일을 브라우저로 열면 상세 측정 결과를 볼 수 있다.
결과 확인 2: 로컬의 대시보드 주소로 접속하면 여러 번 측정한 내역이 시계열로 쌓인 것을 볼 수 있다.
관리 명령: 컨테이너 종료와 삭제, 데이터 볼륨 삭제 명령을 함께 정리해둔다.
마무리 견해: 최적화 기법을 정리한 고전이 나온 지도 15년이 지났고 기법은 계속 다양해지므로, 조금씩 관심을 가지면 더 나은 웹이 될 것이라고 맺는다.