게시일: 2026년 1월 23일
Chrome은 Chrome 144부터 Speculation Rules API에 prerender until script 추가를 위한 새로운 오리진 트라이얼을 시작합니다. 이 오리진 트라이얼을 통해 사이트는 실제 사용자를 대상으로 새로운 추가 기능을 사용해 볼 수 있습니다. 목표는 기능을 현장 테스트하고 Chrome팀에 의견을 제공하여 기능을 개선하고 웹 플랫폼에 추가해야 하는지 결정하는 것입니다.
이 기능으로 해결하려는 문제는 무엇인가요?
Speculation Rules API를 사용하면 사용자가 실제로 페이지로 이동하기 전에 페이지 로드를 시작할 수 있습니다. 이렇게 하면 일부 또는 전체 작업을 미리 완료하여 향후 페이지 로드를 개선할 수 있습니다. 지금까지는 프리페치와 사전 렌더링이라는 두 가지 유형의 추측이 허용되었습니다.
프리페치는 HTML 문서만 가져옵니다. 이렇게 하면 중요한 첫 번째 리소스를 미리 가져와 URL로 이동할 때 성능이 향상됩니다. 하위 리소스 (예: CSS, JavaScript 또는 이미지)를 로드하거나 JavaScript를 실행하지 않으므로 페이지 로드 시 브라우저에서 실행해야 하는 작업이 여전히 상당할 수 있습니다.
사전 렌더링은 훨씬 더 많은 작업을 실행합니다. 하위 리소스를 가져오고 페이지 렌더링을 시작하며 JavaScript를 실행합니다. 마치 페이지가 숨겨진 백그라운드 탭에서 열린 것과 같습니다. 사용자가 링크를 클릭하면 브라우저에서 페이지를 렌더링하는 데 필요한 모든 작업을 완료한 경우 즉시 탐색할 수 있습니다.
사전 렌더링 옵션을 사용하면 성능이 훨씬 더 향상될 수 있지만 추가 구현 비용과 추가 리소스 비용이 발생합니다. 신중하게 고려하지 않으면 사용자가 실제로 페이지로 이동하기 전에 페이지를 완전히 사전 렌더링할 때 예기치 않은 부작용이 발생할 수도 있습니다. 예를 들어 분석 제공업체가 추측을 고려하지 않는 경우 사용자가 탐색하기 전에 분석이 실행되어 통계가 왜곡될 수 있습니다.
사전 렌더링을 사용하는 사이트는 사용자에게 오래된 페이지를 제공하지 않도록 주의해야 합니다. 예를 들어 전자상거래 사이트에서 페이지를 추측한 다음 장바구니에 항목을 추가하고 이전에 추측한 페이지를 로드하면 사이트에서 업데이트되도록 추가로 주의를 기울이지 않는 경우 이전 장바구니 수량이 표시될 수 있습니다.
이러한 복잡성은 일부 상태 관리가 서버 측에서 발생하는 경우 프리페치에도 존재하지만 사전 렌더링의 경우 더 큰 문제가 되는 경우가 많습니다. 더 복잡한 사이트에서 사전 렌더링을 사용하는 것이 더 복잡할 수 있습니다.
그러나 개발자들은 이미 페이지 프리페치로 성능이 향상되고 있으며 추측 규칙을 사용하여 더 많은 이점을 얻고 싶다고 말합니다. 이때 prerender until script이 사용됩니다.
prerender until script이란 무엇인가요?
prerender until script은 프리페치와 사전 렌더링 사이의 새로운 중간 지점입니다. 프리페치와 마찬가지로 HTML 문서를 프리페치한 다음 사전 렌더링과 마찬가지로 모든 하위 리소스를 가져오는 등 페이지 렌더링을 시작합니다. 그러나 중요한 점은 브라우저가 인라인 스크립트와 src 스크립트 모두에 대해 <script> 요소 실행을 피한다는 것입니다. 차단 <script> 태그가 발견되면 파서가 일시중지되고 사용자가 페이지로 이동할 때까지 기다린 후 계속됩니다. 그동안 프리로드 스캐너는 계속해서 페이지에 필요한 하위 리소스를 가져올 수 있으므로 페이지가 계속 로드될 때 사용할 수 있습니다.
차단 <script> 요소를 보류하면 구현 복잡성의 상당 부분이 방지됩니다. 동시에 렌더링 프로세스를 시작하고 하위 리소스를 가져오면 프리페치에 비해 큰 이점이 있습니다. 전체 사전 렌더링과 거의 동일한 이점이 있을 수 있습니다.
최상의 시나리오 (페이지에 스크립트가 전혀 없는 경우)에서는 이 옵션이 전체 페이지를 사전 렌더링합니다. 또는 페이지에 바닥글에 스크립트 요소만 있거나 async 또는 defer 속성이 있는 스크립트만 있는 경우 JavaScript 없이 페이지가 완전히 사전 렌더링됩니다. 최악의 시나리오 (<head>에 차단 스크립트가 있는 경우)에서도 페이지 렌더링 시작, 특히 하위 리소스 프리페치를 통해 페이지 로드가 크게 개선될 것입니다.
prerender until script을(를) 사용하는 방법
정적 URL의 목록 규칙과 함께 사용할 수 있습니다.
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
추측할 URL이 페이지의 링크로 제공되는 문서 규칙과 함께 사용할 수도 있습니다.
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
prerender until script 그러면 다양한 적극성 값을 비롯한 일반적인 Speculation Rules API 옵션과 함께 사용할 수 있습니다.
JavaScript가 실행되지 않으므로 document.prerendering을 읽을 수 없으며 prerenderingchange 이벤트도 읽을 수 없습니다. 그러나 activationStart 시간은 0이 아닙니다.
다음 예에서는 prerender_until_script를 지원하지 않는 브라우저의 프리페치로 대체하여 이전 예시를 배포하는 방법을 보여줍니다.
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Chrome은 이 중복을 문제없이 처리하고 각 적극성 설정에 가장 적합한 규칙을 실행합니다.
또는 이러한 기능을 다양한 적극성 수준과 함께 사용하여 적극적으로 프리페치한 다음 더 많은 신호로 prerender until script 프리페치/사전 렌더링에서 이전에 제안한 대로 사전 렌더링으로 업그레이드할 수 있습니다.
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
이러한 방식으로 prerender until script을 전체 사전 렌더링으로 업그레이드할 수는 없지만 Chrome에서 지원하는 데 관심이 있는 패턴이 있다면 이 버그에 별표를 표시하여 알려주세요.
모든 JavaScript가 일시중지되나요?
아니요. <script> 요소만 파서를 일시중지합니다. 즉, 인라인 스크립트 핸들러 (예: onload) 또는 javascript: URL은 일시중지를 일으키지 않으며 실행될 수 있습니다.
예를 들어 페이지로 이동하기 전에 콘솔에 Hero image is now loaded를 로깅할 수 있습니다.
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
반면 이벤트 리스너가 <script>로 추가되면 Hero image is now loaded가 콘솔에 로깅됩니다.
<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
const heroImage = document.querySelector('#hero-image');
if (heroImage.complete) {
console.log('Hero image is now loaded');
} else {
heroImage.addEventListener('load',
(event) => {
console.log('Hero image is now loaded');
}
);
}
</script>
직관적이지 않은 것 같지만 많은 경우 (이전 예와 같이) 작업을 즉시 실행하는 것이 더 나을 수 있으며 작업을 지연하면 예기치 않은 복잡성이 발생할 수 있습니다.
또한 대부분의 인라인 이벤트에는 사용자 작업 (예: onclick, onhover)이 필요하므로 사용자가 페이지와 상호작용할 수 있을 때까지 실행되지 않습니다.
마지막으로 이전 차단 스크립트는 파서를 일시중지하므로 인라인 이벤트 핸들러가 검색되지 않습니다. 따라서 인라인 이벤트 핸들러임에도 불구하고 활성화될 때까지 콘솔에 메시지가 로드되지 않습니다.
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
이는 이전에 정의된 코드를 사용하는 인라인 스크립트 핸들러와 특히 관련이 있으며 예상대로 계속 작동합니다.
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
async 및 defer 속성이 있는 스크립트는 어떻게 되나요?
async 및 defer 속성이 있는 스크립트는 활성화될 때까지 지연되지만 파서가 페이지의 나머지 부분을 계속 처리하는 것을 차단하지 않습니다. 스크립트는 다운로드되지만 페이지로 이동할 때까지 실행되지 않습니다.
사용 설정하는 방법prerender until script
prerender until script은(는) Google에서 개발 중인 새로운 옵션이며 변경될 수 있으므로 먼저 사용 설정하여 선택하지 않으면 사용할 수 없습니다.
chrome://flags/#prerender-until-script Chrome 플래그 또는 --enable-features=PrerenderUntilScript 명령줄 플래그를 사용하여 개발자를 위해 로컬에서 사용 설정할 수 있습니다.
prerender until script은 이제 Chrome 144부터 오리진 트라이얼로도 제공됩니다. 오리진 트라이얼을 사용하면 사이트 소유자가 사이트에서 기능을 사용 설정하여 실제 사용자가 기능을 수동으로 사용 설정하지 않고도 기능을 사용할 수 있습니다. 이렇게 하면 실제 사용자를 대상으로 기능의 영향을 측정하여 예상대로 작동하는지 확인할 수 있습니다.
테스트 실행하고 의견 공유하기
Google은 Speculation Rules API에 제안된 추가 기능에 매우 기대하고 있으며 사이트 소유자가 테스트 실행해 보기를 권장합니다.
GitHub 저장소에서 제안에 관한 의견을 공유하세요. Chrome의 구현에 관한 의견은 Chromium 버그를 신고하세요.