피드로 돌아가기
Dev.toFrontend
원문 읽기
Zero-network First Render 및 Async 로딩을 통한 브라우저 체감 속도 극대화
5 Ways Firefox Extension New Tab Pages Are Killing Your Browser Performance
AI 요약
Context
Firefox 확장 프로그램의 New Tab 페이지가 Synchronous I/O와 Blocking API 호출로 인해 렌더링 지연 및 CPU Spike를 유발하는 구조적 한계 분석.
Technical Solution
- localStorage 접근 방식을 Async로 전환하고 Default State를 즉시 노출하여 Rendering Block 제거
- Stale-While-Revalidate 전략 기반의 Aggressive Caching을 도입하여 API 응답 대기 시간 제거
- TTL(30분) 설정 및 로컬 캐싱을 통한 네트워크 요청 횟수를 시간당 약 30회에서 2회로 최적화
- 외부 폰트 및 라이브러리를 배제하고 System Font Stack과 Inline CSS를 활용한 Critical Path 최적화
- setInterval의 Drift 문제를 해결하기 위해 현재 밀리초 단위 계산 기반의 Recursive setTimeout 구조 채택
Impact
- 첫 렌더링 시간 16ms(1 Frame) 미만 달성
- 캐시 데이터 기반 전체 UI 노출 시간 100ms 미만으로 단축
- 네트워크 요청 횟수 약 93% 감소(30/hr -> 2/hr)
- CSS 로드 용량 10KB 미만으로 최적화
Key Takeaway
사용자가 빈번하게 진입하는 진입점(Entry Point) 설계 시, 네트워크 의존성을 완전히 제거한 'Zero-wait' 렌더링 전략과 정밀한 타이머 동기화가 사용자 경험의 핵심임.
실천 포인트
- [ ] 메인 스레드를 차단하는 Synchronous Storage API 사용 여부 확인 - [ ] 외부 API 호출 전 캐시된 Stale Data를 우선 렌더링하는 로직 적용 - [ ] Google Fonts 등 외부 리소스를 System Font Stack으로 대체 가능한지 검토 - [ ] 정밀한 시간 업데이트가 필요한 경우 setInterval 대신 setTimeout 재귀 호출 고려 - [ ] 초기 렌더링에 필수적이지 않은 스크립트의 Lazy Loading 적용 여부 확인