[Speculation Rules] 링크를 미리 렌더해 '즉시' 열리는 페이지

한 줄 요약 - speculationrules 스크립트로 사용자가 다음에 갈 법한 페이지를 미리 prefetch/prerender 해두면, 클릭하는 순간 거의 즉시 열립니다.

무슨 일이에요?

여러 페이지로 된 사이트(MPA)를 위한 기능입니다. prefetch는 리소스만 미리 받고, prerender는 백그라운드에서 페이지를 미리 그려둡니다. Chromium 계열에서 지원하고 Firefox/Safari는 아직 미지원이라 점진적 향상으로 씁니다.

핵심 코드

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/articles/*" },
    "eagerness": "moderate"
  }]
}
</script>

왜 중요해요?

• 체감 로딩이 거의 0이 되어 Core Web Vitals(LCP 등)가 좋아집니다.
• 주의: prerender는 분석 이벤트 조기 실행 등 부작용이 있을 수 있어 eagerness(conservative/moderate)로 강도를 조절하세요.
• 미지원 브라우저는 그냥 일반 이동하므로 안전합니다.