Lighthouse 100점 너머의 OOM 해결을 통한 Heap 200MB 유지 전략

Context

합성 테스트 기반의 Lighthouse 지표는 단일 페이지 로드 성능만 측정하여 장시간 세션 유지 시 발생하는 Heap Memory 누적과 OOM(Out of Memory) 크래시를 탐지하지 못하는 한계 존재. 특히 저사양 Android 기기의 엄격한 Renderer Process 메모리 제한으로 인한 탭 강제 종료 문제 빈번.

Technical Solution

• React Query의 gcTime을 5분에서 90초로 단축하여 불필요한 Cache 데이터의 즉각적인 Eviction 유도
• Tab Visibility API를 통한 백그라운드 상태의 Polling 중단으로 GC(Garbage Collection) 부하 감소 및 메모리 파편화 방지
• 특정 시간(예: 2~4시간) 유휴 상태 시 강제 Reload를 수행하는 Idle Reload 메커니즘 도입으로 누적된 Heap 초기화
• sessionStorage를 활용한 Session Restoration 설계를 통해 사용자 경험 저해 없는 상태 복구 구현
• performance.memory API 기반의 실시간 Heap 사용량 모니터링으로 기기별 Memory Budget 준수 여부 검증

Impact

• 장시간 세션 유지 시에도 Heap Memory 사용량을 200MB 미만으로 안정적으로 유지
• Mobile 타겟 Steady-state Heap 80MB, Max Heap 150MB 이하의 엄격한 Memory Budget 달성

Key Takeaway

Lab Metrics의 완벽함이 실제 필드의 안정성을 보장하지 않으므로, SPA 설계 시 '시간에 따른 자원 누적'을 고려한 자원 회수 전략과 기기별 가용 메모리를 반영한 Memory Budget 설정이 필수적임.