이 문서는 웹 페이지의 LCP(Largest Content Paint) 및 CLS(Cumulative Layout Shift) 지표를 최적화하기 위해 고안된 Vite 플러그인인 critical-script에 대해 설명합니다. 이 도구는 핵심적인 TypeScript 모듈을 메인 자바스크립트 번들이 로드되기 전 인라인 스크립트(Inline Script) 형태로 실행하여 웹 성능을 개선하는 전략을 다룹니다.

1. 문제 제기: 기존 로딩 방식의 비효율성

일반적인 웹 애플리케이션 환경에서는 API 호출과 리소스 프리로드가 메인 JavaScript 번들에 의존합니다. 이 경우 다음과 같은 순차적 지연이 발생합니다.

• 지연 구조: HTML 파싱 → JavaScript 번들 다운로드 → 번들 실행 → API 호출 → 응답 수신 → 이미지 및 콘텐츠 렌더링.
• 이 방식은 번들 크기가 커지거나 네트워크 상황이 나쁠 경우 API 요청 시작 시점이 크게 늦어지며, 결과적으로 LCP 지연 및 초기 화면 렌더링 품질 저하를 야기합니다.

2. 핵심 방법론: critical-script의 도입

critical-script는 브라우저가 번들을 해석하기 전에 즉각적으로 실행 가능한 코드를 head 태그 내에 인라인으로 삽입하여 데이터 페칭과 리소스 로드를 병렬화합니다.

• 동작 방식:
  1. build 시점에 필수적인 초기화 로직(예: API 프리페치, 웹뷰 네이티브 브릿지 통신 등)을 별도의 인라인 스크립트로 추출합니다.
  2. 메인 번들이 다운로드되는 동안 브라우저는 이 인라인 스크립트를 즉시 실행하여 서버에 데이터를 요청합니다 ($T_{request\_start} \approx 0$).
  3. window 객체에 데이터를 저장하여 메인 번들이 로드된 후 즉시 Promise 형태로 데이터를 사용할 수 있게 합니다.

3. 성능 최적화 효과

본 문서에서는 시뮬레이션 환경을 통해 critical-script 적용 전후의 성능 차이를 입증합니다.

• 벤치마크 조건:
  • 네트워크 환경: 느린 4G(Slow 4G).
  • 변수: API 응답 지연($L_{api} \in \{0, 200, 500, 1000\}ms$), 번들 초기 실행 시간($T_{bundle} \in \{0, 200, 500, 1000\}ms$).
• 기대 효과:
  • API 호출을 메인 번들 실행과 독립적으로 분리함으로써 전체 로딩 완료 시간(Time to Interactive 및 LCP 도달 시간)을 단축합니다.
  • 특히 이미지 URL이 API 응답에 포함되어 있는 경우, 이미지를 더 빠르게 요청할 수 있어 시각적 안정성(CLS)과 첫 화면 로딩 속도를 유의미하게 향상합니다.

4. 기술적 결론

critical-script는 번들 로딩에 따른 순차적 병목 현상을 해결하기 위한 최적화 도구입니다. 복잡한 프레임워크 초기화 과정 이전부터 필요한 네트워크 리소스를 선제적으로 처리함으로써, 브라우저가 유휴 상태 없이 데이터를 확보하도록 설계되었습니다. 이는 현대적인 웹 서비스에서 성능 병목을 제거하는 효과적인 엔지니어링 전략입니다.