피드로 돌아가기
Dev.toFrontend
원문 읽기
TCP Slow Start 윈도우 최적화로 구현한 14KB 초경량 랜딩 페이지
I shipped a working landing page in 14 KB. Here is every byte.
AI 요약
Context
현대 웹 페이지의 평균 용량이 2MB를 상회하며 과도한 JavaScript와 이미지 레이어로 인한 로딩 지연 발생. 특히 모바일 환경에서 다중 RTT(Round Trip Time) 발생으로 인한 First Paint 지연이 사용자 이탈의 핵심 원인으로 작용.
Technical Solution
- TCP Slow Start 메커니즘을 활용해 첫 10개 패킷 전송 범위인 14KB 내에 Critical Path 전체를 포함하는 설계
- Framework와 Build Step을 완전히 제거한 Single HTML 파일 구조 채택으로 HTTP 요청 횟수 최소화
- External CSS 및 Web Fonts를 배제하고 Inline CSS와 System Fonts를 사용하여 렌더링 차단 리소스 제거
- 고용량 이미지 대신 Inline SVG를 활용해 시각적 요소 유지와 바이트 최적화 동시 달성
- 무거운 Analytics Library 대신 100바이트 수준의 Custom Pixel을 구현하여 트래킹 기능 유지
- Gzip 압축을 통한 전송 효율 극대화로 HTML, CSS, SVG를 포함한 총 14KB 전송량 달성
실천 포인트
- Critical Path 리소스가 14KB 내에 포함되어 첫 RTT에 렌더링 가능한지 검토 - 마케팅/문서 페이지에서 불필요한 JS Framework 의존성을 제거하고 HTML/CSS 기본 기능으로 대체 가능한지 분석 - 외부 폰트 대신 System Font Stack을 사용하여 CLS(Cumulative Layout Shift) 및 로딩 시간 개선 - Heavy한 외부 분석 툴 대신 최소한의 기능을 가진 Custom Pixel 도입 고려