JS 646KB 과부하 해결을 위한 HTML-First 아키텍처 회귀

HTML-First Websites Are Quietly Winning Again in 2026

Max Mendes2026년 6월 12일8분intermediate

AI 요약

Context

모바일 페이지의 JS 전송량이 646KB에 달하며 메인 스레드 점유로 인한 반응성 저하 발생. 대다수 웹사이트가 단순 콘텐츠 전달 목적임에도 과도한 프레임워크 기반의 SPA 구조를 채택하여 Core Web Vitals 통과율이 48% 미만으로 하락한 상황.

Server-rendered HTML을 기본 계층으로 설정하여 JS 실행 전 콘텐츠 접근성을 확보하는 Progressive Enhancement 전략 채택
HTML Form과 기본 Constraint Validation을 통한 JS 없는 데이터 전송 및 검증 로직 구축
콘텐츠 중심 페이지는 HTML-First로, 복잡한 상태 관리가 필요한 대시보드 등만 Framework를 적용하는 하이브리드 결정 모델 수립
Google의 crawl-render-index 프로세스 중 Render 단계의 지연을 제거하기 위해 First-pass에서 읽기 가능한 HTML 구조 설계

실천 포인트

1. UI 컴포넌트 설계 시 <details>, <dialog> 등 Native HTML 태그로 대체 가능한지 확인

2. 단순 정보 제공 페이지에 React/Vue 등 무거운 프레임워크 사용 여부 재검토

3. JS 로드 전에도 핵심 기능(폼 전송, 콘텐츠 읽기)이 작동하는지 Progressive Enhancement 관점에서 테스트

4. SEO 최적화를 위해 렌더링 큐 대기 시간이 없는 Server-rendered HTML 구조 적용

태그