Vanilla JS 기반 설계로 Agentic Browsing Audit 100점 달성 및 TBT 0ms 구현

Context

기존 Lighthouse의 정적 스냅샷 측정 방식은 단순 로드 지표인 FCP, LCP 위주의 수동적 분석에 국한됨. 실제 사용자의 예측 불가능한 인터랙션을 반영하지 못하는 한계로 인해 겉보기에만 빠른 가짜 성능 최적화 문제가 지속됨.

Technical Solution

• Vanilla JS 실행 아키텍처 채택을 통한 Framework Hydration 지연 시간 완전 제거
• DOM depth를 112개 요소로 제한하여 브라우저 스크립트 평가 시간을 16ms까지 단축
• 버튼 및 컨테이너 크기의 엄격한 정적 계산을 통한 Cumulative Layout Shift(CLS) 0 구현
• CSS pulse-glow 애니메이션 적용 시에도 핵심 레이아웃 경계를 고정하여 동적 탐색 중 레이아웃 흔들림 방지
• 전체 페이지 전송량을 28 KiB로 최소화한 Light Payload 설계 및 스마트 캐싱 구조 도입
• HeadlessChromium 기반 AI 에이전트의 동적 클릭 및 폼 입력 시나리오에 최적화된 인터랙티브 컴포넌트 설계

Impact

• Total Blocking Time(TBT): 0ms 기록
• Time-To-First-Byte(TTFB): 10ms 달성
• Cumulative Layout Shift(CLS): 0 기록
• 전체 페이지 페이로드: 28 KiB 수준으로 경량화

Key Takeaway

단순 렌더링 속도를 넘어 AI 에이전트의 동적 상호작용을 견디는 인터랙티브 복원력이 새로운 웹 성능의 표준이 됨. 복잡한 프레임워크 도입보다 문제 해결에 적합한 최소한의 기술 스택 선택이 런타임 성능 극대화의 핵심임.