브라우저 성능 테스트
만일 여러분의 애플리케이션이 웹 인터페이스를 제공하고 GitLab CI/CD를 사용 중이라면, 브라우저에서 보류 중인 코드 변경의 렌더링 성능 영향을 빠르게 확인할 수 있습니다.
개요
GitLab은 웹 사이트의 렌더링 성능을 측정하기 위해 무료 오픈 소스 도구인 Sitespeed.io를 사용합니다. GitLab이 개발한 Sitespeed 플러그인은 분석된 각 페이지의 성능 점수를 browser-performance.json이라는 파일에 출력하여 이 데이터를 병합 요청에 표시합니다.
사용 사례
다음 워크플로우를 고려해 보세요:
- 마케팅 팀원이 새로운 도구를 추가하여 참여를 추적하려고 합니다.
- 브라우저 성능 지표로 인해, 그들은 변경 사항이 최종 사용자를 위한 페이지의 사용성에 어떤 영향을 미치는지 볼 수 있습니다.
- 지표에 따르면, 변경 사항 이후 페이지의 성능 점수가 낮아졌습니다.
- 자세한 보고서를 확인하면, 새로운 JavaScript 라이브러리가
<head>에 포함되어 페이지 로딩 속도에 영향을 미칩니다. - 프론트엔드 개발자에게 도움을 요청하여 해당 라이브러리를 비동기적으로 로드하도록 설정합니다.
- 프론트엔드 개발자가 병합 요청을 승인하고 해당 요청을 프로덕션에 배포합니다.
브라우저 성능 테스트 작동 방식
먼저, .gitlab-ci.yml 파일에서 Browser Performance 보고서 artifact를 생성하는 작업을 정의합니다. 그런 다음, GitLab은 이 보고서를 확인하고 소스 브랜치와 대상 브랜치 각 페이지의 주요 성능 지표를 비교하여 병합 요청에서 정보를 표시합니다.
브라우저 성능 작업 예시는 브라우저 성능 테스트 구성를 참조하세요.
.gitlab-ci.yml에 브라우저 성능 작업을 추가한 경우에는
브라우저 성능 보고서 위젯이 표시되지 않습니다. 표시되기 위해서는 대상 브랜치(main 예시)에서 적어도 한 번 실행해야 합니다. 또한, 위젯은 병합 요청의 최신 파이프라인에서 작업을 실행한 경우에만 표시됩니다.
브라우저 성능 테스트 구성
SITESPEED_DOCKER_OPTIONS변수를 지원하는 것은 GitLab 16.6에서 소개되었습니다.
다음 예제는 GitLab CI/CD와 sitespeed.io를 사용하여 코드에서 sitespeed.io 컨테이너를 실행하는 방법을 보여줍니다.
- 먼저, GitLab Runner를 Docker-in-Docker 빌드로 설정합니다.
-
다음으로
.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를 실행합니다. - 이 템플릿은 Kubernetes 클러스터와 호환되지 않습니다. 만일 Kubernetes 클러스터를 사용 중이라면
template: Jobs/Browser-Performance-Testing.gitlab-ci.yml을 대신 사용하세요.
이 템플릿은 GitLab의 sitespeed.io 플러그인을 사용하며, 전체 HTML sitespeed.io 보고서를 Browser Performance 보고서 artifact로 저장하여 나중에 다운로드하고 분석할 수 있습니다. 이 구현은 항상 사용 가능한 최신 Browser Performance 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의 coach performance score에 기반합니다. coach 문서에서 더 많은 정보를 확인할 수 있습니다.
리뷰 앱에서의 성능 테스트
위의 CI YAML 구성은 정적 환경에 대한 테스트에 탁월하며, 동적 환경에 대한 확장도 가능하지만 몇 가지 추가 단계가 필요합니다:
-
browser_performance작업은 동적 환경이 시작된 후에 실행되어야 합니다. -
review작업에서:- 동적 URL로 URL 목록 파일을 생성합니다.
- 파일을 artifact로 저장합니다. 예를 들어 작업의
스크립트에서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
도움말