게시일: 2026년 1월 23일
Chrome에서는 Chrome 144부터 Speculation Rules API에 스크립트까지 사전 렌더링을 추가하기 위한 새로운 오리진 트라이얼을 시작합니다. 이 오리진 트라이얼을 통해 사이트에서 실제 사용자를 대상으로 새로운 기능을 사용해 볼 수 있습니다. 목표는 기능을 현장 테스트하고 Chrome팀에 의견을 제공하여 기능을 형성하고 웹 플랫폼에 추가해야 하는지 결정하는 것입니다.
이 기능은 어떤 문제를 해결하기 위한 것인가요?
Speculation Rules API를 사용하면 사용자가 실제로 페이지로 이동하기 전에 페이지 로드를 시작할 수 있습니다. 이렇게 하면 일부 또는 전체 작업을 미리 완료하여 향후 페이지 로드를 개선할 수 있습니다. 지금까지는 두 가지 유형의 추측(프리패치 및 사전 렌더링)이 허용되었습니다.
프리패치는 HTML 문서만 가져옵니다. 이렇게 하면 중요한 첫 번째 리소스를 미리 가져와 URL로 이동할 때 성능이 향상됩니다. 하위 리소스 (예: CSS, JavaScript, 이미지)를 로드하지 않고 JavaScript를 실행하지 않으므로 페이지 로드 시 브라우저에서 실행해야 하는 작업이 여전히 많을 수 있습니다.
사전 렌더링은 훨씬 더 많은 작업을 실행합니다. 하위 리소스를 가져오고 페이지를 렌더링하고 JavaScript를 실행합니다. 마치 페이지가 숨겨진 백그라운드 탭에서 열린 것과 같습니다. 사용자가 링크를 클릭하면 브라우저에서 페이지를 렌더링하는 데 필요한 모든 작업을 완료한 경우 즉시 탐색할 수 있습니다.
사전 렌더링 옵션을 사용하면 성능이 훨씬 향상될 수 있지만, 추가 구현 비용과 추가 리소스 비용이 발생합니다. 신중하게 고려하지 않으면 사용자가 실제로 페이지로 이동하기 전에 페이지를 완전히 사전 렌더링할 때 예기치 않은 부작용이 발생할 수도 있습니다. 예를 들어 분석 제공업체에서 추측을 고려하지 않으면 사용자가 탐색하기 전에 분석이 실행되어 통계가 왜곡될 수 있습니다.
사전 렌더링을 사용하는 사이트도 사용자에게 오래된 페이지를 제공하지 않도록 주의해야 합니다. 예를 들어 전자상거래 사이트에서 페이지를 추측한 다음 장바구니에 항목을 추가하고 이전에 추측한 페이지를 로드하는 경우 사이트에서 이 항목이 업데이트되도록 특별히 주의하지 않으면 이전 장바구니 수량이 표시될 수 있습니다.
이러한 복잡성은 일부 상태 관리가 서버 측에서 발생하는 경우 프리패치에도 존재하지만 사전 렌더링의 경우 더 큰 문제인 경우가 많습니다. 더 복잡한 사이트에서 사전 렌더링을 사용하는 것은 더 복잡할 수 있습니다.
하지만 개발자들은 페이지 미리 가져오기를 통해 이미 성능이 향상되고 있으며 추측 규칙을 통해 더 많은 이점을 얻고 싶다고 말합니다. 이때 스크립트까지 사전 렌더링이 필요합니다.
스크립트까지 사전 렌더링이란 무엇인가요?
스크립트까지 사전 렌더링은 프리패치와 사전 렌더링 사이의 새로운 중간 지점입니다. HTML 문서를 프리패치한 다음 (프리패치와 마찬가지로) 모든 하위 리소스를 가져오는 등 페이지 렌더링을 시작합니다 (사전 렌더링과 마찬가지로). 하지만 브라우저는 인라인 스크립트와 src 스크립트 모두에 대해 <script> 요소를 실행하지 않습니다. 차단 <script> 태그가 발견되면 파서가 일시중지되고 사용자가 페이지로 이동할 때까지 기다린 후 계속됩니다. 그동안 프리로드 스캐너는 페이지에 필요한 하위 리소스를 가져와 페이지가 로드를 계속할 수 있을 때 사용할 수 있도록 준비할 수 있습니다.
차단하는 <script> 요소를 보류하면 구현 복잡성을 크게 피할 수 있습니다. 동시에 렌더링 프로세스를 시작하고 하위 리소스를 가져오면 프리패치보다 훨씬 큰 이점이 있습니다. 전체 사전 렌더링과 거의 동일한 이점이 있을 수 있습니다.
최적의 시나리오 (페이지에 스크립트가 전혀 없는 경우)에서는 이 옵션이 전체 페이지를 사전 렌더링합니다. 또는 페이지에 푸터의 스크립트 요소만 있거나 async 또는 defer 속성이 있는 스크립트만 있는 경우 JavaScript 없이 페이지가 완전히 사전 렌더링됩니다. 최악의 시나리오 (<head>에 차단 스크립트가 있는 경우)에서도 페이지 렌더링 시작, 특히 하위 리소스 프리패치를 통해 페이지 로드가 훨씬 개선됩니다.
스크립트까지 사전 렌더링을 사용하는 방법
먼저 기능을 사용 설정한 다음 새 prerender_until_script 키 (유효한 JSON 키 이름이 되도록 밑줄에 유의)를 사용하여 다른 추측 규칙 API 옵션과 동일한 방식으로 스크립트가 사용될 때까지 사전 렌더링합니다.
이는 고정 URL의 목록 규칙과 함께 사용할 수 있습니다.
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
추측할 URL이 페이지에 링크로 제공되는 문서 규칙과 함께 사용할 수도 있습니다.
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
스크립트를 사용할 수 있을 때까지 사전 렌더링한 다음 다양한 적극성 값을 비롯한 일반적인 추측 규칙 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은 이 중복을 문제없이 처리하고 각 적극성 설정에 가장 적합한 규칙을 실행합니다.
또는 다양한 적극성 수준으로 사용하여 적극적으로 미리 가져온 다음, 이전에 미리 가져오기/미리 렌더링으로 제안된 대로 더 많은 신호가 있는 스크립트가 있을 때까지 미리 렌더링으로 업그레이드할 수 있습니다.
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</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 속성이 있는 스크립트는 활성화될 때까지 지연되지만 파서가 페이지의 나머지 부분을 계속 처리하는 것을 차단하지는 않습니다. 스크립트는 다운로드되지만 페이지로 이동할 때까지 실행되지 않습니다.
스크립트까지 사전 렌더링을 사용 설정하는 방법
스크립트까지 사전 렌더링은 Google에서 작업 중인 새로운 옵션이며 변경될 수 있으므로 먼저 사용 설정하여 선택하지 않으면 사용할 수 없습니다.
chrome://flags/#prerender-until-script Chrome 플래그 또는 --enable-features=PrerenderUntilScript 명령줄 플래그를 사용하여 개발자용으로 로컬에서 사용 설정할 수 있습니다.
스크립트까지 사전 렌더링도 이제 Chrome 144부터 오리진 트라이얼로 사용할 수 있습니다. 오리진 트라이얼을 사용하면 사이트 소유자가 실제 사용자가 기능을 수동으로 사용 설정하지 않아도 기능을 사용할 수 있도록 사이트에서 기능을 사용 설정할 수 있습니다. 이를 통해 실제 사용자를 대상으로 기능의 영향을 측정하여 예상대로 작동하는지 확인할 수 있습니다.
테스트로 실행해 보고 의견을 공유해 주세요.
Google은 Speculation Rules API에 제안된 이번 추가 사항에 큰 기대를 걸고 있으며 사이트 소유자가 테스트해 보기를 권장합니다.
GitHub 저장소에서 제안에 관한 의견을 공유하세요. Chrome 구현에 관한 의견은 Chromium 버그를 신고하세요.