브라우저 성능 테스트
Offering: GitLab.com, Self-Managed, GitLab Dedicated
만일 여러분의 애플리케이션이 웹 인터페이스를 제공하고 GitLab CI/CD를 사용 중이라면, 웹 브라우저에서 보류 중인 코드 변경의 렌더링 성능 영향을 빠르게 확인할 수 있습니다.
Auto DevOps를 사용하여 응용 프로그램에서이 기능을 자동화할 수 있습니다.
개요
GitLab은 웹 사이트의 렌더링 성능을 메트릭하기 위해 무료 오픈 소스 도구 인 Sitespeed.io를 사용합니다. GitLab이 작성한 Sitespeed 플러그인은 각 페이지의 성능 점수를 browser-performance.json이라는 파일에 출력하여 코드 변경에 따른 성능을 분석할 수 있도록 합니다. 이 데이터는 Merge Request에서 표시할 수 있습니다.
사용 사례
다음 작업 흐름을 고려해보세요:
- 마케팅 팀의 구성원이 새로운 도구를 추가하여 참여를 추적하려고 합니다.
- 브라우저 성능 메트릭을 사용하여 변경 사항이 최종 사용자를 위한 페이지의 사용성에 미치는 영향을 확인합니다.
- 메트릭에 따르면 변경 사항 후 페이지의 성능 점수가 감소했습니다.
- 자세한 보고서를 살펴보면, 새로운 JavaScript 라이브러리가
<head>에 포함되어 페이지 로드 속도에 영향을 미침을 확인합니다. - 프론트 엔드 개발자에게 도움을 요청하여 라이브러리를 비동기식으로 로드 설정합니다.
- 프론트 엔드 개발자가 Merge Request을 승인하고 프로덕션 배포를 승인합니다.
브라우저 성능 테스트 작동 방식
먼저, .gitlab-ci.yml 파일에 작업을 정의하여 브라우저 성능 보고서 artifact를 생성합니다. GitLab은 이후 이 보고서를 확인하여 소스 브랜치와 타겟 브랜치 각 페이지의 주요 성능 메트릭을 비교하고 Merge Request에서 이 정보를 표시합니다.
브라우저 성능 작업 예시는 브라우저 성능 테스트 구성를 참고하세요.
최초로
.gitlab-ci.yml에 브라우저 성능 작업을 추가할 때와 같이 브라우저 성능 보고서에 비교할 데이터가 없는 경우, 브라우저 성능 보고서 위젯은 표시되지 않습니다. 해당 브랜치를 대상으로 하는 Merge Request에서 한 번 이상 실행되어야 표시됩니다. 또한, 위젯은 최신 파이프라인에서 작업이 실행된 경우에만 표시됩니다.
브라우저 성능 테스트 구성
- GitLab 16.6에서
SITESPEED_DOCKER_OPTIONS변수 지원 등장.
다음 예시는 GitLab CI/CD 및 sitespeed.io를 사용하여 코드에서 sitespeed.io 컨테이너를 실행하는 방법을 보여줍니다.
- 먼저, Docker-in-Docker 빌드로 GitLab Runner를 설정합니다.
-
.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 구성은 정적 환경에 대한 테스트에 적합하며, 동적 환경에 대한 테스트에도 확장할 수 있지만, 몇 가지 추가 단계가 필요합니다.
-
browser_performance작업은 동적 환경이 시작된 후 실행되어야 합니다. -
review작업에서:- 동적 URL로 URL 디렉터리 파일을 생성합니다.
- 파일을 artifact로 저장합니다. 예를 들어
script의echo $CI_ENVIRONMENT_URL > environment_url.txt와 같이 이루어집니다. - URL 환경 변수(URL 또는 URL을 포함하는 파일)를
browser_performance작업에 전달합니다.
- 이제 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
도움말