웹 사이트 성능 최적화 분석 자동화: YSlow와 CI 서버 연동

출처 : http://helloworld.naver.com/helloworld/textyle/303083

YSlow는 앞에서 언급한 웹 사이트 성능 최적화 법칙을 웹 사이트가 얼마나 만족하고 있는지 측정하는 도구다. 다양한 브라우저 확장 프로그램 버전을 제공하고 있으며, http://yslow.org/에서 다운로드할 수 있다.

YSlow는 현재 35개 법칙 중 프로그램으로 측정할 수 있는 23개 법칙(앞에서 35개 법칙 중 굵은 글자로 표시해 두었다)을 분석해 자체 기준에 따라 A~F까지 등급을 분류해서 보고한다. 등급 및 점수는 참고 사항이므로 자신의 웹 사이트 상황과는 안 맞을 수 있다. 보고서 점수에 너무 연연하지 말고 보고서 내용을 참고하여 상황에 맞게 최적화하면 된다.

자세한 등급과 점수는 "YSlow Ruleset Matrix(http://yslow.org/ruleset-matrix)" 문서에서 확인할 수 있다.

PhantomJS(http://phantomjs.org/)

PhantomJS는 WebKit 엔진으로 브라우저를 에뮬레이팅해 커맨드라인에서 JavaScript를 실행시킬 수 있게 하는 도구다. JavaScript 테스트 자동화에 많이 사용하고 있으며 브라우저 화면 캡처와 네트워크 분석도 가능해서 다양하게 활용할 수 있다.

Jenkins

Jenkins 서버는 소스코드가 변경됐을 때 빌드, 테스트, 분석, 리포팅이 자동으로 수행되도록 도와주는 CI 서버다. Jenkins 서버는 프로젝트의 소스가 변경되면 자동으로 빌드하고 단위 테스트를 수행해 그 결과를 리포팅하기 때문에 프로그램 변경 시에 발생할 수 있는 문제를 사전에 찾아 해결할 수 있다. 그래서 프로젝트를 더 안정적이고 성공적으로 유지 보수할 수 있다.

각 프로젝트마다 소스 저장소, 빌드 환경, 단위 테스트 환경 등이 서로 다르기 때문에 Jenkins 서버는 다양한 환경을 수용할 수 있도록 잘 구조화된 플러그인 확장 환경을 제공한다. 좀 더 자세한 내용은 홈페이지(http://jenkins-ci.org/)를 참고하길 바란다.

참고
Jenkins의 원래 이름은 Hudson이었으나 Oracle사와의 상표 권리 문제로 2011년 1월부터 Hudson(Oracle)과 Jenkins(오픈소스)로 나뉘게 됐다.

YSlow for PhantomJS

PhantomJS 설치하기

YSlow가 브라우저 없이 실행될 수 있도록 먼저 PhantomJS를 설치한다.

http://phantomjs.org/download.html에서 자신의 운영체제에 맞는 PhantomJS 버전을 다운로드한다.
다운로드한 파일의 압축을 해제하면 PhantomJS 실행 파일을 확인할 수 있다.
먼저 버전 확인 명령으로 이상이 없는지 확인한다. 아무런 의존성이 없기 때문에 다음과 같이 바로 명령어를 실행하면 된다.
http://yslow.org/phantomjs/에서 YSlow for PhantomJS를 다운로드한 다음 압축을 해제한다.
다음과 같이 phantomjs 명령어로 yslow.js를 실행시켜서 본다.

PhantomJS와 YSlow만으로도 커맨드 라인을 통해 YSlow로 웹 사이트 성능을 분석할 수 있다.

사용법

phantomjs yslow.js --help 명령을 실행시키면 다음과 같은 사용법을 확인할 수 있다. 편의를 위해 각 옵션 설명을 번역해 놓았다.

Usage: phantomjs [phantomjs options] yslow.js [yslow options] [url ...]

PhantomJS Options:

  http://y.ahoo.it/phantomjs/options

YSlow Options:

  -h, --help               사용법을 출력한다
  -V, --version            버전 출력
  -i, --info <info>        로그 출력정보를 지정 (basic|grade|stats|comps|all) [all]
  -f, --format <format>    결과물 출력 형식을 지정한다 (json|xml|plain|tap|junit) [json]
  -r, --ruleset <ruleset>  적용할 YSlow 성능 법칙세트을 지정한다 (ydefault|yslow1|yblog) [ydefault]
  -b, --beacon <url>       결과를 로그할 URL을 지정한다
  -d, --dict               결과 항목 사전을 포함한다
  -v, --verbose            beacon 응답 정보를 출력한다
  -t, --threshold <score>  합격/불합격여부를 위한 한계 최저점수를 지정한다 ([0-100]|[A-F]|{JSON}) [80]
                           e.g.: -t B or -t 75 or -t '{"overall": "B", "ycdn": "F", "yexpires": 85}'
  -u, --ua "<user agent>"  페이지가 리소스를 요청할 때 서버로 전송할 user agent 문자열을 지정한다
  -vp, --viewport <WxH>    페이지의 뷰포트 사이즈를 WxY로 지정한다, W = 너비, H = 높이 [400x300]
  -ch, --headers <JSON>    커스텀 요청 헤더를 지정한다, e.g.: -ch '{"Cookie": "foo=bar"}'
  -c, --console <level>    페이지 console 메시지를 출력한다 (0: none, 1: message, 2: message + line + source) [0]

Examples:
phantomjs yslow.js http://yslow.org
phantomjs yslow.js -i grade -f xml www.yahoo.com www.cnn.com www.nytimes.com
phantomjs yslow.js -info all --format plain --ua "MSIE 9.0" http://yslow.org
phantomjs yslow.js -i basic --rulseset yslow1 -d http://yslow.org
phantomjs yslow.js -i grade -b http://www.showslow.com/beacon/yslow/ -v yslow.org
phantomjs --load-plugins=yes yslow.js -vp 800x600 http://www.yahoo.com
phantomjs yslow.js -i grade -f tap -t 85 http://yslow.org

실행 예제 설명은 YSlow for Phantom 사용법 페이지를 참고하도록 한다. 예제를 실행해 보면 알겠지만 문자열로 주르륵 떨어지는 출력 결과에 당혹하지 않을 수 없다. 이제 Jenkins를 이용해 보기 좋게 보고서를 출력하고 자동화해 보자

Jenkins 서버에 YSlow연동하기

Jenkins 서버 준비하기

이미 Hudson이나 Jenkins 서버가 구축돼 있다면 구축된 서버를 활용하도록 하자. 시험 삼아 로컬 PC의 Windows 환경에서 확인해 보고 싶다면 다음과 같이 Jenkins 서버를 다운로드해 실행하도록 한다.

먼저 http://java.com/download에서 Java를 다운로드해 설치한다.
jenkins.war를 http://jenkins-ci.org/에서 다운로드한다.
Windows의 명령 프롬프트에서 다음과 같이 Jenkins 서버를 실행한다.
브라우저에서 http://localhost:8080으로 접속해 서버가 정상적으로 실행되는지 확인한다. 다음과 같은 화면을 볼 수 있으면 정상적으로 실행된 것이다.

YSlow for PhantomJS는 TAP(Test Anything Protocol) 타입과 JUnit 타입의 출력 포맷을 제공하고 있기 때문에 Jenkins의 TAP 플러그인이나 JUnit 플러그인으로 분석 결과를 보기 좋게 만들어낼 수 있다. Jenkins 서버에 해당 플러그인이 있는지 확인하고, 없다면 다음과 같이 플러그인을 설치한다.

Jenkins 관리 > 플러그인 관리 항목을 클릭한다.
설치된 플러그인 탭에서 플러그인 설치 여부를 확인한다.
플러그인이 없다면 설치 가능 탭에서 해당 플러그인을 찾아서 설치한다(JUnit 플러그인은 기본으로 설치돼 있어 별도로 설치하지 않아도 된다).
플러그인 다운로드 및 설치가 완료되면 자동으로 다시 시작한다. Windows에서는 자동으로 다시 시작하지 않으므로 서버가 실행되고 있는 명령 창에서 Ctrl+C 키를 눌러 중단했다가 다시 실행하면 된다.

이제 모든 준비가 완료됐다. Jenkins에서 YSlow를 실행하고 보고서가 출력되도록 연동해 보자.

Jenkins 서버에 YSlow 연동하기

TAP 보고서로 출력하기

Jenkins에 프로젝트를 추가하고 다음과 같이 설정한다.

새로운 Job을 클릭해 프로젝트를 추가한다.
OK를 클릭하면 설정 화면이 나온다.
Build 항목에서 Add build step > Execute shell을 선택하고 커맨드라인 명령을 입력한다(Windows에서는 Execute Windows batch command를 이용한다).
참고: 커맨드라인 명령 입력 값
```
phantomjs yslow.js -i grade -threshold "B" -f tap http://www.naver.com > yslow.tap
```
-i grade : 모든 법칙이 테스트되도록 지정
-threshold "B" : 모든 법칙의 수용 가능한 최저 점수를 지정
-f tap : 결과를 TAP 형식으로 출력하도록 지정
http://www.naver.com : 테스트할 페이지 URL
yslow.tap : 저장할 TAP 결과 파일 이름
Post-build Actions 항목에서 Add build step > Publish TAP Results를 선택하고 Test results에 yslow.tap을 입력한다.
설정한 내용을 저장한다.
왼쪽 메뉴에서 Build Now를 클릭해서 실행한다.
빌드가 완료되면 왼쪽 메뉴에서 TAP을 클릭해 최근 빌드의 결과를 확인할 수 있다.
TAP Test Result를 클릭하면 검사 항목별 내용을 확인할 수 있다.

JUnit 보고서로 출력하기

JUnit 보고서를 출력하려면 다음과 같이 설정하고 실행하면 된다.

Build 항목에서 Add build step > Execute shell을 추가하고 커맨드라인 명령을 입력한다.
참고: 커맨드라인 명령 입력 값
```
phantomjs yslow.js -i grade -threshold "B" -f junit http://www.naver.com > yslow.xml
```
-i grade : 모든 법칙이 테스트되도록 지정
-threshold "B" : 모든 법칙의 수용 가능한 최저 점수를 지정
-f junit : 결과를 JUnit 형식으로 출력하도록 지정
http://www.naver.com : 테스트할 페이지 URL
yslow.tap : 저장할 JUnit 결과파일 이름
Post-build Actions 항목에서 Add build step > Publish JUnit test result report를 선택하고 Test report XMLs에yslow.xml을 입력한다.
설정 내용을 저장하고 빌드를 수행하면 결과를 확인할 수 있다.
Test Result를 클릭하면 상세 결과를 확인할 수 있다.

여기까지는 Jenkins 서버에 적용하는 방법을 쉽게 보여주기 위해 단독 프로젝트를 생성하고 빌드했지만, 기존에 Jenkins 서버를 사용하고 있었다면 Build와 Post-build Actions 설정을 추가한다. 자신의 Yslow로 검사할 URL은 프로젝트의 최종 URL을 적용하면 된다.

마치며

웹 페이지의 성능 문제로 골머리를 앓았던 웹 개발자라면 한 번쯤 Firefox나 Chrome의 YSlow 플러그인을 설치해서 사용해 봤을 것이다.

일반적으로 프런트엔드 성능 최적화는 프로젝트 막바지 혹은 운영 중 심각하게 성능 이슈가 있을 때 일회성으로 조치하고 이후에는 잘 신경 쓰지 않는다. 하지만 웹 페이지를 유지 보수하다 보면 이것저것 새로운 기능과 변경 사항으로 인해 조금씩 느려지다 언젠가 다시 성능 이슈가 발생할 수도 있다.

CI 서버에 YSlow를 설정하면 유지 보수 시에 변경이 발생할 때마다 문제가 발생할 여지가 있는 부분을 손쉽게 모니터링하고 추적할 수 있을 것이다. 또한 이렇게 개발자가 사전에 성능 문제를 인지할 수 있다면, 기능이 추가되고 변경되더라도 사용자에게 항상 쾌적한 속도의 웹 페이지 접속 환경을 보장한다는 가치도 만들어 낼 수 있다.

이런 점에서 Yslow와 CI 연동을 이용한 웹사이트 성능 최적화는 시도해 볼만하다.

저작자표시 비영리 동일조건

코딩하는 녀석