개발자 도구를 활용한 성능 개선 - boostcampwm-2022/web17-waglewagle GitHub Wiki

🔦 라이트 하우스 점수 개선

Untitled (5)

  • Next.js의 코드스플리팅, SSR, SSG과 폰트 파일 압축 및 캐싱을 통해 성능 점수를 60점에서 94점으로 개선하였습니다.
  • 스크린 리더에 기본 언어를 명시하고자 lang 태그를 사용하고 배경색과 글자색의 대비를 높여 접근성 점수를 73점에서 100점으로 개선하였습니다.
  • meta 태그와 라이트하우스 SEO 점수를 85점에서 100점으로 개선하였습니다.

🔬 크롬 개발자 도구 성능 측정 및 개선

  • 크롬 개발자 도구를 통해서 버블차트의 특정 상태로 인해 사용되지 않는 EventListener가 지속적으로 쌓이고 있는 버그를 발견, 해당 상태를 제거하는 로직으로 버그를 해결하여 최대 800까지 쌓이던 EventListener를 400 이하로 유지하고 JS Heap 메모리를 최대 60mb에서 35mb로 감소시켰습니다.

📶 API 데이터 리렌더링 성능 개선

  • 서비스에 맞는 실시간성을 유지하기 위해서 Short Polling을 사용하였습니다. 그리고 이에 따라서 요청 주기마다 API 응답에 의해 리렌더링이 발생했습니다.
  • Tanstack Query의 Caching 기능과 렌더링 최적화를 통해서 1초마다 발생하던 리렌더링을 데이터가 변경되었을 때만 하도록 개선하였습니다.
  • 이후 UI 로직을 수정하여, 변경된 데이터가 수신되었더라도 전체 버블차트가 리렌더링 되는 것이 아니라 변경된 키워드 버블만 리렌더링 될 수 있도록 최적화를 진행하였습니다.