Prerender Until Script: Prefetch와 Prerender 사이의 중간 지점
스크립트를 실행하거나 분석 데이터를 오염시키지 않고 하위 리소스를 로드하고 DOM 구축
Origin Trial: prerender_until_script는 Chrome 144부터 150까지 Origin Trial로 사용할 수 있습니다. 토큰을 등록하거나 chrome://flags/#prerender-until-script를 통해 로컬에서 활성화해야 합니다. 아직 Intent to Ship은 제출되지 않았습니다.
Arjen Karel이 2026년 3월에 마지막으로 검토함
Prerender Until Script: 추측성 로딩(Speculative Loading)을 위한 새로운 모드
지연 시간(Latency)이 병목 현상입니다. 저는 수년간 이것을 말해왔고, 웹 성능에서 여전히 가장 큰 단일 문제로 남아 있습니다. Critical Rendering Path를 아무리 최적화하거나 번들에서 킬로바이트를 덜어내더라도 결국 우리는 물리학의 법칙과 네트워크의 왕복 시간(RTT)에 얽매일 수밖에 없습니다.
오랫동안 우리는 Speculative Loading을 사용하여 이러한 법칙을 속이려 노력해 왔습니다. 사용자가 다음에 갈 곳을 추측하고 미리 로드하는 것입니다. 지금까지 우리는 두 가지 주요 도구를 사용했지만 어느 것도 완벽하지 않았습니다.
- prefetch: 안전하고 가볍지만 HTML만 가져옵니다. 브라우저는 사용자가 클릭한 후에도 여전히 구문 분석(parse)하고, DOM을 빌드하고, 하위 리소스(CSS, 이미지)를 검색해야 합니다. 네트워크 대기 문제는 해결하지만 렌더링 작업은 해결하지 못합니다.
- prerender: 강력한(nuclear) 옵션입니다. 모든 것을 로드하고 JavaScript를 실행하며 숨겨진 백그라운드 탭에서 페이지를 렌더링합니다. 즉각적이지만 비용이 많이 듭니다. 대역폭을 잡아먹고, 메모리를 소비하며, 사용자가 절대 보지 않을 페이지에 대한 분석 픽셀을 실행하고 코드를 실행합니다.
우리에겐 중간 지점이 필요했습니다. 애플리케이션 로직을 실행하는 비용과 위험 없이, prerender의 시각적 준비성을 갖추는 것입니다.
prerender_until_script의 작동 방식
prerender_until_script는 구문 분석을 실행과 분리합니다. 이 추측 규칙(Speculation Rule)을 사용하면 브라우저에 다음과 같이 지시합니다.
- 문서를 가져옵니다(prefetch처럼).
- HTML 스트림을 구문 분석하고 DOM을 구성합니다.
- Preload Scanner를 실행합니다. 이것이 핵심적인 부분입니다. 브라우저는 우선순위가 높은 CSS 및 LCP 이미지와 같은 하위 리소스를 발견하고 다운로드합니다.
파서가 JavaScript 실행 지점에 도달하는 순간 두 가지 일이 발생할 수 있습니다.
- 동기식 스크립트: 파서가 즉시 중단됩니다.
- 비동기/지연(Async/defer) 스크립트: 다운로드되어 대기열에 들어가지만 실행되지는 않습니다.
브라우저는 페이지의 시각적 셸(레이아웃, 타이포그래피, 이미지)을 빌드합니다. 하지만 애플리케이션 로직은 고정된 상태로 유지됩니다. 페이지는 완전히 배치된 상태로 메모리에 상주하며 사용자가 클릭하기를 기다립니다.
클릭이 발생하면 페이지가 즉시 스왑 인(swapped in)됩니다. JavaScript가 실행되고, 이벤트 핸들러가 연결되며, 분석 데이터가 정확히 실행되어야 할 시점에 실행됩니다.
Prefetch vs prerender_until_script vs prerender
| 동작 | HTML 가져오기 | HTML 구문 분석 | 하위 리소스 가져오기 | 스크립트 실행 | 분석 데이터 실행 |
|---|---|---|---|---|---|
prefetch | 예 | 아니요 | 아니요 | 아니요 | 아니요 |
prerender_until_script | 예 | 예 | 예 | 아니요 | 아니요 |
prerender | 예 | 예 | 예 | 예 | 예* |
* 전체 prerender는 document.prerendering을 사용하여 조기 분석 실행을 방지할 수 있지만, 해당 코드는 직접 추가해야 합니다.
이것이 prerender_until_script가 중요한 이유입니다. 전체 prerender의 하위 리소스 로딩과 DOM 구성은 얻으면서도, JavaScript 실행에 따른 분석 오염이나 메모리 비용은 발생하지 않습니다. 무거운 서드파티 스크립트가 있는 콘텐츠 사이트의 경우 이것이 최적의 지점(sweet spot)입니다.
구현
우리는 Speculation Rules API를 사용하여 이를 구현합니다. prerender_until_script는 실험적인 기능(Chrome 144에서 150까지 Origin Trial)이므로 이전 버전과의 호환성(backward compatibility)이 필요합니다.
prerender_until_script 키를 인식하지 못하는 브라우저는 이를 무시합니다. 동일한 URL 세트에 대해 prefetch fallback을 추가하세요. Chrome은 이러한 규칙의 중복을 제거하고 사용 가능한 가장 강력한 동작을 적용합니다.
<script type="speculationrules">
{
"prerender_until_script": [
{
"source": "document",
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/logout" } },
{ "not": { "href_matches": "/cart" } }
]
},
"eagerness": "moderate"
}
],
"prefetch": [
{
"source": "document",
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/logout" } },
{ "not": { "href_matches": "/cart" } }
]
},
"eagerness": "moderate"
}
]
}
</script>
prefetch 블록이 fallback입니다. prerender_until_script를 지원하는 브라우저에서 Chrome은 가장 기능이 뛰어난 동작을 자동으로 선택합니다. 지원하지 않는 브라우저에서는 여전히 prefetch 규칙이 실행됩니다. user-agent 스니핑 없이도 최상의 가용한 동작을 얻을 수 있습니다.
자신만의 맞춤형 추측 규칙 세트를 생성하려면 speculation rules generator를 사용하세요.
prerender_until_script 활성화 방법
이것은 Origin Trial이므로 두 가지 옵션이 있습니다.
- Chrome Origin Trials dashboard에서 Origin Trial 토큰을 등록하세요. 토큰을
<head>내에<meta>태그로 추가합니다:<meta http-equiv="origin-trial" content="YOUR_TOKEN"> chrome://flags/#prerender-until-script로 이동하여 플래그를 활성화하여 로컬에서 테스트하세요.
Origin Trial은 Chrome 144(2026년 1월)부터 Chrome 150(약 2026년 중반)까지 진행됩니다. 그 이후에 Chrome 팀이 안정적인 기능으로 출시하면 토큰이 더 이상 필요하지 않습니다. 공식 Chrome 블로그 게시물에서 전체 세부 정보를 다루고 있습니다.
실제 speculation rules 성능
아직 prerender_until_script 벤치마크를 게시한 사람은 없습니다(너무 최신 기능이기 때문입니다). 하지만 더 광범위한 Speculation Rules API는 주요 배포 사례를 통해 확실한 데이터를 갖추고 있습니다.
- Ray-Ban은 prerender 추측 규칙을 구현하여 모바일에서 LCP를 43%(4.69초에서 2.66초) 향상했습니다. 전환율(Conversion rates)은 두 배로 증가했습니다.
- Shopify는 모든 Liquid 스토어프런트에 prefetch 추측 규칙을 배포했으며, 모든 로딩 지표에서 데스크톱은 130ms, 모바일은 180ms 더 빠른 성능을 측정했습니다.
- Cloudflare Speed Brain은 ML 예측 모델과 함께 추측 규칙을 사용하며 성공적인 prefetch에 대해 45%의 LCP 감소를 보고합니다.
도입이 빠르게 늘고 있습니다. 2025 Web Almanac에 따르면 현재 모바일 웹사이트의 35%가 Speculation Rules API를 사용하고 있습니다. 이러한 성장의 대부분은 2025년 3월에 코어에 추측 규칙을 내장한 WordPress 6.8에서 비롯되었습니다.
prerender_until_script는 prefetch와 전체 prerender 사이의 결과를 제공할 것입니다. 하위 리소스는 이미 캐시되어 있고 DOM은 빌드되어 있습니다. 활성화 시 남은 작업은 스크립트 실행뿐입니다. CoreDash에서 모니터링하는 사이트 전반에 걸쳐, 저는 추측 규칙이 후속 탐색 LCP를 30~50% 줄이는 것을 흔히 볼 수 있습니다.
고려 사항
Eagerness: 저는 거의 항상 moderate를 권장합니다. 이렇게 하면 마우스를 올릴 때(포인터가 200ms 동안 머무를 때) 추측을 트리거합니다. immediate는 대부분의 사이트에 너무 공격적이며 모바일 연결에서 대역폭을 낭비할 위험이 있습니다.
Exclusions: 여기서는 엄격하게 관리해야 합니다. /logout 또는 /add-to-cart와 같이 상태를 변경하는 URL에 대해서는 절대 추측하지 마세요. prerender_until_script가 스크립트 실행을 방지하더라도 불필요하게 이러한 엔드포인트를 가져와서는 안 됩니다.
Parser blocking: 파서는 동기식 <script> 태그를 발견하는 즉시 중단됩니다. DOM의 앞부분에 인라인 스크립트가 있는 경우(예: <script>loadWhileIdle(chat.js)</script>) prerender는 거기서 멈춥니다. 사전 빌드되는 DOM의 양을 최대화하려면 스크립트를 페이지 하단으로 이동하거나 defer를 사용하세요.
Inline handlers: prerender_until_script는 <script> 요소만 일시 중지합니다. 차단 스크립트 전에 파서가 해당 요소에 도달하면 다른 요소의 인라인 이벤트 핸들러(예: <img onload="track()">)는 계속 실행됩니다. 분석 및 추적 코드가 인라인 핸들러에 의해 트리거되지 않는지 확인하세요.
Application 패널 아래의 Chrome DevTools에서 추측 규칙을 디버깅할 수 있습니다. Chrome DevTools Network 패널에는 뚜렷한 아이콘과 함께 추측성 가져오기(speculative fetches)도 표시됩니다. 프로덕션 환경에 추측 규칙을 배포한 후 실제 INP 및 LCP 영향을 검증하려면 Real User Monitoring을 사용하세요.
