웹사이트의 속도를 이야기할 때 우리는 보통 첫 화면이 뜨는 시간만 신경 쓴다. 그런데 정작 사용자가 가장 답답해하는 순간은 따로 있다. 메뉴를 누르고 다음 페이지가 뜨기까지의 그 1~2초. 첫 진입은 빨라도, 사이트 안을 돌아다니는 동안 매번 흰 화면을 마주한다면 사용자는 결국 떠난다.
이 문제를 정면으로 해결하는 새 표준이 Speculation Rules API다. Chromium 계열 브라우저에 안정적으로 들어왔고, 큰 사이트들이 빠르게 채택하면서 2026년에는 사실상 표준이 됐다. 핵심은 단순하다. 사용자가 클릭하기 전에 다음 페이지를 미리 가져오거나, 더 나아가 미리 렌더링까지 해 두는 것이다.
prefetch와 prerender, 무엇이 다른가
Speculation Rules는 두 가지 단계의 '예측'을 정의한다. 둘은 비슷해 보이지만 비용도 효과도 다르다.
- prefetch: 다음 페이지의 HTML을 백그라운드에서 미리 받아 둔다. 클릭 시 네트워크 왕복이 사라져 체감 속도가 눈에 띄게 빨라진다.
- prerender: HTML을 받는 데서 그치지 않고, 보이지 않는 탭에서 페이지를 완전히 그려 둔다. 클릭 순간 그 탭이 즉시 화면으로 올라와, 마치 SPA처럼 0ms로 전환된다.
prerender는 강력하지만 그만큼 메모리와 데이터를 쓴다. 모든 링크를 prerender하면 사용자의 폰 배터리와 데이터가 녹아내린다. 그래서 어디에 어떻게 거는지가 결국 핵심 설계 결정이 된다.
실제로 거는 방법은 5줄이다
head 안에 JSON 한 덩어리만 넣으면 된다. 별도 라이브러리도, 빌드 설정도 필요 없다.
script 태그의 type을 "speculationrules"로 두고, prerender 또는 prefetch 규칙에 url 패턴을 적어 두면 끝이다. 브라우저가 알아서 사용자의 네트워크 상태와 데이터 절약 모드를 보고 실행 여부를 결정한다.
가장 안전한 출발점은 moderate eagerness의 prefetch다. 사용자가 링크 위에 마우스를 올리거나 손가락을 살짝 댄 순간, 그 페이지만 미리 가져온다. 어디에나 박아도 부담이 거의 없고, 이탈이 줄어드는 효과는 충분히 크다.
모든 페이지를 미리 그리지 마라
실무에서 prerender를 잘못 적용하면 오히려 사이트가 무거워진다. 다음 원칙은 그동안 우리가 클라이언트 사이트에 적용하면서 정리한 것이다.
- 전환 가치가 높은 경로에만 prerender: 상품 상세, 문의 페이지, 결제 직전 단계처럼 '이걸 누른 사용자는 거의 다음 행동을 한다'고 확신할 수 있는 곳에만 건다.
- 분석 스크립트와 광고 픽셀은 다시 점검: prerender된 페이지가 화면에 올라오기 '전'에 GA4나 픽셀이 발화되면 페이지뷰가 부풀려진다.
document.prerendering이나prerenderingchange이벤트로 활성화 시점에만 측정이 시작되도록 막아야 한다. - 로그인·결제 페이지는 명시적으로 제외: prerender는 쿠키와 세션을 건드릴 수 있다. 본인 인증, 결제 콜백, 쿠폰 사용처럼 사이드 이펙트가 큰 경로는 url 패턴에서 빼 둔다.
- 모바일과 데이터 절약 모드를 존중: 브라우저는 자동으로 절제하지만, 그래도 conservative eagerness를 기본값으로 두고 페이지 단위로 끌어올리는 편이 안전하다.
SEO와 속도 점수에는 어떻게 연결되는가
Speculation Rules는 Core Web Vitals 점수에 직접 영향을 주지는 않는다. 측정은 어디까지나 첫 진입 페이지가 기준이기 때문이다. 하지만 사용자 행동 지표—세션당 페이지뷰, 체류 시간, 이탈률—는 빠르게 개선된다. 결과적으로 검색엔진이 보는 '좋은 사이트' 신호가 강해진다.
특히 네이버처럼 사용자 체류 시간을 중요한 신호로 보는 검색엔진에서는, 속도가 빠른 사이트가 가진 누적 어드밴티지가 무시할 수 없는 수준이 된다.
지금 무엇부터 해야 할까
처음 적용한다면 다음 순서를 권한다.
- 가장 많이 클릭되는 내부 링크 3~5개를 분석에서 추린다.
- 그중 사이드 이펙트가 적은 콘텐츠 페이지부터 moderate prefetch로 시작한다.
- 1~2주 데이터를 보고 이상 페이지뷰가 없으면, 결정적 전환 페이지에 한해 prerender로 승급한다.
- 분석 스크립트와 A/B 테스트 도구가 prerender 환경을 인식하는지 점검한다.
오래된 사이트일수록 효과가 극적이다. 코드 한 줄 안 고치고 head에 JSON만 추가했는데, 카탈로그 사이의 이동이 즉시 반응하기 시작하는 그 순간을 한 번 보면 다시는 이전으로 돌아가기 어렵다.
마무리하며
속도 최적화는 더 이상 '이미지를 줄이고 자바스크립트를 압축하는 일'에서 끝나지 않는다. 사용자가 다음에 어디로 갈지 예측해 미리 준비해 두는 것까지가 이제 기본기다. CYAN은 클라이언트 사이트마다 어떤 경로에 어떤 강도로 Speculation Rules를 거는 것이 안전한지를 함께 설계한다. 우리 사이트의 페이지 전환이 유난히 답답하게 느껴진다면, 한 번쯤 점검해 볼 가치가 충분한 영역이다.