웹 접근성, seo를 모두 마무리한 뒤 lighthouse 성능 평가를 해보자.
그동안 적용해야지 해야지 하고 다음 프로젝트로 미뤄왔던 웹 접근성과 SEO 적용이 마무리었다.
물론 채팅 쪽은 아직 안되었지만, 아고라 쪽은 마무리가 되었기에 성능 최적화를 할 겸 lighthouse를 실행해봤다.
열심히 접근성이랑 seo를 봐줘서인지 두 항목은 나름 잘 나온 것 같다.
하지만 퍼포먼스 항목이 너무 낮게 나왔다.
그래서 이 퍼포먼스를 어떻게 개선했는지 그 과정을 작성하고자 한다.
개발 환경이 아닌 프로덕션 환경에서 확인하기
사실 위의 사진은 개발 환경에서 확인한 결과다.
lighthouse로 성능 평가를 할 땐 개발 환경이 아닌 프로덕션 환경에서 해야한다.
개발 환경은 프로덕션 환경보다 더 성능이 안좋게 나온다.
이는 개발 환경에서는 디버깅을 쉽게 할 수 있도록 여러 추가 리소스를 요청하는데, 이게 lighthouse 점수에 계산되기 때문이다.
여기서 리소스는 개발 과정에서 발생한 오류를 추적할 수 있는 로그와 같은 로직적인 부분일 수도 있고, 디버깅 시 정확한 코드 위치를 판단할 수 있는 소스맵 같은 파일일 수도 있다.
프로덕션 빌드를 할 때는 이와 같은 파일들을 사용자에게 제공할 필요가 없고 성능의 최적화를 하도록 이런 리소스들이 모두 빠지게 되어 성능상 이점이 된다.
그렇기에 실제 최종 사용자 입장에서 테스트하는게 좋다.
커리어리 개발환경과 배포환경 Lighthouse 점수차 이유
프로덕션 환경에서 lighthouse 돌리기
yarn build를 하면 아래의 사진처럼 경로별로 JS 크기, 정적/동적인지 알려준다.
여기서 빨갛게 나오는 부분이 있다면 용량이 매우 크다는 이야기이므로 압축하거나 동적 import, 꼭 필요한 코드만 남기는 것이 좋다.
나는 home의 api 응답으로 받아오는 리스트에 대해 dynamic import를 해주었다.
yarn build를 할 때 lint 에러가 나는 경우도 있다.
build를 할 때는 모든 코드에 대해 lint 검사를 하기 때문에 적절하지 않은 부분에 대해 에러를 뱉어낸다.
이건 터미널에 어떻게 수정하라고 나오기 때문에 그대로 수정하면 된다.
나도 했으니까 다 할 수 있어
확인한 결과!
역시 개발 환경보단 배포 환경에서 성능이 더 좋게 나온다.
여기서 어떤 부분이 문제가 있고 어떻게 개선하면 좋을지도 설명이 다 나온다.
확인하니, 대부분이 css 리소스 로드시에 발생한 문제였다.
css 파일은 렌더링 차단 리소스이기 때문이다.
css 파일은 브라우저에서 페이지를 렌더링하기 전에 로드 및 처리되어야 하며, 불필요하게 큰 스타일시트가 포함된 웹페이지는 렌더링하는 데 시간이 더 오래 걸리게 된다.
이제 어떤 파일이 문제인지 알았으니, 어떤 클래스가 문제인지 범위를 확인해야 한다.
구체적인 부분을 확인하기 위해 사용되는 부분, 사용되지 않는 부분을 확인하자.
Coverage로 문제 확인하기
- devtools에서 Control+Shift+P를 눌러 명령어 메뉴를 연다.
- 'Coverage'를 입력하고 Show Coverage를 선택한다.
- 하단에 새로고침 아이콘이 생기면 클릭한다.
잘 보니, 크기가 엄청나게 큰 css 파일 하나가 전혀 사용되고 있지 않은데 preload되어 렌더링 지연이 발생했다.
해당 아이템을 클릭하면 내부 코드를 확인할 수 있다.
거의 모든 코드가 이 형식이고, 전혀 사용하고 있지 않았다.
이 코드는 next의 google font에 대한 css 코드이다.
설정해둔 폰트가 제대로 동작하지 않을뿐만 아니라, 과하게 preload되는 문제였다.
문제 해결하기
분명 tailwind와 next에서 제공하는 폰트는 사용하지 않는 css에 대해선 최적화를 제공한다고 알고 있었기 때문에, 도대체 왜 그런건지 찾느라 힘들었다.
이유는 아래와 같았다.
너무 많은 weight 지정
사용하지 않는 weight에 대해서도 모두 불러와서 발생한 문제였다.
필요한 가중치만 불러오도록 하자.
다시 빌드를 하고, 확인!
갑자기 99로 올랐다.
72 -> 99로 37.5% 개선..!
혹시 몰라서 계속 다시 돌려봤지만 90~99로 나온다.
사실 폰트 하나 가중치 덜 불러왔다고 그렇게 좋아질까 싶었는데, 너무 좋아져서 순간 당황했다.
계속 lighthouse를 돌린 결과, 나의 경우는 95%가 css 리소스에 대한 문제였다.
javascript 부분에서 경고가 뜨긴 했는데, 확인하니 모든 javascript 경고가 chrome에서 다운받았던 확장 프로그램의 파일을 다운받느라 그런 것이었다.
나는 다운받은 확장 프로그램이 16개로, 많아서 생긴 문제같다.
마무리
일단 아고라 쪽 리스트 출력/아고라 생성 페이지의 성능 최적화는 이정도로 하고, 이후 채팅 쪽 기능을 구현 + 실 서버 연결한 후에 다시 확인하는걸로 하자.
확실히 lighthouse에서 높은 점수를 줄 때 기분이 좋긴 하다.
성능 최적화를 해본 적이 없어서 어떤 부분이 문제인지는 알아도, 해결하는 근본적인 방법을 몰라서 시간을 너무 낭비하는 것 같다는 생각이 들었다.
앞으로도 계속 이렇게 확인하며 수정하다보면 조금씩 해결되지 않을까..! 하는 마음으로 개발하고자 한다.
