InfoGrab Docs

브라우저 성능 테스트

GitLab CI/CD에서 Sitespeed.io를 사용하여 웹 페이지 렌더링 성능 측정. 머지 리퀘스트에서 성능 메트릭 및 영향을 자동으로 확인.

애플리케이션이 웹 인터페이스를 제공하고 GitLab CI/CD 를 사용하는 경우, 브라우저에서 보류 중인 코드 변경 사항의 렌더링 성능 영향을 빠르게 확인할 수 있습니다. Note Auto DevOps 를 사용하여 애플리케이션에서 이 기능을 자동화할 수 있습니다. GitLab은 웹 사이트의 렌더링 성능을 측정하기 위해 무료 오픈 소스 도구인 Sitespeed.io 를 사용합니다. GitLab이 구축한 Sitespeed 플러그인 은 분석된 각 페이지의 성능 점수를 browser-performance.json 이라는 파일에 출력하며, 이 데이터는 머지 리퀘스트에 표시될 수 있습니다. 사용 사례 # 다음 워크플로를 고려하세요: 마케팅 팀원이 새 도구를 추가하여 참여를 추적하려 합니다. 브라우저 성능 메트릭을 통해 변경 사항이 최종 사용자의 페이지 사용성에 미치는 영향을 확인합니다. 메트릭에 따르면 변경 사항 후 페이지의 성능 점수가 낮아졌습니다. 자세한 보고서를 보니, 새 JavaScript 라이브러리가 <head> 에 포함되어 페이지 로드 속도에 영향을 미쳤습니다. 프론트엔드 개발자에게 도움을 요청하고, 라이브러리를 비동기적으로 로드하도록 설정합니다. 프론트엔드 개발자가 머지 리퀘스트를 승인하고 프로덕션 배포를 승인합니다. 브라우저 성능 테스트 작동 방식 # 먼저, .gitlab-ci.yml 파일에 Browser Performance 보고서 아티팩트 를 생성하는 job을 정의합니다. GitLab은 이 보고서를 확인하고, 소스 및 대상 브랜치 간에 각 페이지의 주요 성능 메트릭을 비교하여 머지 리퀘스트에 정보를 표시합니다. 브라우저 성능 job의 예시는 브라우저 성능 테스트 구성 을 참조하세요. Note 브라우저 성능 보고서에 비교할 데이터가 없는 경우(예: .gitlab-ci.yml 에 브라우저 성능 job을 처음 추가할 때) 브라우저 성능 보고서 위젯이 표시되지 않습니다. 해당 브랜치를 대상으로 하는 머지 리퀘스트에 표시되기 전에 대상 브랜치(예: main )에서 최소 한 번은 실행되어야 합니다. 또한 위젯은 머지 리퀘스트의 최신 파이프라인에서 job이 실행된 경우에만 표시됩니다. 브라우저 성능 테스트 구성 # 히스토리 SITESPEED_DOCKER_OPTIONS 변수 지원이 GitLab 16.6에서 도입 됨. 이 예시에서는 GitLab CI/CD 및 Docker-in-Docker를 사용하는 sitespeed.io 로 코드에 대해 sitespeed.io 컨테이너 를 실행하는 방법을 보여줍니다. 먼저, Docker-in-Docker 빌드 로 GitLab Runner를 설정합니다. .gitlab-ci.yml 파일에서 기본 브라우저 성능 테스트 CI/CD job을 다음과 같이 구성합니다: include: template: Verify/Browser-Performance.gitlab-ci.yml browser_performance: variables: URL: https://example.com 이전 예시는 다음과 같습니다: CI/CD