Instant Navigations: Near‑Zero Load Times를 위한 Speculation Rules API 사용법

I’m ready to translate the article for you, but I need the full text you’d like translated. Could you please paste the content (excluding the source link you already provided) so I can convert it into Korean while preserving the formatting and code blocks?

페이지 로드가 여전히 느리게 느껴지는 이유

최적화를 아무리 많이 해도 한계가 있습니다: 페이지는 사용자가 클릭한 후에만 로드가 시작될 수 있습니다.
빠른 사이트라 하더라도 DNS 조회, 서버 응답, 렌더링을 기다려야 하며, 이는 수백 밀리초가 걸릴 수 있습니다.

브라우저가 사용자가 다음에 갈 페이지를 예측하고 클릭하기 전에 로드를 시작한다면 어떨까요?

바로 그것이 Chrome의 Speculation Rules API가 하는 일입니다. 이를 사용하면 0 ms 로드 시간을 달성할 수 있습니다 – 페이지가 바로 나타납니다.

Source: …

두 가지 전략

Note: 이 API는 이전 “ 태그를 대체합니다(프라이버시 문제로 폐기됨). 새로운 API는 더 똑똑하며 훨씬 더 많은 제어권을 제공합니다.

완벽한 Lighthouse 점수라도 빠르게 느껴지는 사이트를 보장하지는 않습니다. 최적화된 페이지라도 DNS 조회, TCP 핸드셰이크, TLS 협상, 서버 응답, 렌더링 등 최소 수백 밀리초가 필요합니다.

예측 로딩 규칙은 사용자가 결정을 내리는 동안 작업을 수행함으로써 인지된 대기 시간을 없애줍니다.
예를 들어 사용자가 링크 위에 200 ms 동안 마우스를 올려놓으면 그 시간을 이용해 목적지를 미리 로드하거나 프리렌더링할 수 있습니다. 클릭할 때쯤이면 작업이 이미 완료된 상태가 됩니다.

혜택

• 페이지 전환 시 흰 화면이 전혀 없음
• 즉시 인터랙션 가능 (JS가 이미 파싱·실행됨)
• Core Web Vitals 개선 – 프리렌더링된 페이지는 LCP가 0 ms에 가까워짐
• 잠재적인 매출 상승 – 경험이 마법처럼 느껴짐

실용적인 예시

1. 사용자가 클릭을 시작할 때 프리렌더링 (가장 낮은 리소스 낭비)

{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/logout" } },
        { "not": { "href_matches": "/*\\?*(^|&)add-to-cart=*" } }
      ]
    },
    "eagerness": "conservative"
  }]
}

2. 200 ms 호버 시 프리렌더링 – 성능과 리소스 비용의 균형

(이는 Google 검색이 첫 두 결과 이후에 사용하는 전략입니다.)

{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/logout" } }
      ]
    },
    "eagerness": "moderate"
  }]
}

3. 2단계 전략: 페이지 로드 시 적극적인 프리패치 + 호버 시 보통 수준 프리렌더링

{
  "prefetch": [{
    "urls": ["/products", "/pricing", "/docs"],
    "eagerness": "eager"
  }],
  "prerender": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}

4. 프라이버시 보호와 함께 외부 링크 프리패치

{
  "prefetch": [{
    "urls": [
      "https://example.com/article",
      "https://partner-site.com/page"
    ],
    "requires": ["anonymous-client-ip-when-cross-origin"],
    "referrer_policy": "no-referrer"
  }]
}

5. CSS 클래스별 대상 링크 지정

{
  "prerender": [{
    "where": { "selector_matches": ".prerender-this" },
    "eagerness": "eager"
  }],
  "prefetch": [{
    "where": { "selector_matches": ".prefetch-this" },
    "eagerness": "moderate"
  }]
}

Eagerness Settings

The Speculation Rules API는 Chromium‑only이지만 점진적 향상으로 작동합니다 – 지원되지 않는 브라우저는 “ 태그를 단순히 무시합니다.

Browser Support

리소스 및 개인 정보 보호

• 리소스 제한 – Chrome은 동시 프리렌더를 제한합니다: 최대 50개의 즉시/빠른 프리페치(모바일), 10개의 프리렌더, 그리고 2개의 중간/보수적인 프리렌더(FIFO). 제한에 도달하면 오래된 프리렌더가 취소됩니다.
• 지연 API – 카메라, 마이크, 알림, 위치 정보와 같은 침해성 API는 사용자가 실제로 페이지를 볼 때까지 대기합니다.
• 사용자 설정 존중 – 사용자가 데이터 절약, 배터리 절약을 켜두었거나 설정에서 “페이지 미리 로드”를 비활성화한 경우 프리렌더링이 실행되지 않습니다.
• 크로스‑오리진 iframe – 서드파티 iframe은 프리렌더 중에 로드되지 않으며, 활성화될 때까지 기다려 추적을 방지하고 낭비를 줄입니다.

최종 생각

솔직히 이걸 더 일찍 알지 못해서 놀라워요. 이제 모든 주요 Chromium 브라우저가 API를 지원하니, 확실히 사용할 가치가 있습니다. 복잡한 성능 최적화에 빠져서 더 간단한 이점을 놓치기 쉽습니다 – 예를 들어 SEO를 위한 올바른 시맨틱 HTML이나 무거운 프레임워크보다 성능이 좋은 순수 CSS 등.

Speculation Rules API는 바로 그 범주에 들어갑니다: 강력하고, 직관적이며, 플랫폼에 내장된. 계속해서 실험해 볼 생각에 기대됩니다!

그것이 얼마나 멀리 갈 수 있는지 확인해 보세요.

• Chrome에서 프리렌더 페이지 – 전체 API 레퍼런스
• 복잡한 사이트를 위한 구현 가이드 – 고급 패턴 및 모범 사례
• Speculation Rules 디버깅 – DevTools 가이드
• Google 검색이 Speculation Rules를 사용하는 방법 – 실제 구현 및 결과
• MDN: Speculation Rules API – 웹 표준 문서