브라우저 성능 테스트
귀하의 애플리케이션이 웹 인터페이스를 제공하고 있고
GitLab CI/CD를 사용하고 있다면,
브라우저에서 대기 중인 코드 변경 사항의 렌더링 성능 영향을
신속하게 확인할 수 있습니다.
귀하의 애플리케이션에서 자동화할 수 있습니다.
개요
GitLab은 웹 사이트의 렌더링 성능을 측정하기 위해
SiteSpeed.io라는 무료 오픈 소스 도구를 사용합니다.
GitLab이 구축한 SiteSpeed 플러그인은
분석된 각 페이지의 성능 점수를 browser-performance.json이라는 파일에 출력하며,
이 데이터는 병합 요청에서 표시될 수 있습니다.
사용 사례
다음 워크플로를 고려해 보세요:
- 마케팅 팀의 한 구성원이 새로운 도구를 추가하여 참여도를 추적하려고 합니다.
- 브라우저 성능 메트릭을 통해 그들이 변경한 내용이 최종 사용자에게
페이지의 사용성에 어떤 영향을 미치는지 확인합니다. - 메트릭은 그들의 변경 후 페이지의 성능 점수가 하락했다는 것을 보여줍니다.
- 상세 보고서를 살펴보면, 새로운 JavaScript 라이브러리가
<head>에 포함되어 있어 페이지 로딩 속도에 영향을 미친다고 나타납니다. - 그들은 프론트 엔드 개발자에게 도움을 요청하고, 개발자는
라이브러리를 비동기적으로 로드하도록 설정합니다. - 프론트엔드 개발자가 병합 요청을 승인하고, 프로덕션에 배포를 허가합니다.
브라우저 성능 테스트 작동 방식
먼저, .gitlab-ci.yml 파일에
브라우저 성능 보고서 산출물을 생성하는 작업을 정의합니다.
GitLab은 이 보고서를 확인하고, 소스 브랜치와 대상 브랜치 간의
각 페이지에 대한 주요 성능 메트릭을 비교하여
병합 요청에서 정보를 표시합니다.
브라우저 성능 작업의 예는
브라우저 성능 테스트 구성을 참조하세요.
예를 들어
.gitlab-ci.yml에 브라우저 성능 작업을 처음 추가했을 때,브라우저 성능 보고서 위젯이 표시되지 않습니다.
대상 브랜치(
main 등)에서 최소 한 번은 실행되어야해당 브랜치를 대상으로 하는 병합 요청에서 표시됩니다.
또한, 위젯은 병합 요청의 최신 파이프라인에서
작업이 실행된 경우에만 표시됩니다.
브라우저 성능 테스트 구성
SITESPEED_DOCKER_OPTIONS변수를 위해
도입된
GitLab 16.6
이 예제는 GitLab CI/CD를 사용하여
코드에서 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
위의 예제는:
- CI/CD 파이프라인에서
browser_performance작업을 생성하고,
URL에서 정의한 웹페이지에 대해 sitespeed.io를 실행하여
주요 메트릭을 수집합니다. - Kubernetes 클러스터와 호환되지 않는 템플릿을 사용합니다.
Kubernetes 클러스터를 사용하는 경우,
template: Jobs/Browser-Performance-Testing.gitlab-ci.yml을 대신 사용하세요.
템플릿은 sitespeed.io를 위한 GitLab 플러그인을 사용하며,
전체 HTML sitespeed.io 보고서를 브라우저 성능 보고서 산출물로 저장하여
나중에 다운로드하고 분석할 수 있습니다.
이 구현은 항상 사용 가능한 최신 브라우저 성능 산출물을 가져옵니다.
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 리스트 파일을 생성합니다.
-
script에서echo $CI_ENVIRONMENT_URL > environment_url.txt로 파일을 아티팩트로 저장합니다. - 리스트를
browser_performance작업의 URL 환경 변수(URL 또는 URL이 포함된 파일일 수 있음)로 전달합니다.
- 이제 원하는 호스트네임과 경로에 대해 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
도움말