Zalando의 웹팀은 Lighthouse CI를 통합하면 성능 회귀를 방지하기 위해 현재 커밋을 기본 브랜치와 비교할 수 있는 자동화된 상태 검사를 통해 성능에 대한 사전 대응 방식을 사용할 수 있음을 발견했습니다.
3,500만 명 이상의 활성 고객을 보유한 Zalando는 유럽을 대표하는 온라인 패션 플랫폼입니다. 이 게시물에서는 Lighthouse CI를 사용하기 시작한 이유, 구현의 용이성, 팀에 미치는 이점을 설명합니다.
Zalando는 웹사이트 실적과 수익 간의 관계를 잘 알고 있습니다. 이전에는 카탈로그 페이지의 로드 시간을 인위적으로 늘리는 것이 이탈률, 전환율, 사용자당 수익에 미치는 영향을 테스트했습니다. 결과는 분명했습니다. 페이지 로드 시간을 100밀리초 개선한 결과, 이탈률이 낮아지고 참여도가 높아져 세션당 수익이 0.7% 증가했습니다.
100ms
페이지 로드 시간 개선
0.7%
세션당 수익 증가
회사의 참여가 항상 실적으로 이어지는 것은 아닙니다.
회사 내에서 실적에 대한 강한 지지를 얻고 있더라도 실적이 제품 제공 기준으로 설정되지 않으면 쉽게 소홀해질 수 있습니다. 2020년 Zalando 웹사이트를 새롭게 디자인할 때는 우수한 사용자 환경을 유지하고 맞춤 글꼴과 더 선명한 색상으로 웹사이트를 새롭게 단장하는 동시에 새로운 기능을 제공하는 데 중점을 두었습니다. 하지만 새롭게 디자인된 웹사이트와 앱을 출시할 준비가 되었을 때, 초기 사용자 측정항목에 따르면 새 버전이 느린 것으로 나타났습니다. 콘텐츠가 포함된 첫 페인트는 최대 53% 느려졌고 측정된 상호작용 시작 시간은 최대 59% 느려졌습니다.
Zalando의 웹
Zalando 웹사이트는 프레임워크를 개발하는 핵심팀에서 만들며 15개가 넘는 기능팀이 프런트엔드 마이크로서비스를 제공합니다. 새 버전을 지원하는 동시에 웹사이트의 일부를 더 중앙 집중식 아키텍처로 전환했습니다.
이전의 Mosaic 아키텍처에는 자체 측정항목으로 페이지 실적을 측정하는 방법이 포함되어 있었습니다. 하지만 내부 실험실 성능 모니터링 도구가 없으므로 실제 사용자에게 출시하기 전에 성능 측정항목을 비교하기가 어려웠습니다. 매일 배포했지만 실적 개선을 담당하는 개발자에게는 약 1일의 피드백 루프가 있었습니다.
웹 바이탈 및 Lighthouse를 사용해 보세요
Google의 자체 측정항목은 새로운 설정에 잘 적응하지 못해 만족스럽지 않았습니다. 더 중요한 것은 고객 경험에 중점을 두지 않았다는 것입니다. Core Web Vitals는 간결하면서도 포괄적이고 사용자 중심의 측정항목을 제공하므로 이를 사용하도록 전환했습니다.
출시 전에 성능을 개선하려면 적절한 실험실 환경을 만들어야 했습니다. 이를 통해 현장 데이터의 90번째 백분위수를 나타내는 테스트 조건 외에도 재현 가능한 측정값을 얻을 수 있었습니다. 이제 성능 개선을 담당하는 엔지니어는 가장 큰 영향을 미칠 수 있는 부분에 집중할 수 있었습니다. 이미 Lighthouse 감사 보고서를 로컬에서 사용하고 있었습니다. 따라서 첫 번째 반복은 스테이징 환경에서 변경사항을 테스트할 수 있는 Lighthouse 노드 모듈을 기반으로 서비스를 개발하는 것이었습니다. 이를 통해 약 1시간의 안정적인 성능 피드백 루프를 확보하여 성능을 개선하고 출시를 구할 수 있었습니다.
풀 요청에 관한 개발자 성능 피드백 제공
여기에서 그치지 않고 실적에 대한 사후 대응뿐만 아니라 사전 대응도 할 수 있는 기회를 만들고자 했습니다. Lighthouse 노드 모듈에서 Lighthouse CI (LHCI) 서버로 전환하는 것은 그리 어렵지 않았습니다. 기존 회사 서비스와 더 효과적으로 통합할 수 있도록 자체 호스팅 솔루션을 선택했습니다. LHCI 서버 애플리케이션은 Docker 이미지로 빌드된 후 PostgreSQL 데이터베이스와 함께 Kubernetes 클러스터에 배포되고 GitHub에 보고됩니다.
프레임워크는 이미 개발자에게 일부 성능 피드백을 제공하고 있었습니다. 구성요소 번들 크기가 모든 커밋에서 임곗값과 비교되었습니다. 이제 Lighthouse 측정항목을 GitHub 상태 확인으로 보고할 수 있습니다. 실적 기준점을 충족하지 못하면 다음 이미지와 같이 자세한 Lighthouse 보고서 링크와 함께 CI 파이프라인이 실패합니다.
성능 적용 범위 확장
Google은 매우 실용적인 접근 방식으로 시작했습니다. 현재 Lighthouse는 가장 중요한 두 페이지인 홈페이지와 제품 세부정보 페이지에서만 실행됩니다. 다행히 Lighthouse CI를 사용하면 실행 구성을 쉽게 확장할 수 있습니다. YouTube 웹사이트의 특정 페이지에서 작업하는 기능팀은 일치하는 URL 패턴과 어설션을 설정할 수 있습니다. 이를 통해 실적 노출 범위가 확대될 것으로 확신합니다.
이제 더 큰 버전을 빌드할 때 훨씬 더 자신감을 가질 수 있으며 개발자는 코드 성능에 관한 의견을 훨씬 더 빨리 얻을 수 있습니다.