보통 SEO나 사이트 퍼포먼스를 측정하기 위해 온라인 페이지를 사용하는 경우가 많습니다. 물론 나쁘지 않은 방법이지만 해당 사이트가 수집한 데이터를 어떻게 사용할지, 또한 이 결과가 다른 SEO 등에 어떤 영향을 미치는지 우리는 잘 알지 못합니다.
오늘은 로컬 환경에서 이를 쉽게 측정할 수 있는 크롬 기본 기능에 대한 이야기를 하려고 합니다. lighthouse입니다.
Chrome lighthouse
Chrome lighthouse는 Chrome 브라우저 내 개발자도구에 내장된 퍼모먼스 측정 도구입니다. lighthouse는 구글이 직접 운영하는 오픈소스 도구로, 23k의 star를 가진 큰 프로젝트 입니다.
https://github.com/GoogleChrome/lighthouse
Checking Now
크롬 개발자 도구(F12)를 열어 탭에서 lighthouse를 찾습니다. 들어가면 Category와 Device를 선택할 수 있게 되어 있습니다. 각 카테고리의 의미는 아래와 같습니다.
| Category | Desc |
|---|---|
| Performance | 웹 페이지의 로딩 속도 등 실제 성능을 측정합니다. |
| Progressive Web App | PWA로 부르며, 웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크합니다. |
| Best practices | Best practices를 따라 개발되었는지 체크합니다. |
| Accessibility | 접근성입니다. 보통 폰트 사이즈, 메뉴간 간격 등을 측정합니다. |
| SEO | Search Engine Optimization의 약자로 검색 엔진 수집 최적화에 관련된 부분입니다. 여긴 아마 웹 사이트 운영하시면 많이 민감하게 신경쓰시는 부분이죠. |
이제 스캔해보시면, 각각 항목에 대한 결과 점수와 상세 내용을 보실 수 있습니다.
저의 경우 Mobile 쪽 Performance 부분에 문제가 있었고, 체크해보니 제가 이미지 최적화 작업 중 놓친 이미지 리소스가 몇개 있었네요.
상세 부분에는 어떤게 문제인지, 어떻게 수정하면 되는지 자세하게 알려줍니다.
