성능 최적화 (1) LightHouse를 이용해 성능 최적화 해보기

실제 배포중인 웹사이트의 방 목록 화면(버그와 UI오류 등을 잡기위해 지인들이 테스트 중이라 양해바랍니다.)

 

 

프로젝트의 배포 이후, 어떻게 해야 코드나 성능을 개선할 수 있을까에 대해 고민하고 있었습니다.

 

제일 먼저 접했던 것은 컨퍼런스에서 소개 된 CleanCode 를 적용해 '코드를 개선하는 것' 이었는데요.

(*참고했던 컨퍼런스는 Toss 개발자인 '진유림' 씨의 실무에서 바로 쓰는 Frontend Clean Code 입니다.)

 

안타깝게도, 이 적용법은 조금 더 공부가 필요해 보였습니다...😢

(물론 이후에 본 프로젝트 코드를 이용해 레거시를 걷어내고 클린코드 적용해 볼 예정입니다.🙌)

 

또 다른 방법도 있나.... 했더니 있었습니다!

크롬에서 제공하는 성능 분석 도구인 LightHouse를 사용하는 것인데요.

 

이 도구는 안타깝게도 로컬 PC 환경이나 해외 사이트 등을 조사하거나 하는 등의 이유로 매번 성능이 다르게 측정되기도 한다고 합니다.

그래도 분석을 자동화하여 보안 사이트든 일반 사이트든 전부 측정할 수 있다는 메리트가 있습니다.

 

어쨋거나 내가 목표했던 원하는 웹사이트의 성능을 분석해보고 개선할 수 있는 부분을 피드백 받을 수 있다는 점 때문에 선택해 보았습니다.

 

 

 

LightHouse 성능 분석 결과

 

위의 결과 점수는 현재 배포를 완료한 프로젝트의 방 목록 페이지에 대한 점수입니다.

 

처음 돌려보고선 마음속으로 "오..? 첫 프로젝트 치곤 괜찮잖아?" 를 외쳤으나... 완전 우물안 개구리였습니다.

 

빠르게 많은 기술 스택을 배우고 적용하다 보니 오히려 기본을 놓치고 말았던 겁니다...

 

예를들어, 가장 점수가 낮은 접근성의 개선 권장사항들을 살펴보면..

 

너무나 많이 기본을 놓치고 있었다..

 

위와 같이 나왔는데요.

안타깝게도 기본 중의 기본인 웹 접근성을 저해하는 요소가 너무 많았습니다.

(다행히 Next를 사용하며 next/link를 이용하다보니 a태그에 대한 오류가 없지만 a태그는 href 속성을 포함하지 않으면 Tab키를 이용하여 포커싱을 할 수 없고, href 속성을 포함하여도 Tab키를 통해 포커싱이 되어도 Enter를 먹지 않는다고 합니다.)

 

특히 이 문제들은 사전지식이 없었다면 알기가 어려웠을 수도 있습니다.

Next에서만 그런건지 모르겠지만 build를 해도 해당 요소에 관한 경고는 없었던 걸로 기억하고 있습니다.

(해당 정보가 틀렸다면, 댓글 달아주시면 수정하겠습니다.)

 

아무튼 이 도구를 사용한다면 '무엇을 개선해야 하는지', '왜 개선이 필요한지'에 대해 정보를 레퍼런스 링크도 걸어주며 가르쳐주는 아주 친절한 도구입니다.

모르고 계셨다면 한번 쯤 사용해보시면 좋을 듯 합니다.

 

아쉬운 점이 있다면..

제가 맡은 이 페이지의 문제점 외에도 기본적으로 Next.js의 12.0.10 버전이 취약점이 있는 것 같았습니다.

이 문제로 권장사항 점수가 많이 떨어졌구요.😢

 

기분이 좋았던 점이 있다면

SEO(검색 엔진 최적화) 같은 경우는 Next.js를 사용하는 우리 프로젝트 웹사이트의 장점이기 때문에

제공하는 모든 페이지에서 웬만하면 초록불이 들어오는게 기분이 좋았습니다 ㅎㅎ 뿌듯😊

(이것만으로도 초반 프로젝트에서 목표했던 라이브러리 사용 이유의 반을 달성하지 않았나...ㅎㅎ)

 

각설하고 이것저것 제안해주는 대로 수정을 해본 후 재시도 해보았습니다.

 

 

매번 성능 분석에 오차가 존재한다는 것을 감안해도 접근성이 굉장히 개선된 것을 확인할 수 있었습니다.