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

튜닝/성능측정 2017. 2. 22. 14:11

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결과





 


 


 



저작자표시 (새창열림)

'튜닝 > 성능측정' 카테고리의 다른 글

Docker로 Webpagetest private instance 구성하기  (0) 2018.04.30
컴퓨터의 DNS는 무엇으로 설정하는게 가장 좋을까?  (0) 2017.12.08
PageSpeed insights를 이용한 성능측정  (0) 2014.10.31
Chrome PageSpeed를 이용한 Front-End 성능측정  (0) 2014.10.31
Posted by 다인,보리아빠
,

구글 탱고 프로젝트(Google Tango) 개발 Kit 개봉기

Android Coding 2015. 8. 10. 14:56

얼마전에 드디어 한국에서도 탱고 프로젝트 개발 Kit 디바이스 구매가 풀렸습니다.


팀 동료가 구글 탱고 질러 함께 뜯어보며 개봉기를 적습니다.!


구매에 참고하세요.



구매 URL : https://store.google.com/product/project_tango_tablet_black?playredirect=true&hl=ko

512,000원 






제품 사양 (오~~ 초고스펙)




비행기 타고 배송이 왔습니다.



비싸서 포장이 견고합니다.



견고한 박스와 안내 메뉴얼.



박스 인 박스 인 박스!



두둥!



크래들, 과 충전기 등등



어라 핀이 없네!! 에라이 당했다.


전용 크래들





기기의 포인트라고 할 수 있는 카메라와 심도 감지 센서.


맨날보던 잭과 마이크로 HDMI

조금 두껍지요?



마이크로 LTE SIM/SD



오오 부팅됩니다. 먼가 기대.


가끔 보는 그화면..



그냥 키캣 화면...



오 설정 메뉴가 다릅니다.!! Project Tango 메뉴!



아래로 메뉴얼! 여러 언어로 되어 있습니다. 






그냥 나두면 그냥 고성능의 키캣!! 업데이트하면 탱고 관련 예제 앱들을 설치할 수 있습니다.





조금 써보니 느낀점은 고스펙이며 높은 리소스 사용으로 열이 많습니다.

카메라를 이용하여 심도 측정시 열이 상당합니다.


이제 남은 것은 카메라로 촬영된 심도 리소스와 영상, 그리고 지오펜싱 값등을 이용하여 무엇을 할것인가가 남은 것이겠죠.


탱고 관련 앱으로 동영상을 찍을때 심도 측정을 통해서 

포인트 포인트로 공간이 만들어지는 것을 보면 신기합니다.


심도 측정 같은 부분 빼면 딱히 고사양이라고 사지 않는 것이 좋을 것 같습니다.

열이 너무 많습니다.!!!

체크체크!


이상!!!!!





저작자표시 (새창열림)
Posted by 다인,보리아빠
,

Android webview 디버깅 하기

디버깅 2015. 3. 16. 10:22

Android 앱을 개발하다보면 Native 단과 webview를 사용한 HTML(Javascript)이 있을 수 있다.

Android 의 경우는 기본적으로 디버깅을 할 수 있고

HTML 소스의 경우에는 Chrome 을 이용하여 디버깅하며 개발을 한다.


그러나 이전까지는 Android Webview에서 동작하는 HTML 에 대해서는 디버깅을 할 수 없었다.

실제 Chrome App 에서 동작하는 것과 Webview상에서 동작이 상이하게 동작하는 경우가 있다.

이 경우 정확한 원인 파악을 하기 위해서는 Webivew 로 띄워져 있는 HTML Page에 대해 디버깅을 하여 원인을 파악해야 한다.

이를 하기 위한 방법을 공유하고자 한다.

조건은 아래와 같다.

- Desktop에 Chrome 32 version 이상이 설치

- Android 기기와 USB 케이블로 연결

- Android 4.4+(kitkat) 이상

- Android Source에 디버깅 허용으로 컴파일(또는 이스터 에그 형식으로 상용 버전에서도 풀수 있으면 좋을 것 같습니다.)


순서는 아래와 같다.

1. 디버깅하고자 하는 단말이 USB 디버깅이 활성화 있어야 한다.






2. Andorid Webview의 setWebContentsDebuggingEnabled 옵션이 true 여야 한다.

> 아래와 같이 kitkat 이상의 경우 디버깅을 항상 허용해 놓을수 있다.


  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
      WebView.setWebContentsDebuggingEnabled(true);
  }

> 보안이 걱정된다면 아래와 같이 플래그를 두어 내부 apk 빌드시에만 허용을 해놓으면 된다.

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
{
    if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
  }


3. Desktop Chrome 에서 chrome://inspect 접속 후  나와있는 항목 중 디버깅할 내용을 선택(inspect를 눌러요)

4. Chrome 으로 디버깅!
Ye~~~~~!!


개발자는 역시 디버그!


'디버깅' 카테고리의 다른 글

JPDA를 이용한 원격지 Tomcat(WAS)의 Java Web Application 디버깅  (1) 2014.11.11
Posted by 다인,보리아빠
,

티스토리툴바