와글와글 성능 개선 기록

라이트 하우스 점수 개선

성능

• Next.js의 코드스플리팅, SSR, SSG과 폰트 파일 압축 및 캐싱을 통해 성능 점수를 60점에서 94점으로 개선할 수 있었다.

접근성

• 데이터 시각화를 canvas가 아닌 리액트로 렌더링하고 있었고, 스크린 리더에 기본 언어를 명시하고자 lang 태그를 사용하고 배경색과 글자색의 대비를 높여 접근성 점수를 73점에서 100점으로 개선할 수 있었다.

SEO

• meta 태그와 라이트하우스 SEO 점수를 85점에서 100점으로 개선할 수 있었다.

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

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

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

short polling과 리렌더링

• 서비스에 맞는 실시간성을 유지하기 위해서 Short Polling을 사용했는데, 이에 따라서 요청 주기마다 API 응답에 의해 리액트 버블 차트의 데이터들이 전부 변경되며 리렌더링이 발생했다.

Tanstack Query 활용하기

• Tanstack Query의 Caching 기능과 렌더링 최적화를 통해서 1초마다 발생하던 리렌더링을 *데이터가 서버에서 변경되었을 때만 하도록 개선 할 수 있었다.

변경된 데이터만 리렌더링하기

• 이후 UI 로직을 수정하여, 변경된 데이터가 수신되었더라도 전체 버블차트가 리렌더링 되는 것이 아니라 변경된 키워드 버블만 리렌더링 될 수 있도록 최적화시킬 수 있었다.