프레임워크 없이 PageSpeed 98점, Vanilla JS 기반 인터랙티브 툴 최적화

Context

WordPress 환경 내 7종의 인터랙티브 계산기 구현 필요. 프레임워크 도입 시 발생하는 대용량 번들 사이즈와 로딩 지연 문제 발생. CMS 특유의 자동 태그 삽입 기능으로 인한 JavaScript 코드 파손 위험 존재.

Technical Solution

• 프레임워크를 배제하고 HTML, CSS, vanilla JavaScript만 사용하는 경량 설계로 번들 크기 최소화
• WordPress의 wpautop 기능으로 인한 코드 파손 방지를 위해 모든 JS를 script 태그로 감싸고 커스텀 shortcode 적용
• 전역 스코프 오염 방지 및 변수 충돌 해결을 위해 각 계산기 로직을 IIFE(Immediately Invoked Function Expression) 패턴으로 캡슐화
• CSS 우선순위 충돌 해결을 위해 BEM 대신 고유 ID 기반의 강한 선택자(ID-scoped selectors)를 사용하는 전방위 프리픽스 전략 채택
• LiteSpeed Cache의 공격적인 캐싱 대응을 위해 모든 연산을 Client-side에서 처리하고 서버 렌더링 대신 data-* 속성 활용
• 모바일 UX 향상을 위해 inputmode="numeric" 속성을 적용하여 숫자 키패드 강제 호출 구조 설계

Impact

• 프레임워크 JS 로드량 0 KB 달성
• 계산기당 전체 리소스 크기 5 KB 미만 유지
• LiteSpeed PageSpeed 점수 98/100 기록
• 3G 네트워크 환경에서 Time to Interactive 1초 미만 달성

Key Takeaway

단순한 상태 관리와 제한적인 DOM 조작이 필요한 위젯의 경우, 프레임워크보다 Vanilla JS가 로딩 속도와 유지보수 측면에서 더 효율적이라는 설계 원칙 확인.