Speculation Rules 생성기

이 도구는 Speculation Rules API를 위한 prefetch 및 prerender 구성을 빌드합니다. 탐색 성능을 향상시키기 위해 문서의 <head>에 최적화된 JSON을 생성하세요.

구성 가이드

유효한 추측 규칙을 빌드하려면 이 프로세스를 따르세요.

1단계: 전략 선택

브라우저가 추측된 리소스를 처리하는 방법을 결정합니다:

Prefetch: 렌더링 없이 백그라운드에서 응답 본문을 다운로드합니다. 메모리 사용량을 낮게 유지해야 하는 확률이 높은 리소스에 이상적입니다.
Prerender: 백그라운드 탭에서 페이지(JavaScript 포함)를 다운로드하고 완전히 렌더링합니다. 탐색 시 즉각적인 전환을 제공합니다.
Prerender (Until Script): DOM 및 CSS를 렌더링하지만 사용자가 페이지를 탐색할 때까지 JavaScript 실행을 일시 중지합니다. 렌더링 속도와 컴퓨팅 비용 절감의 균형을 맞춥니다.

2단계: 트리거 정의

규칙을 활성화하는 조건을 설정합니다:

Document: 현재 페이지 URL이 정의된 패턴과 일치할 때 활성화됩니다.
List: 수동으로 제공된 목록에 현재 페이지 URL이 존재할 때 활성화됩니다.

3단계: 적극성(Eagerness) 설정

가져오기(fetch)의 타이밍 및 우선순위를 제어합니다:

Immediate: 가장 높은 우선순위입니다. 규칙이 파싱되는 즉시 가져옵니다.
Eager: immediate와 동일합니다(현재는 별칭으로 작동함).
Moderate: 포인터 호버 시(200ms 후) 또는 뚜렷한 포인터 다운 이벤트 시 트리거됩니다.
Conservative: 낮은 우선순위입니다. 포인터 다운 또는 터치 시작 시에만 트리거됩니다.

4단계: 타겟 리소스

URL 패턴 또는 CSS 선택자를 사용하여 프리로드(preload)할 특정 링크를 필터링합니다:

Href Matches: 이 와일드카드 패턴과 일치하는 URL을 포함합니다(예: /product/*는 제품 디렉토리의 모든 링크를 타겟팅합니다).
Href Does Not Match: 이 와일드카드 패턴과 일치하는 URL을 제외합니다.
Selector Matches: CSS 선택자로 식별된 링크를 포함합니다(예: .nav-link는 탐색 요소를 타겟팅합니다).
Selector Does Not Match: 이러한 CSS 선택자로 식별된 링크를 제외합니다.
URLs: 프리로드할 정확한 URL을 지정합니다(Source가 'List'로 설정된 경우에만 필요).

구현

생성된 JSON을 복사하여 사이트 <head>의 <script type="speculationrules"> 태그 안에 배치하세요. 확인하려면 Chrome DevTools(Ctrl+Shift+I)를 열고 Application 패널로 이동한 다음 사이드바에서 Speculation Rules를 선택하세요.

예시 구성

다음 매개변수는 모든 제품 페이지를 prerender합니다:

Mode: Prerender
Trigger: Document
Eagerness: Moderate
Href Matches: /product/*

이 규칙은 사용자가 일치하는 페이지를 방문할 때 중간 우선순위(호버/상호작용)로 /product/ 디렉토리 내의 URL을 prerender합니다.

Speculation Rules 생성기

Speculation Rules Generator

Your Rules

Output