브라우저 성능 테스트

Tier: Premium, Ultimate
Offering: GitLab.com, Self-Managed, GitLab Dedicated

만일 여러분의 애플리케이션이 웹 인터페이스를 제공하고 GitLab CI/CD를 사용 중이라면, 웹 브라우저에서 보류 중인 코드 변경의 렌더링 성능 영향을 빠르게 확인할 수 있습니다.

note

Auto DevOps를 사용하여 응용 프로그램에서이 기능을 자동화할 수 있습니다.

개요

GitLab은 웹 사이트의 렌더링 성능을 메트릭하기 위해 무료 오픈 소스 도구 인 Sitespeed.io를 사용합니다. GitLab이 작성한 Sitespeed 플러그인은 각 페이지의 성능 점수를 browser-performance.json이라는 파일에 출력하여 코드 변경에 따른 성능을 분석할 수 있도록 합니다. 이 데이터는 Merge Request에서 표시할 수 있습니다.

사용 사례

다음 작업 흐름을 고려해보세요:

  1. 마케팅 팀의 구성원이 새로운 도구를 추가하여 참여를 추적하려고 합니다.
  2. 브라우저 성능 메트릭을 사용하여 변경 사항이 최종 사용자를 위한 페이지의 사용성에 미치는 영향을 확인합니다.
  3. 메트릭에 따르면 변경 사항 후 페이지의 성능 점수가 감소했습니다.
  4. 자세한 보고서를 살펴보면, 새로운 JavaScript 라이브러리가 <head>에 포함되어 페이지 로드 속도에 영향을 미침을 확인합니다.
  5. 프론트 엔드 개발자에게 도움을 요청하여 라이브러리를 비동기식으로 로드 설정합니다.
  6. 프론트 엔드 개발자가 Merge Request을 승인하고 프로덕션 배포를 승인합니다.

브라우저 성능 테스트 작동 방식

먼저, .gitlab-ci.yml 파일에 작업을 정의하여 브라우저 성능 보고서 artifact를 생성합니다. GitLab은 이후 이 보고서를 확인하여 소스 브랜치와 타겟 브랜치 각 페이지의 주요 성능 메트릭을 비교하고 Merge Request에서 이 정보를 표시합니다.

브라우저 성능 작업 예시는 브라우저 성능 테스트 구성를 참고하세요.

note

최초로 .gitlab-ci.yml에 브라우저 성능 작업을 추가할 때와 같이 브라우저 성능 보고서에 비교할 데이터가 없는 경우, 브라우저 성능 보고서 위젯은 표시되지 않습니다. 해당 브랜치를 대상으로 하는 Merge Request에서 한 번 이상 실행되어야 표시됩니다. 또한, 위젯은 최신 파이프라인에서 작업이 실행된 경우에만 표시됩니다.

브라우저 성능 위젯

브라우저 성능 테스트 구성

  • GitLab 16.6에서 SITESPEED_DOCKER_OPTIONS 변수 지원 등장.

다음 예시는 GitLab CI/CD 및 sitespeed.io를 사용하여 코드에서 sitespeed.io 컨테이너를 실행하는 방법을 보여줍니다.

  1. 먼저, Docker-in-Docker 빌드로 GitLab Runner를 설정합니다.
  2. .gitlab-ci.yml 파일에서 기본 브라우저 성능 테스트 CI/CD 작업을 다음과 같이 구성합니다.

    include:
      template: Verify/Browser-Performance.gitlab-ci.yml
       
    browser_performance:
      variables:
        URL: https://example.com
    

위 예시:

  • URL에 정의된 웹 페이지에 대해 browser_performance 작업을 생성하여 sitespeed.io를 실행하고 주요 메트릭을 수집합니다.
  • 쿠버네티스 클러스터와 함께 작동하지 않는 템플릿을 사용합니다. 쿠버네티스 클러스터를 사용하는 경우, 대신 template: Jobs/Browser-Performance-Testing.gitlab-ci.yml를 사용하십시오.

해당 템플릿은 GitLab의 sitespeed.io 플러그인을 사용하며,(full HTML sitespeed.io 리포트를 Browser Performance report artifact로 저장하여 나중에 다운로드하고 분석할 수 있도록 합니다. 해당 구현은 항상 사용 가능한 최신 브라우저 성능 artifact를 사용합니다. 만약 GitLab Pages가 활성화되어 있다면 리포트를 웹 브라우저에서 바로 볼 수 있습니다.

더불어 CI/CD 변수로 작업을 사용자 정의할 수 있습니다.

  • SITESPEED_IMAGE: 작업에 사용할 Docker 이미지 구성(기본값 sitespeedio/sitespeed.io), 이미지 버전은 제외
  • SITESPEED_VERSION: 작업에 사용할 Docker 이미지의 버전 구성(기본값 14.1.0)
  • SITESPEED_OPTIONS: 필요한 추가 sitespeed.io 옵션을 구성(기본값 nil). 자세한 내용은 sitespeed.io 문서를 참고하세요.
  • SITESPEED_DOCKER_OPTIONS: 추가 Docker 옵션 구성(기본값 nil). 자세한 내용은 Docker 옵션 문서를 참고하세요.

예를 들어, 주어진 URL에서 sitespeed.io가 실행하는 횟수를 재정의하고 버전을 변경할 수 있습니다.

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

저하 임계값 구성

새로운 메트릭에 대한 저하 경고의 민감도를 구성하여 메트릭의 미미한 하락으로 인한 경고를 받지 않도록 조정할 수 있습니다. 이를 위해 DEGRADATION_THRESHOLD CI/CD 변수를 설정합니다. 아래 예시에서는 Total Score 메트릭이 5 포인트 이상 저하될 때만 경고가 표시됩니다.

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

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

Total Score 메트릭은 sitespeed.io의 코치 성능 점수에 기반합니다. 추가 정보는 코치 문서에서 확인할 수 있습니다.

리뷰 앱에서의 성능 테스트

위의 CI YAML 구성은 정적 환경에 대한 테스트에 적합하며, 동적 환경에 대한 테스트에도 확장할 수 있지만, 몇 가지 추가 단계가 필요합니다.

  1. browser_performance 작업은 동적 환경이 시작된 후 실행되어야 합니다.
  2. review 작업에서:
    1. 동적 URL로 URL 디렉터리 파일을 생성합니다.
    2. 파일을 artifact로 저장합니다. 예를 들어 scriptecho $CI_ENVIRONMENT_URL > environment_url.txt와 같이 이루어집니다.
    3. URL 환경 변수(URL 또는 URL을 포함하는 파일)를 browser_performance 작업에 전달합니다.
  3. 이제 sitespeed.io 컨테이너를 확인하려는 호스트 이름 및 경로에 대해 실행할 수 있습니다.

여러분의 .gitlab-ci.yml 파일은 아래와 같을 것입니다.

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