본문 바로가기

Develop/Web

Lighthouse - 웹 진단 및 성능 향상시키기

웹 개발을 하면서 '더 좋은' 웹을 만든다는 것은 참으로 어려운 일이다.

그러다 최근에 크롬 개발자도구의 Audits를 알게되었다. 크로미움 기반 웹에서 F12를 눌러 개발자 도구를 열어보면 Audits 탭이 보인다.




개발자 도구의 Audits 탭



이 탭에서 Lighthouse를 이용해서 해당 웹페이지를 분석할 수 있다. Run audits 버튼을 누르면 된다.

나는 현재 개발중인 UOSTime을 대상으로 해보았다.





결과로 성능, PWA, 접근성, 검색엔진 최적화 등의 점수가 표시된다.

음.. 점수가 좋지 않다. 성능과 접근성이 많이 부족하다는 결과가 나왔고, 아래로 스크롤을 내리면 자세한 설명이 나온다. 무엇이 잘못되었고 무엇이 권장되는지 쭉 나와있다. 나는 곧바로 몇가지 작은 개선을 하고 다시 체크해보았다.





성능 면에서 12점이 올랐다. 이렇게 Lighthouse를 이용하여 자신이 개발하는 웹을 개선해나갈 수 있다. 모든 점수가 100점이 될 때까지 계속해서 고쳐나가야겠다.



아래는 2020.09.14 테스트 결과로, 그동안의 개선에 따른 결과를 체감할 수 있었다!