브라우저 성능 테스트
만약 여러분의 애플리케이션이 웹 인터페이스를 제공하고 GitLab CI/CD를 사용하고 있다면, 브라우저에서 보류 중인 코드 변경으로 인한 렌더링 성능 영향을 빠르게 확인할 수 있습니다.
개요
GitLab은 웹 사이트의 렌더링 성능을 측정하기 위해 무료이자 오픈 소스인 Sitespeed.io를 사용합니다. GitLab이 구축한 Sitespeed 플러그인은 분석된 각 페이지의 성능 점수를 browser-performance.json이라는 파일에 출력하며, 이 데이터는 병합 요청에서 표시될 수 있습니다.
사용 사례
다음 워크플로우를 고려해 보세요:
- 마케팅 팀원이 새로운 도구를 추가하여 참여도를 추적하려고 합니다.
- 브라우저 성능 메트릭으로 인해, 엔드 사용자를 위한 페이지의 사용성에 어떤 영향을 미치는 지 확인합니다.
- 메트릭은 변경 사항 이후에 페이지의 성능 점수가 낮아졌음을 보여줍니다.
- 상세 보고서를 확인하면, 새로운 JavaScript 라이브러리가
<head>에 포함되어 페이지 로드 속도에 영향을 미친 것을 확인합니다. - 프론트엔드 개발자에게 도움을 요청하고, 해당 라이브러리를 비동기로 로드하도록 설정합니다.
- 프론트엔드 개발자가 병합 요청을 승인하고, 프로덕션 배포를 승인합니다.
브라우저 성능 테스트 작동 방식
먼저, .gitlab-ci.yml 파일에서 브라우저 성능 보고서 artifact를 생성하는 작업을 정의합니다.
GitLab은 이후에 해당 보고서를 확인하고, 소스 및 대상 브랜치 각 페이지의 주요 성능 메트릭을 비교하고 병합 요청에서 정보를 표시합니다.
브라우저 성능 작업의 예시는 브라우저 성능 테스트 구성을 참조하세요.
.gitlab-ci.yml에서 브라우저 성능 작업을 추가하는 경우)에는 브라우저 성능 보고서 위젯이 표시되지 않습니다. 해당 브랜치를 대상으로 하는 병합 요청에서 최소한 한 번 실행되어야 합니다(예: main). 또한, 위젯은 최근에 실행된 파이프라인에서 작업이 실행된 경우에만 표시됩니다.
브라우저 성능 테스트 구성
- GitLab 16.6에서 소개된
SITESPEED_DOCKER_OPTIONS변수를 지원합니다(https://gitlab.com/gitlab-org/gitlab/-/merge_requests/134024).
다음 예시에서는 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: 변수: URL: https://example.com
위 예시는 다음을 수행합니다:
- 당신이
URL에서 정의한 웹 페이지에 대해browser_performance작업을 생성하고 CI/CD 파이프라인을 실행하여 sitespeed.io를 실행하고 주요 메트릭을 수집합니다. - 쿠버네티스 클러스터를 사용하는 경우 작동하지 않는 템플릿을 사용합니다. 쿠버네티스 클러스터를 사용하는 경우, 대신
template: Jobs/Browser-Performance-Testing.gitlab-ci.yml을 사용하세요.
이 템플릿은 sitespeed.io를 위한 GitLab 플러그인을 사용하며, 전체 HTML sitespeed.io 보고서를 브라우저 성능 보고서 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:
변수:
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
도움말