추측 규칙을 사용하면 이전 게시물에 자세히 설명된 대로 다음 페이지 탐색을 미리 가져오고 사전 렌더링할 수 있습니다. 이렇게 하면 페이지 로드가 훨씬 빨라지거나 즉시 이루어져 이러한 추가 페이지 탐색의 Core Web Vitals가 크게 개선됩니다.
추측 규칙을 디버깅하는 것은 까다로울 수 있습니다. 특히 사전 렌더링된 페이지의 경우 이러한 페이지는 별도의 렌더러에서 렌더링되므로 활성화되면 현재 탭을 대체하는 숨겨진 백그라운드 탭과 같습니다. 따라서 일반적인 DevTools 옵션을 사용하여 문제를 디버깅할 수 없는 경우가 있습니다.
Chrome팀은 추측 규칙 디버깅을 위한 DevTools 지원을 강화하기 위해 노력해 왔습니다. 이 게시물에서는 이러한 도구를 사용하여 페이지의 추측 규칙, 작동하지 않는 이유, 개발자가 더 익숙한 DevTools 옵션을 사용할 수 있는 경우와 사용할 수 없는 경우를 파악하는 다양한 방법을 알아봅니다.
'사전' 용어 설명
혼동을 야기하는 '사전' 용어가 많으므로 먼저 이러한 용어를 설명해 드리겠습니다.
- 프리페치: 향후 성능을 개선하기 위해 리소스나 문서를 미리 가져오는 것입니다. 이 게시물에서는 하위 리소스를 프리패치하는 데 자주 사용되는 유사하지만 오래된
<link rel="prefetch">옵션이 아닌 Speculation Rules API를 사용하여 문서를 프리패치하는 방법을 다룹니다. - 사전 렌더링: 사전 가져오기보다 한 단계 더 나아가 사용자가 페이지로 이동한 것처럼 전체 페이지를 실제로 렌더링하지만 사용자가 실제로 이동하는 경우 사용할 수 있도록 숨겨진 백그라운드 렌더러 프로세스에 유지합니다. 이 문서에서는 이전
<link rel="prerender">옵션 (더 이상 전체 사전 렌더링을 실행하지 않음)이 아닌 최신 추측 규칙 API 버전을 다룹니다. - 추측 탐색: 추측 규칙에 의해 트리거되는 새로운 프리패치 및 사전 렌더링 옵션의 총칭입니다.
- 미리 로드:
<link rel="preload">, 미리 로드 스캐너, 서비스 워커 탐색 미리 로드 등 여러 기술과 프로세스를 나타낼 수 있는 과부하된 용어입니다. 이러한 항목은 여기에서 다루지 않지만 '추측 탐색'이라는 용어와 명확하게 구분하기 위해 포함되었습니다.
prefetch의 추측 규칙
추측 규칙을 사용하여 다음 탐색의 문서를 미리 가져올 수 있습니다. 예를 들어 다음 JSON을 페이지에 삽입하면 next.html 및 next2.html이 미리 가져와집니다.
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
탐색 미리 가져오기에 추측 규칙을 사용하면 이전 <link rel="prefetch"> 구문보다 더 표현력이 풍부한 API와 결과가 HTTP 디스크 캐시가 아닌 메모리 캐시에 저장되는 등의 이점이 있습니다.
prefetch 추측 규칙 디버깅
추측 규칙에 의해 트리거된 프리패치는 다른 가져오기와 마찬가지로 네트워크 패널에 표시됩니다.