FrontEnd 성능 측정 도구 및 구성 방안
안녕하세요. 광고개발팀에서 광고 관련 서비스 개발을 하고 있는 이기동입니다.
15년 전 YSlow가 나왔을 적부터 성능 측정에 관심이 많았고 이를 통해 해결한 업무상 고민과 경험을 기록하였습니다.
성능 분석 중에서도 FrontEnd 웹사이트 최적화 관련 분석툴 등과 사용법 등에 관심 있으신 분들에게 작은 도움이 되었으면 합니다. 🤟
순서
- 성능 측정 어떻게 하고 계신가요?
- 웹사이트 성능 분석 사이트/툴 비교
- 성능 분석에 대한 시계열 대시보드의 필요성
- 10분 안에 sitespeed.io로 대시보드 생성 및 데이터 측정하기
- 맺음말
1. 성능 측정 어떻게 하고 계신가요?
리소스 사용률 등을 배제하고 단순하게 보면 성능 측정은 아래와 같습니다.
- BackEnd는 초당요청처리수(TPS=Transaction Per Second).
- Batch는 총소요시간(Elapsed Time).
- FrontEnd는? FCP(First Contentful Paint)? LCP(Largest Contentful Paint)?
딱 뭐라고 할 기준이 없어 측정하기 어렵고, 봐야 하는 것들이 너무 많아 좀 난해합니다. 그래서 FrontEnd는 성능을 측정할 수 있는 도구(또는 사이트)들이 많이 나와있습니다.
FrontEnd에서의 성능측정을 할수 있는 항목은 무엇이 있을까요?
- 로딩 속도등 전반적인 최적화 Score(측정도구별 기준이 상이함)
- 특정 Action(Javascript)을 처리하는데 걸리는 총 소요 시간(ex: 캘린더가 뜨는데까지 걸리는 시간)
- 키보드/마우스 반응속도, 애니메이션 매끄러움 등
대부분의 성능측정 도구들이 1번에 해당됩니다. 2, 3번과 같이 Javascript(런타임 분석)연산과 관련해서는 아래의 링크를 참고하시면 됩니다.
2. 웹사이트 성능 분석 사이트/툴 비교
아래와 같이 다양한 도구들이 있고 간단하게 로컬에서 실행하기에는 “Chrome devtool Lighthouse Tab” 이 여러모로 간편합니다.
궁금해서 검색해 본 Google Trends 비교
Google Trends 검색 트랜드 자료로 키워드가 예시가 잘못 되었을 수도 있으니 참고하여 봐주시기 바랍니다.
3. 성능 분석에 대한 시계열 대시보드의 필요성
웹사이트 성능측정을 지속하면 할수록 측정결과가 많아지게 됩니다.
측정결과가 많아지면 측정항목별로 데이터가 어떻게 변화하였는지 알기 위해선 여러개를 펼쳐놓고 매직아이로 보는 수고가 필요할 수 있습니다.
따라서 스팟성이라면 크게 상관없지만 지속적으로 측정결과의 변화를 보고 분석하고 싶다면 시계열 차트를 볼수 있는 대시보드는 반드시 필요합니다.
정기적으로 배포를 하고 있는 서비스가 있을 때 특정 주기로 성능 측정을 하도록 자동화를 해놓았다면 아래와 같은 차트를 통하여 각 측정 항목별 성능의 변화를 감지하거나 변화에 대해서는 Alerts를 받을 수 있습니다.
4. 10분 안에 sitespeed.io로 데이터 측정하고 대시보드까지 생성하기
아래는 제가 좋아하는 오픈소스인 sitespeed.io를 docker를 이용하여 쉽고 간편하게 측정 및 대시보드 만들 수 있습니다.
로그인 처리 등도 가능하고 webpagetest 또는 lighthouse의 측정 결과들도 대시보드에서 보기가 가능하니 자세하게 알고 싶으시면 웹사이트를 참고하시면 됩니다.
Setup
Docker Desktop 설치(https://docs.docker.com/get-docker/) 가 필요합니다.
자신의 환경에 맞는 버전을 선택하면 설치하시면 됩니다.
Tip. Docker Desktop이 유료로 전환되었으니 실제 업무에 적용하기 전에 자신이 아래 무료 사용 범위인지 확인하시기 바랍니다.
- 도커 데스크톱은 여전히 무료로 중소기업 (250 명 이하의 직원과 연간 매출 $ 10 미만 만 달러).
- 개인적인 사용.
- 교육 및 학습(학업적 또는 전문적 환경에서 학생 또는 강사)
- 비상업적인 오픈 소스 프로젝트.
- 이 약관의 발효일은 2021년 8월 31일이지만 Docker Desktop을 사용하려면 유료 구독이 필요한 경우 2022년 1월 31일까지 유예 기간이 있습니다.
Shell
아래는 데이터 저장할 디렉토리 생성 및 docker-compose 파일을 다운로드하여 실제 구현까지 하는 절차입니다.
# 디렉토리 생성 및 이동(또는 원하는 위치로 변경)
> mkdir -p ~/Documents/docker/sitespeed-dashboard && cd ~/Documents/docker/sitespeed-dashboard# docker-compose 파일 다운로드# 해당 파일안에 GRAFANA 패스워드도 함께 명시되어 있으니 수정시 참고하시면 됩니다.
> curl -O https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docker/docker-compose.yml# 다운받은 docker-compose.yml 실행
> docker-compose up -d
sitespeed.io:21.2.2 이미지를 다운받아 https://www.sitespeed.io/ 사이트를 측정하고 graphite에 결과 저장까지 하는 절차입니다.
# 사이트측정하기
# 존재하지 않는 컨테이너로서 최초 실행시 자동으로 image 다운로드 한후 컨테이너를 구동하여 실행
# 테스트명은 개인적으로 바꾸어서 사용하시면 됩니다. 아래는 TEST> docker run --rm -e TZ=Asia/Seoul -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:21.2.2 --graphite.host=host.docker.internal https://www.sitespeed.io/ --slug TEST --graphite.addSlugToKey true
기타 Command 입니다.
# 컨테이너 종료
> docker-compose stop# 컨테이너 삭제(데이터는 유지됨)
> docker-compose rm# 데이터 삭제
> docker volume rm performancedashboard_graphite performancedashboard_grafana
상세 결과 페이지 확인
저와 동일하게 진행하셨다면 아래 PATH에 접속해 보면 실행시간인 년-월-일-시-분-초 별로 디렉토리가 생성되어 있으며 상세 내용을 확인하기 위해서는 index.html 파일을 오픈하면 됩니다.
> cd ~/Documents/docker/sitespeed-dashboard/sitespeed-result/TEST
> ls
total 0
drwxr-xr-x 17 test staff 544 1 3 14:55 2022-01-03-14-54-07
> cd 2022-01-03-14-54-07
대시보드 확인
브라우저에서 http://localhost:3000/ 에서 접속하여보면 아래와 같이 내역을 확인할 수 있습니다.
5. 맺음말
간단하게 웹사이트 성능측정 도구(사이트)에 대해서 알아보았고 쉽고 빠르게 측정결과를 확인할 수 있는 대시보드 생성까지 알아보았습니다.
Steve Souders의 웹사이트 최적화 책(‘High Performance Web Sites’)의 14가지 최적화 기법이 나온지도 15년 지났고 최적화 기법들도 날로 다양해지고 있습니다.
httparchive.org에서 제공하는 연감을 보면 WEB이 어떻게 바뀌어가는지 조금씩이나마 체감이 가능한만큼 우리 모두 조금씩만 관심을 가지면 좀 더 원활한 World Wide Web 이 되지 않을까 생각해 봅니다.
추가적으로 어떠한 최적화 기법들이 있는지 자세히 알고 싶으시다면 Apache, Nginx 에 추가하여 자동으로 최적화를 해주는 모듈인 PageSpeed Modules의 문서내 레퍼런스 또는 web.dev 사이트를 참고하시기 바랍니다.
긴 글 읽어주셔서 감사합니다.👍
