sitespeed.io 4를 이용한 사이트/페이지별 타이밍, 리소스, 퍼포먼스 측정 및 시각화방법

Go to start of metadat

a

sitespeed.io가 4가 2016년에 새로 릴리즈 되면서
여러가지 편의 기능들이 많이 추가 되어 정리 및 구현.

최근 보니 2016-10-27일에 V4가 나온후 2017-02-14일 v4.4까지 나온것 보면 요즘 필받아서 연신 기능 추가가 되고 있네요. 

 

https://www.sitespeed.io/

• Installation
• npm (현재 pc의 브라우저를 활용하여 데이타 수집)
• docker(컨테이너내 FFmpeg)
• 데이타 시각화를 graphite, grafana 연동 제공
  

• docker-compose을 이용한 graphite, Grafana, sitespeed.io 간편설치(5분) <--추천.

• 설치 안내 URL : https://www.sitespeed.io/documentation/sitespeed.io/performance-dashboard/#docker-compose-file

• 특징
• chrome, firefox 지원
• 반복실행(repeat test)
• 대역폭 제어(TSProxy)
• 레이턴시 제어
• Selenium script 지원
• User Agent지정 가능
• Video 지원(로딩영상 캡처)
• 크롤러지원으로 N depth 자동측정 가능(Simple crawler)
• graphite - > View grafada 지원으로 지속적인 사이트/페이지 추이 측정 가능.
• Slack 지원(결과에 대해서 지속적으로 슬랙에 제공 가능)
• sitespeed이외 측정 연동 가능
  • Google Page Speed Insight 지원
  • webpagetest 연동지원(Private Instance)

 

• graphite (그라파이트)
•  시간과 데이타를 쌓아가는 데이타 저장소
• Graphite-web을 제공하여 대시보드를 제공함.

 

• Grafana (그라파나)
•  다양한 DB 지원(엘라스틱서치,인플럭스등, 그라파이트)
•  먼가 있어 보이는 대시보드

 

• 사용예 : 
1. 사이트에 대해서 자동 n-depth 실행
2. URL을 명기한 파일을 실행시 추가.
3. Config를 만들어서 추가.(측정페이지 ,브라우저, 대역,레이턴시,에이전트등)
4. 로그인이 필요한 경우 preScript 추가.

 

• 결과보기.
• 실행시 기본적으로 sitespeed.io result 페이지들 작성(폴더구분).
• graphite 연동시 지속적으로 대시보드에서 확인 가능.
• 데이타의 경우 sitespeed.io 리포팅이 더 세세하게 볼 수 있음.(추이는 보기 힘듬)
• grafana의 경우 전반적인 추이를 보는데 용이.

 

후기.

• grafana에 어느정도 데이타를 보여줄수 있는지는 좀 더 찾아봐야 함.
• sitespeed 동영상에서 한글이깨진채로 나옴(해당 도커 컨테이너에 한글언어팩이 미 설치되어 있는듯함.

 

총평

•  사이트/페이지가 전체적으로 너무 heavy해 지지 않도록 어느정도 전반적인 추이를 가끔 보기에 깔끔하고 좋을 것 같음.
•  성능의 경우 11번가에서도 handlebarjs 를 이용 초기 로딩 후 데이타를 그리는 부분들도 있어 실제 사용자가 보는 것과
  측정 결과와는 갭이 있을 수 있음.
• 현재 11번가 같은 경우에도 리소스가 많이 분산되어 있으므로 front단에서 데이타를 모아 보여주고 데이타를 쌓아놓는것이
  나쁘진 않을 것 같다는 생각이 듭니다.
• Frontend 성능측정 툴이나 사이트가 많긴 그리 나쁜 구성은 아닌듯 함.
  
• 구성을 한다면 webpagetest의 compare 기능이 있으면 좋을 듯함.

 

구성 예시

• webpagetest private instance -> compare 기능을 위해.
• sitespeed.io + (graphite + grafana) -> CLI + 대시보드 때문.

 

Sitespeed.io내 대시보드 예시 (https://dashboard.sitespeed.io/dashboard/db/page-summary)
site 요약 페이지 요약 webpagetest결과