페이지 전환 지연을 0ms로 단축하는 Speculation Rules API와 선제적 프리렌더링 아키텍처

1. 멀티 페이지 애플리케이션(MPA) 내비게이션의 TTFB·LCP 병목

전통적인 멀티 페이지 애플리케이션(MPA) 환경에서는 사용자가 링크를 클릭할 때마다 브라우저가 DNS 조회, TLS 핸드셰이크, 서버 HTML 응답 대기(TTFB), DOM 파싱 및 서브리소스 렌더링(LCP)을 처음부터 순차적으로 수행합니다. 네트워크 왕복 지연(RTT)과 서버 렌더링 비용이 결합되면 페이지 전환 시 수백 밀리초에서 1초 이상의 체감 지연이 발생하여 사용자 이탈률 상승의 직접적인 원인이 됩니다.

과거에 사용되던 <link rel='prefetch'>는 서브리소스를 선제 로드하지 못하거나 Cache-Control 헤더에 의해 쉽게 차단되었으며, 구형 <link rel='prerender'>는 크롬 비표준으로 폐기(Deprecated)되었습니다. 이를 대체하기 위해 도입된 표준 명세가 바로 Speculation Rules API입니다.

2. Speculation Rules API의 Prefetch vs Prerender 동작 아키텍처

에 따르면, 이 API는 문서 내 <script type='speculationrules'> JSON 선언 또는 Speculation-Rules HTTP 응답 헤더를 통해 브라우저에게 향후 이동 가능성이 높은 대상 URL과 투기적 로딩(Speculative Loading) 방식을 지시합니다.

• Prefetch(선제적 응답 본문 수신): 대상 페이지의 HTML 본문만 백그라운드에서 미리 다운로드하여 문서별 인메모리 캐시(Per-document In-memory Cache)에 보관합니다. JavaScript 실행이나 서브리소스 다운로드는 수행하지 않으므로 메모리 오버헤드가 매우 낮고 TTFB를 0ms에 가깝게 제거합니다.
• Prerender(격리된 백그라운드 완전 렌더링): 별도의 숨겨진 렌더러 프로세스(Hidden Renderer Process)를 기동하여 대상 페이지의 HTML, CSS, JavaScript, 이미지, 레이아웃 페인트까지 100% 사전 완결합니다. 사용자가 링크를 클릭하는 순간 기존 화면과 백그라운드 렌더러를 즉시 교체(Activation)하므로 LCP 0ms 수준의 즉각적인 페이지 전환이 구현됩니다.

3. Document Rules와 Eagerness 휴리스틱 기반 리소스 제어

에 명시된 바와 같이, 모든 링크를 페이지 로드 즉시 프리렌더링하면 대역폭과 단말기 메모리가 과도하게 소모됩니다. 이를 제어하기 위해 Document Rules(where 조건절)와 4단계 eagerness 휴리스틱이 제공됩니다.

• immediate / eager: 규칙이 파싱되는 즉시 투기적 로딩을 개시합니다. 대역폭 비용이 적은 prefetch에 적합합니다.
• moderate: 사용자가 링크 위에 마우스를 200ms 이상 올리거나(Hover) 포인터를 누르는(pointerdown) 순간 로딩을 시작합니다. 비용과 적중률의 균형이 가장 뛰어난 prerender 권장 기본값입니다.
• conservative: 마우스 클릭이나 터치 시작 시점(pointerdown / touchstart)에만 동작하여 불필요한 리소스 낭비를 0%로 억제합니다.

4. 프로덕션 Speculation Rules 선언 및 활성화 상태 동기화 구현

다음은 상태 변경 URL(/logout, /cart/checkout)을 안전하게 배제한 moderate 프리렌더링 규칙과, 백그라운드 사전 실행 시 애널리틱스 오집계를 방어하는 document.prerendering 런타임 제어 구현체입니다.

5. 내비게이션 기법별 Core Web Vitals 벤치마크 및 보안·운영 가이드

전자상거래 카탈로그 MPA 환경에서 일반 내비게이션, prefetch, prerender 적용 시의 주요 웹 성능 지표(Core Web Vitals) 실측 비교 결과는 다음과 같습니다.

일반 내비게이션 (기준선) Speculation Prefetch Speculation Prerender (Moderate)

		0 MB (기준)
		~2 MB (문서 본문 캐시)

에 따라 프로덕션 환경 도입 시 다음 사항을 반드시 설계에 반영해야 합니다.

• 상태 변경(Side-Effect) URL 엄격 배제: GET 요청으로 로그아웃, 장바구니 추가, 결제 상태를 변경하는 레거시 엔드포인트가 규칙에 포함되면 사용자 의도와 무관하게 요청이 실행되므로 where.not 조건으로 반드시 제외해야 합니다.
• CSP(Content Security Policy) 호환성 확보: 엄격한 script-src 정책이 적용된 환경에서는 인라인 스크립트가 차단될 수 있으므로, 'inline-speculation-rules' 지시어를 추가하거나 외부 JSON 파일(MIME 타입: application/speculationrules+json)을 Speculation-Rules HTTP 헤더로 서빙해야 합니다.
• 제한된 API 자동 지연 인지: 프리렌더링 상태에서는 권한 요청(Geolocation, Notification), 오디오 재생, 창 포커스 등 민감한 웹 API가 브라우저 레벨에서 자동 지연되므로, 반드시 prerenderingchange 이벤트 이후에 초기화하도록 수명주기를 분리해야 합니다.