웹성능측정 lighthouse란?

연휴를 앞 둔 직전. 팀장님께서 공지하신 말씀

XX 페이지가 많이 느리다는 의견이 있어
연휴동안 해결 방안을 생각해보고
연휴 후에 이야기를 나눠봅시다.

 

그래서 근래 연휴동안 대체 어떻게 해야하지! 라는 고민밖에 없었다... (사실은 해당 페이지가 느리다는 것에 별로 공감이 가지 않는 것이 가장 큰 이유이다.)

그러다가 정리해보는 lightHouse!

Lighthouse란?

구글에서 제공하는 lighthouse는 웹페이지 품질 측정 도구라고 생각하면 된다. 모든 웹페이지에서 실행할 수 있으며, 이때 해당 페이지의 성능/접근성/검색엔진 등에 대한 분야들을 체크하여 점수로 나타내준다. 다만 이 점 수가 절대적인 점수는 아님으로 측정 할 때마다 조금씩 달라질 수 있다.

lighthouse 사용방법

사용 방법은 아래와 같은 방법들이 있는데, 한 페이지에서 모두 실행해보니 거의 비슷하게 나왔다. (한 5점 정도의 플러스/마이너스 차이가 있긴 함) 개인별로 편한 방법을 사용하면 될 것 같다.

1. 개발자 도구에 있는 lighthouse 사용하기

2. 크롬 익스텐션 설치하기

https://developer.chrome.com/docs/lighthouse/overview/

Overview - Chrome Developers

3. web.dev 페이지에서 측정하기

https://web.dev/measure/

Measure page quality

lighthouse와 더불어 PageSpeed Insights라는 측정 페이지도 있다. PSI도 lighthouse에 기반을 두고 있지만 lighthouse가 전반적인 웹 페이지를 체크한다면 PSI는 성능적인 부분에 초점을 맞추어 체크한다고 생각하면 된다. (애초에 lighthouse와 근간이 같기 때문에 내용이 크게 다르지 않아 개인적으로는 보기 편한 플랫폼을 선택하여 사용하면 될 것 같다.)

https://pagespeed.web.dev/

 

lighthouse 측정예시

다음은 해당 블로그를 web.dev 페이지에 있는 lighthouse를 이용하여 측정한 사례이다.

상단과 같이 전체적인 측정 점수가 나오며, 세부적으로 확인할 수 있다.

성능에서 각 항목마다 몇 초가 소요되었는지

어떤 부분에서 절감이 가능한지

어떤 부분을 진단했는지 등의 데이터를 확인할 수 있다.