웹 개발을 하다 보면 성능, 접근성, SEO, 그리고 웹 표준 준수가 얼마나 중요한지 실감하게 됩니다. 하지만 이를 일일이 확인하고 분석하는 일은 어렵고 시간이 많이 소요될 수 있습니다. 이런 상황에서 Google의 Lighthouse라는 도구가 큰 도움이 됩니다. 오늘은 제가 직접 사이트를 배포를 한 뒤에 겪은 경험을 바탕으로 Lighthouse에 대해 쉽게 설명해보겠습니다.
Lighthouse란?
Lighthouse는 Google이 제공하는 오픈 소스 자동화 도구로, 웹 페이지의 성능, 접근성, SEO 등 다양한 품질 지표를 분석해줍니다. 이 도구는 웹 개발자가 웹사이트의 상태를 파악하고 개선점을 찾는 데 큰 도움을 줍니다.
저도 처음 어찌어찌 배포를 했지만 배포한 페이지에 대한 성능이 괜찮은지 궁금하더라구요....
우선 아래 크롬 웹스토어에서 lighthouse를 추가합니다.
Lighthouse - Chrome 웹 스토어
Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.
chromewebstore.google.com
그 뒤에 자신이 테스트 해보고 싶은 사이트에서 개발자모드(F12를 누르면)에서 lighthouse가 생성된 것을 볼 수 있습니다.
거기에서 페이지 로드 분석을 누르면 분석은 끝입니다.
Lighthouse의 주요 기능
Lighthouse는 크게 다섯 가지 주요 영역을 평가합니다:
- 성능: 페이지 로딩 속도, 첫 번째 콘텐츠 표시 속도 등의 성능 지표를 측정합니다. 페이지가 사용자에게 얼마나 빠르게 로드되는지가 사용자 경험에 큰 영향을 미치기 때문에 중요합니다.
- 접근성: 시각 장애인 등 보조 기술 사용자들이 웹사이트를 얼마나 잘 사용할 수 있는지를 평가합니다. 웹 접근성을 개선하면 더 많은 사용자가 사이트를 이용할 수 있습니다.
- SEO: 웹 페이지가 검색 엔진 최적화(SEO)에 얼마나 부합하는지를 평가합니다. 이를 통해 사이트가 검색 결과에서 더 높은 순위를 차지할 가능성을 높일 수 있습니다.
- 베스트 프랙티스: 최신 웹 표준과 보안 규칙을 준수하고 있는지를 확인합니다. 예를 들어, HTTPS를 사용하고 있는지, 불필요한 라이브러리나 API 호출이 없는지 등을 체크합니다.
- PWA 지원: 사이트가 Progressive Web App(PWA)으로서 제대로 작동할 수 있는지 확인합니다. PWA는 네이티브 앱과 유사한 경험을 제공하기 때문에 사용자 친화적인 웹사이트를 구축할 때 유리합니다.
그럼 여기서 드는 궁금증 lighthouse의 피드백은 대부분 옳은가?
이 내용에 대한 정리는 아래와 같이 할 수 있을 것 같네요.
Lighthouse의 피드백은 웹 표준과 성능 최적화에 유용하며 대체로 신뢰할 만하지만, 사이트의 특성에 따라 선택적으로 적용하는 것이 중요합니다. 주요 요약 사항은 다음과 같습니다:
- 기본 웹 표준 준수: 대부분의 권장 사항은 웹 표준과 성능 개선을 위한 기본 지침에 맞춰져 있습니다.
- 개별 사이트 특성 고려: 성능과 디자인 요구 사이에서 조정이 필요할 수 있어 모든 권장 사항을 그대로 따를 필요는 없습니다.
- PWA와 SEO는 상황에 맞게 적용: PWA와 SEO 피드백은 사이트의 목적에 따라 선택적으로 반영하면 됩니다.
요약하자면, Lighthouse의 피드백은 중요한 참고자료로 삼되 개별 사이트의 상황에 맞게 우선순위를 고려하여 적용하는 것이 좋습니다.
'IT' 카테고리의 다른 글
| 배포 중에도 서비스 중단 없이! - 무중단 배포 전략 알아보기 (1) | 2024.11.13 |
|---|---|
| 상태 없는 객체와 static 메서드 활용법 (0) | 2024.11.13 |
| @Builder, 빌더 (0) | 2024.11.11 |
| Implements vs extends (4) | 2024.11.10 |
| CI/CD란? (0) | 2024.11.09 |