콘텐츠로 이동
critical-script

critical-script

TypeScript 모듈을 메인 번들보다 먼저 실행하는 인라인 스크립트로 만드는 Vite 플러그인입니다. API 프리페치와 리소스 프리로드, 웹뷰 네이티브 브릿지 호출 등 LCP, CLS 최적화를 위해 사용합니다.
시작하기GitHub

critical-script를 사용하면 브라우저 렌더링 파이프라인에서 TypeScript 코드를 가장 빠른 시점에 코드를 실행할 수 있습니다. 최초 렌더링 및 페인트에 필요한 API 호출을 인라인 스크립트로 처리하면 더 빠른 로딩 속도를 얻을 수 있습니다.

  1. critical-script 실행

    critical-script가 꺼져 있습니다. API를 호출하는 코드는 JavaScript 번들에 있습니다.

    <head>
  <script>window.__home = fetch("/api/home.json")</script>
  <script type="module" src="/app.js"></script>
</head>
  2. API 요청

    JavaScript 번들 다운로드 및 실행이 늦어지는 만큼 API 요청 및 응답도 늦어집니다.

  3. 대표 이미지

    대표 이미지의 URL이 API 응답에 있어서 이미지 요청 또한 늦어집니다.

벤치마크

아직 불러오지 않음

critical-script 적용

아직 불러오지 않음

critical-script 미적용

critical-script를 사용하여 API 요청을 처리하였을 때 웹페이지가 얼마나 빠르게 로딩되는지 확인해보세요.

시뮬레이션 설정느린 4G · API 지연 200ms · 번들 실행 200ms
네트워크 스로틀링

서비스 워커로 느린 네트워크 환경을 시뮬레이션합니다.

API 지연 시간 추가

API를 호출했을 때 서버에서 다른 서비스를 호출하거나 데이터베이스를 기다리는 데 걸리는 시간을 추가합니다.

JavaScript 번들 초기 실행 시간

브라우저가 JavaScript 번들을 다운로드한 후 실행을 완료하는 시간입니다. React와 같은 웹 앱 프레임워크의 초기화 및 최초 렌더링 시간을 시뮬레이션합니다.