브라우저 성능 테스트

브라우저 성능 테스트 (Browser performance testing)

브라우저 성능 테스트는 웹 애플리케이션의 렌더링 성능을 측정해서, 문제가 운영에 도달하기 전에 성능 회귀를 잡아내는 방법이에요. GitLab은 sitespeed.io로 각 페이지에 점수를 매기고, 결과를 browser-performance.json이라는 파일로 내보냅니다.

출처: 문서

본문

결과가 MR(병합 요청) 안에 바로 표시되기 때문에 성능 회귀를 리뷰 과정에서 바로 잡아낼 수 있어요. 예를 들어 <head>에 추가한 JavaScript 라이브러리가 페이지 속도 점수를 떨어뜨리는 경우를 들 수 있겠네요.

[!NOTE] 이 기능은 Auto DevOps로 자동화할 수 있어요.

MR에서 브라우저 성능 결과 보기 (Browser performance results in merge requests)

.gitlab-ci.yml 파일에 브라우저 성능 리포트 artifact를 생성하는 job을 정의해 두면, GitLab이 이 리포트를 확인해서 소스 브랜치와 타깃 브랜치 사이 각 페이지의 핵심 성능 지표를 비교하고 결과를 MR에 보여줘요.

[!NOTE] 위젯은 타깃 브랜치에서 job이 최소 한 번 실행된 뒤에, 그리고 그 job이 MR의 최신 파이프라인에서 실행된 경우에만 표시됩니다.

브라우저 성능 테스트 구성하기 (Configure browser performance testing)

사전 요구사항은 이렇습니다.

Docker-in-Docker로 구성된 GitLab Runner.

코드에서 sitespeed.io 컨테이너를 실행하려면 Docker-in-Docker와 함께 GitLab CI/CD를 사용하면 돼요.

.gitlab-ci.yml 파일에 다음을 추가합니다.

include:
  template: Verify/Browser-Performance.gitlab-ci.yml

browser_performance:
  variables:
    URL: https://example.com

GitLab이 URL을 대상으로 sitespeed.io를 실행하는 browser_performance job을 만들고, 전체 HTML 리포트를 브라우저 성능 artifact로 저장해요. GitLab Pages가 활성화되어 있다면 리포트를 브라우저에서 열어볼 수 있습니다.

[!NOTE] 이 템플릿은 Kubernetes 클러스터에서 동작하지 않아요. 대신 template: Jobs/Browser-Performance-Testing.gitlab-ci.yml을 사용하세요.

job은 CI/CD 변수로 커스터마이즈할 수 있어요.

변수	기본값	설명
`SITESPEED_IMAGE`	`sitespeedio/sitespeed.io`	사용할 Docker 이미지. 버전을 제어하지는 않아요.
`SITESPEED_VERSION`	`14.1.0`	Docker 이미지의 버전.
`SITESPEED_OPTIONS`	없음	추가 sitespeed.io 옵션. 자세한 내용은 sitespeed.io 구성 참고.
`SITESPEED_DOCKER_OPTIONS`	없음	`docker run`에 전달할 추가 옵션. 특정 Docker 네트워크에 연결하는 `--network` 같은 것.

예를 들어 실행 횟수를 덮어쓰고 버전을 바꾸려면 이렇게 해요.

include:
  template: Verify/Browser-Performance.gitlab-ci.yml

browser_performance:
  variables:
    URL: https://www.sitespeed.io/
    SITESPEED_VERSION: 13.2.0
    SITESPEED_OPTIONS: -n 5

성능 저하 임계값 구성 (Configure the degradation threshold)

작은 점수 하락으로 알림이 울리는 걸 피하려면 DEGRADATION_THRESHOLD CI/CD 변수를 설정하면 돼요. Total Score가 지정한 점수 이상 하락했을 때만 알림이 나타납니다. 예를 들면 이렇습니다.

include:
  template: Verify/Browser-Performance.gitlab-ci.yml

browser_performance:
  variables:
    URL: https://example.com
    DEGRADATION_THRESHOLD: 5

Total Score는 성능·접근성·모범 사례에 대한 0~100 사이의 종합 점수예요. 100점이면 페이지에 해결할 이슈가 없다는 뜻입니다. 자세한 내용은 coach가 페이지에 점수를 매기는 방법을 참고하세요.

리뷰 앱용 브라우저 성능 테스트 구성 (Configure browser performance testing for review apps)

사전 요구사항은 이렇습니다.

browser_performance job이 동적 환경이 시작된 뒤에 실행되어야 해요.

리뷰 앱용 브라우저 성능 테스트를 구성하는 방법은 이렇습니다.

review job에서 동적 URL로 URL 목록 파일을 생성합니다.

   script:
     - echo $CI_ENVIRONMENT_URL > environment_url.txt

파일을 artifact로 저장합니다.

   artifacts:
     paths:
       - environment_url.txt

파일을 browser_performance job의 URL 변수로 전달합니다. 예를 들면 이렇게요.

stages:
  - deploy
  - performance

include:
  template: Verify/Browser-Performance.gitlab-ci.yml

review:
  stage: deploy
  environment:
    name: review/$CI_COMMIT_REF_SLUG
    url: http://$CI_COMMIT_REF_SLUG.$APPS_DOMAIN
  script:
    - run_deploy_script
    - echo $CI_ENVIRONMENT_URL > environment_url.txt
  artifacts:
    paths:
      - environment_url.txt
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
      when: never
    - if: $CI_COMMIT_BRANCH

browser_performance:
  dependencies:
    - review
  variables:
    URL: environment_url.txt

더 알아보기

브라우저 성능 테스트는 MR 안에서 바로 결과를 보여주기 때문에 리뷰 단계에서 성능 회귀를 잡아내기 좋아요. SITESPEED_* 변수로 sitespeed.io 동작을 조절하고, DEGRADATION_THRESHOLD로 허용 가능한 하락 폭을 정해두면 불필요한 알림을 줄일 수 있습니다. 리뷰 앱이 있다면 동적 URL을 environment_url.txt로 넘겨 배포 직후 성능을 확인해 보세요.