웹 앱 성능측정 도구, 라이트하우스

 

웹 앱 성능측정 도구, 라이트하우스

 

사용자가 웹 어플리케이션을 사용하면서 성능이슈를 느끼는 지점은 브라우저에서 해당 페이지를 로드할 때이다. 이미지들을 포함한 자바스크립트 파일, CSS파일 등을 로드하면서 지연시간이 커진다면 사용자를 이탈하게 만들 수 도 있을 것이다. 또 구글 에드센스와 같은 외부의 광고를 노출하면서 성능이슈가 발생할 수도 있다. 이러한 웹 앱의 성능이슈를 체크하고 올바른 해결책을 찾도록 도와주는 툴이 '라이트하우스'이다.

 

라이트하우스는 크롬 브라우저의 확장 프로그램으로 설치하여 브라우저에서 직접 자신이 성능측정 하고자 하는 곳에서 성능을 측정할 수 있다. 자동화해서 주기적으로 성능을 측정하려면 NodeJS 앱 형태로 설치하여 커맨드라인에서 실행하는 것도 가능하다. 이번 포스팅에서는 라이트하우스 도커 이미지를 빌드해서 앱 형태로 사용하는 방법을 소개하고, 라이트하우스가 어떤 지표들을 제공하는지 간단하게 알아보자.

 

 

 Dockerfile

# reference
# https://stackoverflow.com/questions/48230901/docker-alpine-with-node-js-and-chromium-headless-puppeter-failed-to-launch-c

FROM node:11-alpine

ENV CHROME_BIN="/usr/bin/chromium-browser"\
    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true"

COPY ./entrypoint.sh /

RUN set -x \
  && apk update \
  && apk upgrade \

  # Add the packages
  && apk add --no-cache python \
  && apk add --no-cache dumb-init curl make gcc g++ linux-headers binutils-gold gnupg libstdc++ nss chromium \
  \
  && npm install puppeteer@0.13.0 \
  \
  # Do some cleanup
  && apk del --no-cache make gcc g++ python binutils-gold gnupg libstdc++ \
  && rm -rf /usr/include \
  && rm -rf /var/cache/apk/* /root/.node-gyp /usr/share/man /tmp/* \
  && echo

RUN npm install -g lighthouse
ENV CHROME_PATH=/usr/bin/chromium-browser
ENV LIGHTHOUSE_CHROMIUM_PATH=/usr/bin/chromium-browser

EXPOSE 6222

ENTRYPOINT ["/entrypoint.sh"]

 

entrypoint.sh

#!/bin/sh
set -e
lighthouse --output json --chrome-flags="--headless --no-sandbox" --quiet --only-categories=performance "$@"

 

실행순서

# lighthouse 이미지 빌드
docker build -t lighthouse .

# 빌드 완료 후 lighthouse 실행결과를 json으로 저장
docker run --rm lighthouse http://test.com > test.json

 

 

위의 도커파일과 entrypoint.sh로 라이트하우스 이미지를 빌드해준다. 이 후 run 명령어를 통해 손쉽게 라이트하우스로 측정한 성능지표들을 json 파일로 저장할 수 있다. 상당히 많은 양의 지표들이 json 파일에 저장되기 때문에 알아보기 쉬운 대표적인 지표 7가지를 소개한다.

 

 

1. diagnotics : 전체적인 페이지의 성능지표 모음. 다수의 하위 성능지표 포함
 - numRequests : 요청의 개수
 - numScripts : 자바스크립트 파일의 개수 등

2. main-thread-tasks : 브라우저에서 페이지 로드 시 실행되는 메인 쓰레드들의 작업
 - duration : 작업시간
 - startTime : 작업시작시간

3. main-thread-work-breakdown : 브라우저 메인 쓰레드들의 작업(DOM 파싱, CSS 적용, JS 컴파일 및 실행)들의 실행시간
 - group: 작업
 - duration: 작업시간

4. bootup-time : 브라우저에서 JS 파일을 파싱 및 컴파일하고 실행에 걸리는 시간
 - url : JS 파일의 URL
 - total : 총합 CPU 시간
 - scripting : JS 실행 시간
 - scriptParseCompile : JS 파싱 및 컴파일 시간

5. network-requests : 브라우저에서 페이지 로드 시에 발생한 네트워크 요청 리스트 (시간 순으로 정렬)
 - url : 네트워크 요청 URL
 - startTime, endTime, transferSize 등

6. network-server-latency : 네트워크 요청 시 서버의 지연시간
 - origin : 해당 페이지에서 자원을 요청한 URL
 - serverReponseTime : 지연시간

7. resource-summary : 요청한 자원들의 통계
 - reousrceType : 자원타입 (Total, image, media 등)
 - requestCount : 해당 자원타입의 요청회수 총합
 - size : 해당 자원타입의 크기 총합 (byte단위)

 

 

라이트하우스를 이용하면 위와 같이 외부 자원을 요청했을 때 지연시간과 JS 파일을 실행하는 시간 등 다양한 성능지표들을 파악할 수 있다. 라이트하우스를 이용해서 프론트, 백엔드 중 어느 부분에서 성능이슈가 발생하는 지 알아낼 수 있을 것이다. 또한 광고 모듈같은 외부 자원을 사용할 때에도 사용자 경험과 비즈니스 간의 트레이드 오프를 최적화 시킬 수 있는 좋은 통찰을 제공하니 한번 쯤 사용해보도록 하자!

 

 

Github URL

https://github.com/youlive789/lighthouse