피드로 돌아가기
Dev.toBackend
원문 읽기
Payload 최적화를 통한 API 응답 데이터 90% 절감 및 체감 속도 개선
My API Responded in 4 ms, but Navigation Still Felt Slow
AI 요약
Context
SvelteKit과 Rust API 기반의 프로젝트 관리 앱에서 API 응답 시간은 4ms로 매우 낮았으나 실제 페이지 전환 속도가 느린 병목 현상 발생. 분석 결과 리스트 페이지에서 불필요한 Markdown 설명 필드 등 대량의 데이터를 포함한 과도한 Payload(약 354KB)를 전송하던 구조적 한계 식별.
Technical Solution
- List와 Detail의 데이터 계약을 분리하여 View 요구사항에 최적화된 개별 Endpoint 설계
- 초기 리스트 렌더링에 불필요한 대용량 텍스트 필드를 제거한 Summary Payload 도입
- 사용자가 특정 항목을 선택하는 시점에만 상세 데이터를 요청하는 Lazy-loading 전략 적용
- SSR Loader가 직렬화하는 Route Data의 범위를 UI 실제 사용 범위로 제한하여 네트워크 전송량 최소화
- 공통 API의 편의성을 위해 모든 필드를 포함하던 Union 형태의 응답 구조를 목적 기반의 분리 구조로 변경
실천 포인트
- API 응답 시간(Latency)뿐만 아니라 실제 응답 크기(Response Size)를 정기적으로 측정할 것 - 리스트 뷰에서 상세 내용(Markdown, JSON 등)을 포함하여 반환하고 있지 않은지 검토할 것 - SSR 프레임워크 사용 시 Loader에서 반환하는 객체가 클라이언트로 직렬화되는 양을 확인 할 것 - 공유 API에 필드가 무분별하게 추가되어 Over-fetching이 발생하고 있지 않은지 체크할 것