TIL 221115 lighthouse(라이트하우스) 써보기

이번 주 스터디에서 라이트하우스(lighthouse)를 써보는게 과제라서 사용하게 됐다.

 

lighthouse를 검색했을 때 가장 상위에 나오고 접하기 쉬운 것 같아서 크롬 확장프로그램으로 사용해보기로 했다.

lighthouse 크롬 확장프로그램

---

localhost로 켜서 확장 프로그램을 눌러서 라이트하우스를 사용하려고 하니까 개발자 도구로 가서 사용하라고 떴다.

라이트하우스 확장 프로그램

 

 

 

개발자도구에 가서 Elements, Console 같은 탭에 보면 라이트하우스가 있고 들어가면 Analyze page load를 클릭하면 페이지를 측정한다. 

개발자도구 라이트하우스

 

 

 

그럼 결과를 알려준다. 충격적...🥺 스터디 프로젝트긴 하지만 어떻게 51점을 줄 수가 있어....🥲

라이트하우스 측정 결과

 

이런식으로 상세 항목별로 분석 결과를 알려준다.

퍼포먼스 결과

 

그리고 어떻게 성능을 향상 시킬 수 있는지 고치면 좋을 항목을 추천해준다.

성능 향상을 위한 항목 추천

 

 

 

SEO는 91점이 나왔는데 meta description이 없어서 점수가 떨어졌다고 나왔다.

SEO 성능 측정 결과

 

항목을 참고해서 프로젝트를 수정해서 다시 측정해봐야겠다.

---

코드를 아무리 고쳐도 점수에 변동이 없어서 고민했는데 알고보니 반응형 지원이 되어있지 않은데 디바이스를 모바일로 설정해두고 검사를 해서 그런 것이었다......🥲 잘 확인하자......

라이트하우스 측정 전 디바이스 설정을 확인 할 것

 

다시 측정하니 점수가 87점이 나왔고 SEO가 낮길래 meta태그를 추가했더니 100점이 되었다!

데스크탑으로 설정하고 재측정한 결과

 

하지만 여전히 Enable text compression가 해결이 안돼서 퍼포먼스 점수가 80점대다.. GZIP이라는 키워드를 찾았는데 어떻게 이 문제를 해결할지 더 찾아봐야될 것 같다.

 

+

참고1 : GZIP

참고2 : vite-plugin-compression