[Lighthouse] Lighthouse를 이용해서 프로젝트 돌아보기

Lighthouse란?

사이트를 검사하여 성능 측정 할 수 있는 도구이다. 크롬에서 접근하는 방법은 F12 > Lighthouse 탭에 들어가면 간단하게 볼 수 있다.

 

성능

First Contentful Paint는 사용자가 화면에 어떤 일이 있는지 인지할 수 있는 시간인 텍스트와 이미지 요소가 화면에 렌더링 되는 시간이다.

Time to Interactive 상호작용이 가능해지는 시점이다.

Speed Index는 뷰포트 내의 콘텐츠가 채워지는 속도이다.

Total Bloking Time은 상호작용하지 못하는 시간의 총합을 의미한다.

Largest Contentful Paint는 가장 넓은 영역을 차지하는 이미지나 텍스트 요소가 처음 로딩되는 시점이다.

Comulative Layout Shift는 예상치 못한 레이아웃을 경험하는 빈도를 정량화한 것이다.

 

다음은 기존에 했던 프로젝트의 성능인데, 결과 뿐만 아니라 추천을 통해 리팩토링 방향을 알 수 있어 좋았다. 우리 프로젝트에서는 이미지가 상당히 들어간 편이었는데, 이미지 크기 및 방식 등등에 따라 성능에 영향을 줌을 알 수 있었다.

성능항목 결과

 

접근성

이 항목에서는 웹 접근성을 갖추고 있는지 확인하게 된다. 생각보다 많은 검사를 통과하였지만, 직접 확인해야 하는 항목들이 존재하였다. 이미지를 사용하는 만큼 대체 텍스트를 명확하게 사용할 필요를 느꼈다. 웹 접근성을 갖추고자 노력하는 프론트엔드 개발자가 되어야겠다고 느꼈다.

접근성 결과

권장사항

console.log가 찍히고 있음을 알 수 있었다. 예전에 팀 내에서 회고하며 공유되었던 내용인데, 해결되지 않았음을 알 수 있었고, lighthouse를 통해 인지할 수 있었다.

검색엔진 최적화

PWA(Progressive Web App)

 

https://medium.com/jung-han/%EB%9D%BC%EC%9D%B4%ED%8A%B8%ED%95%98%EC%9A%B0%EC%8A%A4-%EC%84%B1%EB%8A%A5-%EC%A7%80%ED%91%9C-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-83df3dc96fb9

 

라이트하우스 성능 지표 살펴보기