여러분은 혹시 LightHouse를 아시나요??
크롬에서 제공하는 Lighthouse는 웹 페이지의 성능, 접근성, SEO 등을 자동으로 분석해 주는 오픈 소스 도구입니다.
이 도구를 사용하면, 웹사이트의 전반적인 품질을 한눈에 파악할 수 있으며, 개선할 점을 제시해줍니다.
저는 이 도구가 점수로 사이트가 어떤지 알려주는 점이 재미있다고 생각했습니다.
사실 멘토님이 이걸 소개해주고 나서, 몇 번 만져보고 나니 FE 페이지에 대한 성능 지표가 있다는 점이 상당히 흥미로웠습니다.
좋은 웹 페이지를 만들기 위한 가이드라인도 제공해준다고 생각했기 때문에, 점수를 개선하기 위해서 노력하였습니다.
우선 초기 개발 완료 이후에 달성했던 점수를 보여드리자면,
Performance 점수가 정말 최악이었습니다.(개발 10일차..)
FCP는 무려.. 27.8초, LCP는 무려 58초를 달성했습니다. LCP가 지도를 로딩하는데 시간이 걸려 늦어지긴 했지만,
네트워크가 느린 사용자는 길찾기 결과를 보기 위해 무려 최대 1분을 기다려야 한다는 사실에 충격을 받았습니다.
네이버가 만약 로딩하는데 1분이라는 시간이 걸린다면 사용하지 않을 것 같은데, 프론트엔드 개발자 입장에서 바라보니 그런 상황을 만들고 싶지 않았습니다.
초기 배경화면에서 로딩이 지연되는 원인이 여러가지 요소들이 있습니다. 현재 배포된 사이트들을 보면 다음과 같습니다.
모든 요소를 로딩하는데 총 2초가 걸리고, 그 네트워크 통신량 중 많은 양이, CSS 자원으로 요청된 것이 많았습니다.