성능

GitLab 프론트엔드 성능 모니터링, User Timing API 활용, 실시간 컴포넌트 및 에셋 최적화 모범 사례를 설명합니다.

성능은 현대 애플리케이션에서 필수적인 요소이자 주요 관심 영역 중 하나입니다. 모니터링 # GitLab은 sitespeed.io 를 사용하여 프론트엔드 성능을 지속적으로 측정합니다. 모니터링에는 두 가지 보완적인 수준이 있습니다: 페이지 수준과 여정 수준입니다. 페이지 수준 모니터링 # 페이지 요약 Grafana 대시보드 는 개별 페이지 세트에 걸쳐 4시간마다 자동으로 메트릭 데이터를 집계합니다. 이 페이지들은 gitlab 하위의 sitespeed-measurement-setup 리포지터리 안에 있는 텍스트 파일에 정의되어 있습니다. 어떤 프론트엔드 엔지니어든 해당 텍스트 파일에서 URL을 추가하거나 제거하여 기여할 수 있습니다. 변경 사항은 master 에 머지된 후 다음 예약 실행 시 적용됩니다. 각 페이지에서 검토해야 할 영향력 높은 권장 지표(핵심 웹 바이탈)는 3가지입니다: Largest Contentful Paint Interaction to Next Paint Cumulative Layout Shift 이 지표들은 수치가 낮을수록 웹사이트의 성능이 더 우수함을 의미합니다. 대시보드는 페이지 로드 중 메인 스레드가 차단되는 시간을 측정하는 Total Blocking Time (TBT) 도 표시합니다. TBT는 핵심 웹 바이탈은 아니지만(필드에서 측정할 수 없는 랩 메트릭), 인터랙티비티 문제를 식별하는 데 유용한 진단 지표이며 Sitespeed 대시보드에서 확인할 수 있습니다. 페이지 수준과 여정 수준 대시보드 모두 GitLab 프론트엔드 코드에서 발생하는 User Timing API 마크와 측정값을 캡처합니다. 즉, performanceMarkAndMeasure 유틸리티 를 사용하여 코드베이스에 추가한 커스텀 performance.mark() 또는 performance.measure() 호출이 자동으로 수집되어 Grafana에서 확인할 수 있습니다. 이를 활용하면 특정 기능에서 중요한 렌더링 마일스톤을 계측하고 모니터링할 수 있습니다. 여정 수준 모니터링 (사용자 여정) # 페이지 수준 메트릭 외에도, 완전한 사용자 워크플로를 엔드투엔드로 성능 측정합니다. 이를 사용자 여정이라고 하며, 파일 편집 및 커밋, 머지 리퀘스트 생성, 파이프라인 실행과 같이 사용자에게 가장 중요한 워크플로를 나타냅니다. 여정 메트릭은 User Journey Grafana 대시보드 에서 시각화됩니다. 각 여정은 단계별 누적 스톱워치 타이밍을 보고하며, Graphite의 sitespeed_io.desktop.gitlab-workflows.<journeyName>.<stopwatchName> 에 기록됩니다. Grafana의 diffSeries() 를 사용하면 단계별 델타를 계산할 수 있습니다. 여정 스크립트는 sitespeed-measurement-setup 리포지터리의 gitlab/desktop/workflows/ 에 있습니다. Create_SourceCode_WritingCode 여정(웹 에디터를 통한 파일 편집 및 커밋)은 참조