Speculation Rules API로 전환 가능 링크만 프리페치·프리렌더 설정 가이드

전환 가능성이 높은 링크만 미리 불러와야 하는 이유

 

사용자는 느린 페이지 전환에서 이탈하기 쉽습니다. 불특정 다수 링크를 무작정 프리페치·프리렌더하면 트래픽만 늘고 성과는 떨어질 수 있습니다.

 

Speculation Rules API는 브라우저에 “어떤 링크를 미리 준비할지” 규칙으로 전달하는 방법입니다. 전환 가능성이 높은 링크만 선별해 미리 불러오면 첫 클릭 체감 속도가 개선됩니다.

 

실무에서는 다음과 같은 상황에서 필요성이 커집니다.

 

- 광고 랜딩 이후 주요 CTA(예: 장바구니, 견적 요청)로 이어질 확률이 높을 때
- 목록 페이지에서 상세 페이지로 이동 비율이 뚜렷하게 높은 구간이 있을 때
- 내부 검색 결과에서 상위 몇 개 링크 클릭이 대부분을 차지할 때

 

> 안티패턴: 모든 내부 링크를 일괄 프리렌더하면 네트워크 비용과 서버 부하가 커집니다. 우선순위 기준을 정하고 제한적으로 적용하는 편이 안전합니다.

 

전환 고의도가 드러나는 링크를 규칙으로 표현하기

 

전환 고의도는 “사용자가 다음에 무엇을 할지”를 맥락으로 추정하는 개념입니다. Speculation Rules API는 이 추정을 브라우저가 이해하는 간단한 규칙으로 바꿔줍니다.

 

예를 들어 상품 목록에서 뷰포트 상단 3개 카드나 ‘장바구니 담기’ 인접 링크는 실제 클릭 전환이 자주 일어납니다. 이런 패턴을 규칙으로 정의해 해당 링크만 미리 불러오도록 하면 불필요한 네트워크 사용을 줄일 수 있습니다.

 

현실적인 기준은 화면 위치, 요소 상태, 최근 상호작용 같은 신호입니다. “상단 영역”, “마우스 오버 중”, “최근 검색 직후 상위 결과”처럼 단순한 조건만으로도 우선순위를 가를 수 있습니다.

 

- 위치 신호: 첫 화면(above the fold) 노출, 추천 위젯 상단 슬롯
- 행동 신호: 클릭 직전 마우스 오버, 포커스 이동, 터치 시작
- 맥락 신호: 내부 검색 상위 N개, 장바구니·문의 버튼 근접 링크

 

> 팁: 데이터가 부족하면 우선 화면 위치와 상호작용 신호부터 적용하고, 추후 분석 결과로 규칙을 좁혀가세요. 네트워크 비용 대비 체감 속도 개선이 있는 구간에만 유지하는 것이 좋습니다.

 

단계별 적용과 짧은 예시

 

전환 신호를 규칙으로 묶고, 네트워크 낭비를 막는 최소 한도를 두면 됩니다. 작은 범위에서 시작해 성과를 보며 확장하세요.

 

- 대상: 상단 카드 3개, 검색 결과 상위 5개, CTA 근처 링크처럼 범위를 좁힙니다.
- 신호: 마우스 오버(0.1초 이상), 포커스 진입, 터치 시작 같은 즉시 반응을 고릅니다.
- 액션: 가벼운 신호는 prefetch, 확실한 의도(터치·포커스)는 prerender로 나눕니다.
- 한도: 동시 prefetch 2개, prerender는 페이지당 1개로 제한합니다.
- 제외: 로그인·결제, 외부 도메인, 민감한 쿼리 URL은 포함하지 않습니다.

 

Speculation Rules API는 JSON 규칙을 페이지에 넣어 동작합니다. 아래 예시는 상단 카드/검색 상위에 신호별 prefetch·prerender를 적용하는 형태입니다.

 

<script type="speculationrules">
{
  "prefetch": [{
    "where": {
      "and": [
        { "selector": ".card[data-rank='1'], .card[data-rank='2'], .card[data-rank='3'], .search-item[data-rank<=5]" },
        { "hovered": true }
      ]
    },
    "eagerness": "moderate"
  }],
  "prerender": [{
    "where": {
      "and": [
        { "selector": ".cta-near a, .search-item[data-rank='1'] a" },
        { "focusVisible": true }
      ]
    },
    "eagerness": "eager",
    "cap": { "maxTargets": 1 }
  }]
}
</script>

 

호버는 prefetch로, 포커스 같은 강한 신호는 prerender로 격상합니다. cap은 prerender 과다 실행을 막는 안전장치입니다.

 

적용 후에는 간단히 확인하세요.

 

- DevTools Network에서 Prefetch/Prerender 건수와 용량을 봅니다.
- Core Web Vitals에서 TTFB·INP 변화를 비교합니다.
- 서버 로그로 불필요한 prerender 트래픽을 샘플링합니다.

 

> 주의: 개인화·로그인 화면을 prerender하면 세션과 캐시가 꼬일 수 있습니다. 민감 경로는 제외하고 공개 읽기 페이지만 대상으로 제한하세요.

 

흔한 실수와 선택 기준 정리

 

전환 확률이 높아 보여도 모든 후보에 같은 강도로 적용하면 과소비가 생깁니다. 규칙은 ‘언제·무엇을·얼마나’ 세 축으로 제한하세요.

 

- 언제: 마우스 오버 100ms 이상, 포커스 진입 등 즉각 신호일 때만
- 무엇을: 내부 동일 출처, 비로그인·비결제, 캐시 효율 좋은 정적 상세
- 얼마나: 동시 prefetch 2~3개, prerender 페이지당 1개, 타임아웃 10~20초

 

외부 링크, 개인화가 큰 페이지, 결제/마이페이지는 예측 적중률이 낮거나 보안 검토가 필요합니다. 이런 영역은 미리 불러오기 대상에서 제외하는 편이 안전합니다.

 

> 경고: 로그인 상태가 바뀌는 구간을 prerender하면 세션·권한 검증 흐름이 꼬일 수 있습니다. 인증이 필요한 경로는 prefetch도 지양하고, 라우터 레벨 캐시로 대체하세요.

 

프리페치와 프리렌더는 목적이 다릅니다. 사용자가 곧 클릭할 게 ‘유력’하면 prerender, 가능성이 ‘있다’ 정도면 prefetch로 나누면 불필요한 CPU·메모리 점유를 줄일 수 있습니다.

 

- 비교 기준
- prefetch: 네트워크만 선점(가볍다), 첫 바이트가 빨라짐, 오탐에 관대
- prerender: 페이지를 미리 그려 즉시 전환, 체감은 크지만 리소스 비용 큼
- 선택 팁: 터치 시작/키보드 네비게이션=prerender, 단순 호버=prefetch

 

바로 적용 체크리스트와 다음 행동

 

전환 신호가 뚜렷한 링크만 대상으로 삼고, prefetch/prerender 강도를 나눠 쓰면 됩니다. 작게 시작해 측정하며 범위를 넓히는 것이 안전합니다.

 

- 대상 좁히기: 상단 카드 3개, 검색 상위 5개, CTA 인접 링크
- 신호 정하기: 마우스 오버 100ms+, 포커스/터치 즉시
- 액션 매핑: 가벼운 신호=preload/prefetch, 확실한 신호=prerender
- 한도 설정: 동시 prefetch 2개, prerender 페이지당 1개, 10~20초 타임아웃
- 제외 규칙: 로그인/결제/개인화 심한 경로, 외부 도메인

 

지금 할 일은 규칙 스니펫을 최소 범위에 적용하고, 전환 퍼널의 첫 클릭 TTI와 이탈률 변화를 확인하는 것입니다. 성과가 보이면 대상 범위를 한 단계씩 확장하세요.

 

> 팁: 네트워크 비용을 줄이려면 서버 캐시가 잘 먹는 정적 상세 페이지부터 시작하고, 동적·개인화 페이지는 마지막에 평가하세요.

 

신호 기반 규칙 JSON 예시와 적용 포인트

 

아래 코드는 “상단 노출·마우스 오버·포커스” 같은 간단한 신호로 전환 가능성이 높은 링크만 지정하는 Speculation Rules JSON 예시입니다. 가벼운 신호는 prefetch, 확실한 신호는 prerender로 분리합니다.

 

<script type="speculationrules">
{
  "prefetch": [
    {
      "where": {
        "and": [
          { "selector": "a[data-slot='top']:not([data-sensitive])" },
          { "visible": true }
        ]
      },
      "eagerness": "moderate",
      "urls": "list"
    },
    {
      "where": { "selector": "a:hover, a:focus" },
      "eagerness": "conservative",
      "urls": "list"
    }
  ],
  "prerender": [
    {
      "where": { "selector": "a[data-cta-nearby='true']:focus" },
      "eagerness": "eager",
      "urls": "list",
      "limit": 1
    }
  ]
}
</script>

 

prefetch는 상단 슬롯이나 가벼운 상호작용에 반응하고, prerender는 CTA 인접 링크의 포커스처럼 의도가 분명할 때만 수행합니다. limit나 selector로 제외 대상을 명시해 과소비를 막습니다.

 

> 실무 팁: 네트워크 비용을 줄이려면 이미지·폰트는 서버 캐시로 커버하고, prerender는 HTML 문서 중심으로 제한하세요.