Lighthouse와 ChatOps 인터페이스를 이용한 웹사이트 성능 추적하기
모든 웹 개발자는 가볍고 성능이 우수하도록 “Best Practices”를 준수하는 웹 사이트를 구축하려고 합니다.
하지만 개발자들은 정확히 어떻게 성능을 측정해야 할까요? 그리고 웹을 위한 개발에 있어서 가장 좋은 방법(Best Practices)은 무엇일까요?
위에서 설명한 문제를 해결하기 위해 Google은 Lighthouse를 만들었습니다. Lighthouse는 다음과 같은 다섯 가지 카테고리와 관련된 여러 가지 주요 메트릭에 대해 웹사이트를 감시하는 도구입니다:
- Performance
- Accessibility
- Best Practices
- Search Engine Optimization
- Progressive Web App
이를 통해 신규 웹사이트에서 작업하는 개발자는 웹사이트가 각 메트릭에서 얼마나 잘 동작하는지 신속하게 테스트할 수 있으며, Google은 특정 사이트의 메트릭을 향상시키는 방법에 대한 사용자 정의된 팁을 제공하는 상세 보고서를 제공합니다.
Lighthouse는 사용 가능한 5가지 범주에 대해 최대 80개의 서로 다른 메트릭을 확인하고 각 메트릭을 개선할 수 있는 방법에 대한 명확한 팁을 제공합니다 (더 자세한 내용은 → https://web.dev/learn/#lighthouse)
Lighthouse 테스트하는 방식의 제한
크롬 개발자 도구
👍 장점
- 낮은 난이도 (누구나 테스트할 수 있다)
- 여러가지 옵션으로 테스트하기 쉬움
👎 단점
- 테스트 결과에 대한 이력 관리가 안 됨
- 성능 테스트 결과가 불안정적 임 (인터넷 속도, 실행 중인 프로세스에 따라 성능 점수가 달라짐)
- 스케쥴링할 수 없음
CI/CD 파이프라인에서 Lighthouse CLI 이용
👍 장점
- 이력 관리가 됨 (슬랙 알림 + CI 실행 로그)
- 안정적인 성능 결과 (컨테이너화된 환경에서 테스트)
- 스케쥴링 가능함
👎 단점
- 높은 난이도 (특정 CI 플랫폼 기본 지식 필요)
- 테스트 대상 URL/옵션 수정이 어려움 (yml 파일 수정 > 커밋 > 푸시)
- 결과 이력 관리가 되지만 트렌드 시각화가 되지 않음
- VPC망에 있는 개발 서버에 대한 테스트가 불가능함
@ChatOps가 채널에 들어왔습니다
Slack에서 사용할 수 있는 ChatOps 인터페이스를 활용하면 CI/CD Pipeline에서 얻을 수 있는 장점들을 제공하면서도 Chrome 개발자 도구에서 얻을 수 있는 유연성과 테스트 용이성을 유지할 수 있습니다.
👍 장점
- 컨테이너화된 환경으로 배포되어 안정적인 성능 결과
- MongoDB에서 결과를 쌓여서 이력 관리 + 트렌드 시각화 가능
- 슬랙에서 슬래시 명령어로 이용하여 비교적 낮은 난이도로 여러가지 옵션으로 테스트 수행 가능
- 챗봇 서버가 내부 인프라에 배포되어 VPC망에 있는 개발 서버에서도 테스트 가능
- 스케쥴링 기능 제공
👎 단점
- 인프라와 소스코드에 대한 유지관리
Lighthouse 챗봇 기능 소개
검사 즉시 실행
Lighthouse 검사를 한 번 만 실행할 경우에는 기본 옵션으로 실행하거나, 팝업창으로 커스텀된 옵션으로 실행할 수 있습니다.
기본 옵션으로 실행하는 방법: /lighthouse {url}
팝업창으로 옵션 선택하는 방법: /lighthouse
검사 스케쥴링
특정 URL과 옵션으로 지속적으로 검사하기 위해 jobs이라는 명령어로 스케쥴러 기능을 만들었습니다
스케쥴 등록: /lighthouse jobs
CRON 포맷이 어려워하시는 분들 한테는 https://crontab.guru 웹사이트 추천!
스케쥴 목록 확인: /lighthouse jobs ls
스케쥴 삭제: /lighthouse jobs rm {id}
스케쥴이 삭제하려면 먼저 /lighthouse jobs ls 명령어로 Schedule ID 값이 확인해야 합니다!
결과 트렌드 대시보드
챗봇 서버 route 중에 검사 결과로 차트 시각화하는 대시보드가 있습니다
슬랙에서 어떤 URL의 대시보드 링크를 확인하려면 /lighthouse stats {url} 명령어를 사용할 수 있습니다
TMI: MongoDB에서 쌓이는 데이터로 더 많은 차트를 만들어 볼 예정! 🤓
원티드 프론트팀에서 해당 프로젝트를 오픈소스화 하였는데요. 많은 분들이 이용부탁드리고, 더 나은 챗봇을 만들 수 있도록 피드백 부탁드리겠습니다!
GitHub 링크: https://github.com/wanteddev/lighthouse
원티드에서 현재 다양한 포지션을 채용하고 있습니다.
