Chrome lighthouse를 통한 웹 페이지 성능 측정

hahwul

Jul 04, 2021

보통 SEO나 사이트 퍼포먼스를 측정하기 위해 온라인 페이지를 사용하는 경우가 많습니다. 물론 나쁘지 않은 방법이지만 해당 사이트가 수집한 데이터를 어떻게 사용할지, 또한 이 결과가 다른 SEO 등에 어떤 영향을 미치는지 우리는 잘 알지 못합니다.

오늘은 로컬 환경에서 이를 쉽게 측정할 수 있는 크롬 기본 기능에 대한 이야기를 하려고 합니다. lighthouse입니다.

Chrome lighthouse

Chrome lighthouse는 Chrome 브라우저 내 개발자도구에 내장된 퍼모먼스 측정 도구입니다. lighthouse는 구글이 직접 운영하는 오픈소스 도구로, 23k의 star를 가진 큰 프로젝트 입니다.

크롬 개발자 도구(F12)를 열어 탭에서 lighthouse를 찾습니다. 들어가면 Category와 Device를 선택할 수 있게 되어 있습니다. 각 카테고리의 의미는 아래와 같습니다.

Category	Desc
Performance	웹 페이지의 로딩 속도 등 실제 성능을 측정합니다.
Progressive Web App	PWA로 부르며, 웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크합니다.
Best practices	Best practices를 따라 개발되었는지 체크합니다.
Accessibility	접근성입니다. 보통 폰트 사이즈, 메뉴간 간격 등을 측정합니다.
SEO	Search Engine Optimization의 약자로 검색 엔진 수집 최적화에 관련된 부분입니다. 여긴 아마 웹 사이트 운영하시면 많이 민감하게 신경쓰시는 부분이죠.

이제 스캔해보시면, 각각 항목에 대한 결과 점수와 상세 내용을 보실 수 있습니다.

Mobile

Web

저의 경우 Mobile 쪽 Performance 부분에 문제가 있었고, 체크해보니 제가 이미지 최적화 작업 중 놓친 이미지 리소스가 몇개 있었네요.

상세 부분에는 어떤게 문제인지, 어떻게 수정하면 되는지 자세하게 알려줍니다.

아 alt 안썼네...