Lighthouse BEFORE

Untitled

Lighthouse AFTER

Untitled

항목	웹 성능 최적화 전	웹 성능 최적화 후
Performance Score	26	89
First Contentful Paint	0.5s	0.5s
Total Blocking Time	1,670ms	90ms
Speed Index	9.5s	1.6s
Largest Contentful Paint	4.7s	1.7s
Cumulative Layout Shift	0.227	0.086

▶️ 성능 개선을 위해 어떠한 노력을 했나?

React.memo로 불필요한 리렌더링 개선
useCallback, useMemo로 메모이제이션
windowing으로 첫 렌더링 시 보이는 코인만 DOM에 표시
API 캐싱을 통해 네트워크 대역폭 절약
throttle로 Socket 부하 분산
react-icons 라이브러리 대신 svg 사용

단순 리랜더링 개선

Untitled

원본

Untitled

CoinList에만 React.memo 적용 후

Untitled

CoinInfo 컴포넌트 분리 후

Untitled

TradeValue컴포넌트 분리 후

Untitled

전원 컴포넌트화