InfoGrab Docs

브라우저 성능 테스트

요약

브라우저 성능 테스트를 사용하여 웹 애플리케이션의 렌더링 성능을 측정하고 프로덕션에 도달하기 전에 성능 저하를 감지하세요. 결과는 머지 리퀘스트에 직접 표시되므로 리뷰 프로세스의 일부로 성능 저하를 발견할 수 있습니다.

브라우저 성능 테스트를 사용하여 웹 애플리케이션의 렌더링 성능을 측정하고 프로덕션에 도달하기 전에 성능 저하를 감지하세요. GitLab은 sitespeed.io를 사용하여 각 페이지에 점수를 부여하고 결과를 browser-performance.json이라는 파일에 출력합니다.

결과는 머지 리퀘스트에 직접 표시되므로 리뷰 프로세스의 일부로 성능 저하를 발견할 수 있습니다. 예를 들어 <head>에 추가된 JavaScript 라이브러리가 페이지 속도 점수를 낮추는 경우입니다.

Note

Auto DevOps를 사용하여 애플리케이션에서 이 기능을 자동화할 수 있습니다.

머지 리퀘스트에서의 브라우저 성능 결과#

.gitlab-ci.yml 파일에서 Browser Performance 보고서 아티팩트를 생성하는 job을 정의합니다. GitLab은 이 보고서를 확인하고, 소스 및 대상 브랜치 간에 각 페이지의 주요 성능 메트릭을 비교하여 머지 리퀘스트에 결과를 표시합니다.

Browser Performance Widget

Note

위젯은 대상 브랜치에서 job이 최소 한 번 실행된 후에만 표시되며, 머지 리퀘스트의 최신 파이프라인에서 job이 실행된 경우에만 표시됩니다.

브라우저 성능 테스트 구성#

히스토리
  • SITESPEED_DOCKER_OPTIONS 변수 지원이 GitLab 16.6에서 도입됨.

사전 요구 사항:

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

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

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

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

GitLab은 URL에 대해 sitespeed.io를 실행하고 전체 HTML 보고서를 Browser Performance 아티팩트로 저장하는 browser_performance job을 생성합니다. GitLab Pages가 활성화된 경우 브라우저에서 보고서를 볼 수 있습니다.

Note

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

CI/CD 변수로 job을 사용자 정의할 수 있습니다:

변수 기본값 설명
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

저하 임계값 구성#

점수 소폭 하락에 대한 알림을 받지 않으려면 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은 페이지에 해결할 문제가 없음을 의미합니다. 자세한 내용은 코치가 페이지를 채점하는 방법을 참조하세요.

리뷰 앱에서의 브라우저 성능 테스트 구성#

사전 요구 사항:

  • browser_performance job은 동적 환경이 시작된 후 실행되어야 합니다.

리뷰 앱에서 브라우저 성능 테스트를 구성하려면:

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

       script:
     - echo $CI_ENVIRONMENT_URL > environment_url.txt

  • 파일을 아티팩트로 저장합니다:

       artifacts:
     paths:
       - environment_url.txt

  • 파일을 URL 변수로 browser_performance job에 전달합니다. 예를 들어:

    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

브라우저 성능 테스트

Tier: Premium, Ultimate
Offering: GitLab.com, GitLab Self-Managed, GitLab Dedicated
원문 보기
요약

브라우저 성능 테스트를 사용하여 웹 애플리케이션의 렌더링 성능을 측정하고 프로덕션에 도달하기 전에 성능 저하를 감지하세요. 결과는 머지 리퀘스트에 직접 표시되므로 리뷰 프로세스의 일부로 성능 저하를 발견할 수 있습니다.

브라우저 성능 테스트를 사용하여 웹 애플리케이션의 렌더링 성능을 측정하고 프로덕션에 도달하기 전에 성능 저하를 감지하세요. GitLab은 sitespeed.io를 사용하여 각 페이지에 점수를 부여하고 결과를 browser-performance.json이라는 파일에 출력합니다.

결과는 머지 리퀘스트에 직접 표시되므로 리뷰 프로세스의 일부로 성능 저하를 발견할 수 있습니다. 예를 들어 <head>에 추가된 JavaScript 라이브러리가 페이지 속도 점수를 낮추는 경우입니다.

Note

Auto DevOps를 사용하여 애플리케이션에서 이 기능을 자동화할 수 있습니다.

머지 리퀘스트에서의 브라우저 성능 결과#

.gitlab-ci.yml 파일에서 Browser Performance 보고서 아티팩트를 생성하는 job을 정의합니다. GitLab은 이 보고서를 확인하고, 소스 및 대상 브랜치 간에 각 페이지의 주요 성능 메트릭을 비교하여 머지 리퀘스트에 결과를 표시합니다.

Browser Performance Widget

Note

위젯은 대상 브랜치에서 job이 최소 한 번 실행된 후에만 표시되며, 머지 리퀘스트의 최신 파이프라인에서 job이 실행된 경우에만 표시됩니다.

브라우저 성능 테스트 구성#

히스토리
  • SITESPEED_DOCKER_OPTIONS 변수 지원이 GitLab 16.6에서 도입됨.

사전 요구 사항:

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

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

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

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

GitLab은 URL에 대해 sitespeed.io를 실행하고 전체 HTML 보고서를 Browser Performance 아티팩트로 저장하는 browser_performance job을 생성합니다. GitLab Pages가 활성화된 경우 브라우저에서 보고서를 볼 수 있습니다.

Note

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

CI/CD 변수로 job을 사용자 정의할 수 있습니다:

변수 기본값 설명
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

저하 임계값 구성#

점수 소폭 하락에 대한 알림을 받지 않으려면 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은 페이지에 해결할 문제가 없음을 의미합니다. 자세한 내용은 코치가 페이지를 채점하는 방법을 참조하세요.

리뷰 앱에서의 브라우저 성능 테스트 구성#

사전 요구 사항:

  • browser_performance job은 동적 환경이 시작된 후 실행되어야 합니다.

리뷰 앱에서 브라우저 성능 테스트를 구성하려면:

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

       script:
     - echo $CI_ENVIRONMENT_URL > environment_url.txt

  • 파일을 아티팩트로 저장합니다:

       artifacts:
     paths:
       - environment_url.txt

  • 파일을 URL 변수로 browser_performance job에 전달합니다. 예를 들어:

    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