추측 규칙은 이전 게시물에 설명된 대로 다음 페이지 탐색을 미리 가져오고 사전 렌더링하는 데 사용할 수 있습니다. 이를 통해 페이지가 훨씬 더 빠르게, 심지어 즉석에서 로드되어 추가적인 페이지 탐색을 위해 코어 웹 바이탈이 크게 개선됩니다.
추측 규칙 디버깅은 까다로울 수 있습니다. 이러한 페이지는 별도의 렌더러에서 렌더링되기 때문에 특히 그렇습니다. 이러한 페이지는 활성화될 때 현재 탭을 대체하는 숨겨진 배경 탭과 비슷합니다. 따라서 일반적인 DevTools 옵션을 항상 사용하여 문제를 디버그할 수는 없습니다.
Chrome팀은 추측 규칙 디버깅을 위한 DevTools 지원을 개선하기 위해 노력해 왔습니다. 이 게시물에서는 페이지의 추측 규칙을 이해하기 위해 이러한 도구를 사용하는 다양한 방법, 규칙이 작동하지 않는 이유, 개발자가 더 친숙한 DevTools 옵션을 사용할 수 있는 경우와 그렇지 않은 경우를 모두 살펴봅니다.
'사전' 용어 설명
혼동하기 쉬운 '사전' 용어들이 많으니 이에 대한 설명부터 시작하겠습니다.
- 프리페치: 향후 성능 개선을 위해 리소스 또는 문서를 미리 가져옵니다. 이 게시물에서는 하위 리소스를 미리 가져오는 데 자주 사용되는 유사하지만 오래된
<link rel="prefetch">옵션이 아닌 Speculation Rules API를 사용하여 문서를 미리 가져오는 방법을 다룹니다. - 사전 렌더링: 이는 미리 가져오기에 한발 앞서 사용자가 이동한 것처럼 실제로 전체 페이지를 렌더링하지만, 사용자가 실제로 해당 페이지로 이동하는 경우 사용할 수 있도록 숨겨진 백그라운드 렌더기 프로세스에 해당 페이지를 보관합니다. 다시 말하지만, 이 문서에서는 더 이상 전체 사전 렌더링을 수행하지 않는 이전
<link rel="prerender">옵션이 아닌 이 API의 최신 Speculation Rules API 버전에 관한 것입니다. - 탐색 예측: 추측 규칙에 의해 트리거되는 새로운 미리 가져오기 및 사전 렌더링 옵션을 총칭하는 용어입니다.
- 미리 로드:
<link rel="preload">, 미리 로드 스캐너, 서비스 워커 탐색 미리 로드를 비롯한 여러 기술과 프로세스를 나타낼 수 있는 오버로드된 용어입니다. 이러한 항목은 여기서 다루지 않지만 '탐색 예측' 용어와 명확하게 구분하기 위해 이 용어를 포함합니다.
prefetch의 추측 규칙
추측 규칙을 사용하여 다음 탐색의 문서를 미리 가져올 수 있습니다. 예를 들어 다음 JSON을 페이지에 삽입하면 next.html 및 next2.html가 미리 가져옵니다.
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
탐색 미리 가져오기에 추측 규칙을 사용하면 이전 <link rel="prefetch"> 문법에 비해 몇 가지 이점이 있습니다. 예를 들어 표현력이 더 뛰어난 API, HTTP 디스크 캐시가 아닌 메모리 캐시에 결과가 저장됩니다.
prefetch 추측 규칙 디버깅
추측 규칙에 의해 트리거된 미리 가져오기는 다른 가져오기와 동일한 방식으로 네트워크 패널에서 확인할 수 있습니다.
빨간색으로 강조 표시된 두 개의 요청은 유형 열에서 확인할 수 있는 미리 가져온 리소스입니다. 이러한 파일은 향후 탐색을 위해 Lowest 우선순위로 가져오며 Chrome에서 현재 페이지의 리소스에 우선순위를 둡니다.
행 중 하나를 클릭하면 Sec-Purpose: prefetch HTTP 헤더도 표시되며, 이 헤더로 서버 측에서 이러한 요청을 식별할 수 있습니다.
추측 로드 탭으로 prefetch 디버깅
추측 규칙 디버깅에 도움이 되도록 Chrome DevTools의 애플리케이션 패널의 백그라운드 서비스 섹션에 새로운 추측 로드 섹션이 추가되었습니다.
이 섹션에서는 다음과 같은 세 가지 탭을 사용할 수 있습니다.
- 추측 로드: 현재 페이지의 사전 렌더링된 상태를 나열합니다.
- 규칙: 현재 페이지에서 찾은 모든 규칙 집합을 나열합니다.
- 추론: 규칙 세트에서 미리 가져온 URL과 사전 렌더링된 URL을 모두 나열합니다.
Speculations 탭은 이전 스크린샷에 나와 있으며 이 예시 페이지에는 3페이지를 미리 가져오기 위한 단일 예측 규칙 세트가 있습니다. 두 개의 미리 가져오기는 성공했고 한 개는 실패했습니다. 규칙 세트 옆에 있는 아이콘을 클릭하면 요소 패널에 있는 규칙 세트의 소스로 이동할 수 있습니다. 또는 상태 링크를 클릭하면 해당 규칙 세트로 필터링된 추측 탭으로 이동할 수 있습니다.
추정 탭에는 모든 타겟 URL이 작업 (미리 가져오기 또는 사전 렌더링)과 함께 어떤 규칙 집합에서 비롯되었는지 (한 페이지에 여러 개가 있을 수 있음), 각 추측의 상태가 표시됩니다.
URL 위의 드롭다운을 사용하여 모든 규칙 집합의 URL 또는 특정 규칙 집합의 URL만 표시할 수 있습니다. 그 아래에는 모든 URL이 나열됩니다. URL을 클릭하면 더 자세한 정보가 표시됩니다.
이 스크린샷에서는 next3.html 페이지의 실패 이유를 확인할 수 있습니다 (존재하지 않아 2xx가 아닌 HTTP 상태 코드인 404를 반환함).
요약 탭인 추측 로드에는 이 페이지에 미리 가져오기 또는 사전 렌더링이 사용되었는지 여부를 보여주는 이 페이지의 추측 로드 상태 보고서가 표시됩니다.
미리 가져온 페이지의 경우 해당 페이지로 이동하면 성공 메시지가 표시됩니다.
타의 추종을 불허하는 추측
미리 가져오기나 사전 렌더링을 사용하지 않는 예측 규칙이 있는 페이지에서 탐색이 발생하면 탭의 추가 섹션에 URL이 추측 URL과 일치하지 않는 이유에 대한 자세한 내용이 표시됩니다. 이는 추측 규칙에서 오타를 발견하는 데 유용합니다.
예를 들어 여기서는 next4.html로 이동했지만 next.html, next2.html 또는 next3.html만 프리패치이므로 이 세 규칙 중 어느 것과도 일치하지 않음을 알 수 있습니다.
추측 로드 탭은 추측 규칙 자체를 디버깅하고 JSON에서 구문 오류를 찾는 데 매우 유용합니다.
미리 가져오기 자체의 경우 Network 패널이 더 익숙한 위치일 수 있습니다. 미리 가져오기 실패 예시의 경우 여기에서 미리 가져오기에 대한 404를 확인할 수 있습니다.
하지만 추측 로드 탭은 추측 규칙을 사전 렌더링하는 데 훨씬 더 유용합니다. 이 내용은 다음에 다룹니다.
prerender의 추측 규칙
사전 렌더링 예측 규칙은 미리 가져오기 예측 규칙과 동일한 구문을 따릅니다. 예를 들면 다음과 같습니다.
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
이 규칙 집합은 특정 페이지의 전체 로드 및 렌더링을 트리거합니다 (특정 제한사항이 적용됨). 이를 통해 추가 리소스 비용이 발생하지만 즉각적인 로드 환경을 제공할 수 있습니다.
하지만 미리 가져오기와는 달리 Chrome의 별도의 렌더링 프로세스에서 가져오고 렌더링되기 때문에 Network 패널에는 표시되지 않습니다. 따라서 사전 렌더링 예측 규칙을 디버그하는 데 추측 로드 탭이 더 중요해집니다.
추측 로드 탭으로 prerender 디버깅
세 페이지를 미리 가져오는 대신 사전 렌더링을 시도하는 유사한 데모 페이지에서 보여준 것처럼 동일한 추측 로드 화면을 사전 렌더링 예측 규칙에 사용할 수 있습니다.
여기서도 URL 3개 중 하나가 사전 렌더링에 실패했으며 개발자는 Speculations 탭에서 2 Ready, 1 Failure 링크를 클릭하여 URL별 세부정보를 확인할 수 있습니다.
Chrome 121에서 문서 규칙 지원 기능이 출시되었습니다. 이렇게 하면 브라우저가 특정 URL 집합을 나열하는 대신 페이지에 있는 동일한 출처 링크에서 URL을 가져올 수 있습니다.
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
이 예시에서는 /not-safe-to-prerender로 시작하는 링크를 사전 렌더링 후보로 제외하고 동일한 모든 출처 링크를 선택합니다.
또한 사전 렌더링 eagerness를 moderate로 설정합니다. 즉, 링크에 마우스를 가져가거나 링크를 클릭하면 탐색이 사전 렌더링됩니다.
이 데모 사이트에도 다음과 유사한 규칙이 있으며, 이 사이트의 새로운 추측 로드 섹션을 사용하면 브라우저에서 찾은 사용 가능한 모든 URL이 목록에 표시되므로 이 새 탭의 유용성을 확인할 수 있습니다.
사전 렌더링 프로세스가 시작되지 않았으므로 상태는 트리거되지 않음입니다. 그러나 링크 위로 마우스를 가져가면 각 URL이 사전 렌더링됨에 따라 상태가 변경됩니다.
Chrome은 moderate 즉시 렌더링을 위한 최대 2개를 포함하여 사전 렌더링에 제한을 설정하므로 세 번째 링크 위로 마우스를 가져가면 해당 URL의 실패 이유가 표시됩니다.
다른 DevTools 패널로 prerender 디버깅
미리 가져오기와 달리 사전 렌더링된 페이지는 자체 내부 렌더기에서 렌더링되기 때문에 Network 패널과 같은 DevTools 패널의 현재 렌더링 프로세스에 표시되지 않습니다.
하지만 이제 오른쪽 상단의 드롭다운 메뉴를 사용하거나 패널 상단의 URL을 선택하고 Inspect를 선택하여 DevTools 패널에서 사용하는 렌더기를 전환할 수 있습니다.
이 드롭다운 (및 선택된 값)은 네트워크 패널과 같은 다른 모든 패널에서도 공유됩니다. 이 패널에서 요청 중인 페이지가 사전 렌더링된 페이지임을 확인할 수 있습니다.
이러한 리소스의 HTTP 헤더를 살펴보면 모두 Sec-Purpose: prefetch;prerender 헤더로 설정되는 것을 확인할 수 있습니다.
또는 다음 스크린샷과 같이 페이지 콘텐츠를 볼 수 있는 요소 패널에서 <h1> 요소가 사전 렌더링된 페이지에 사용됩니다.
또는 사전 렌더링된 페이지에서 내보낸 콘솔 로그를 볼 수 있는 콘솔 패널:
사전 렌더링된 페이지에서 추측 규칙 디버그
이전 섹션에서는 사전 렌더링을 시작하는 페이지에서 사전 렌더링된 페이지를 디버그하는 방법을 설명합니다. 하지만 사전 렌더링된 페이지 자체에서 분석을 호출하거나 콘솔에 로깅 (이전 섹션에서 설명한 대로 볼 수 있음)하여 디버깅 정보를 제공할 수도 있습니다.
또한 사용자가 해당 페이지로 이동하여 사전 렌더링된 페이지를 활성화하면 추측 로드 탭에 이 상태와 사전 렌더링 성공 여부가 표시됩니다. 그 이유에 대한 설명을 사전 렌더링할 수 없는 경우 다음과 같이 합니다.
또한 미리 가져오기의 경우와 마찬가지로 현재 페이지와 일치하지 않는 예측 규칙이 있는 페이지에서 이동하면 URL이 추측 로드 탭에 있는 이전 페이지의 예측 규칙과 일치하지 않는 이유를 표시하려고 합니다.
결론
이 게시물에서는 개발자가 미리 가져오기와 사전 렌더링 추측 규칙을 디버그할 수 있는 다양한 방법을 보여주었습니다. 팀은 추측 규칙을 위한 도구를 개발하는 중입니다. 이 흥미로운 새 API를 디버깅하는 데 도움이 되는 다른 방법에 관한 개발자들의 제안을 듣고 싶습니다. 기능 요청이나 버그가 발견되는 경우 개발자는 Chrome Issue Tracker를 통해 문제를 신고할 것을 권장합니다.
감사의 말
Unsplash에 있는 Nubelson Fernandes의 썸네일 이미지