이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome DevTools로 추측 규칙 디버그하기

Barry Pollard

추측 규칙은 이전 게시물에 설명된 대로 다음 페이지 탐색을 미리 가져오고 미리 렌더링하는 데 사용할 수 있습니다. 이를 통해 페이지 로드를 훨씬 더 빠르게 또는 즉각적으로 수행할 수 있으므로 추가적인 페이지 탐색에 관한 Core Web Vitals가 크게 향상됩니다.

예측 규칙은 디버깅하기 까다로울 수 있습니다. 사전 렌더링된 페이지는 특히 이러한 페이지가 활성화된 경우 현재 탭을 대체하는 숨겨진 배경 탭과 같은 별도의 렌더기에서 렌더링되기 때문에 그렇습니다. 따라서 일반적인 DevTools 옵션을 항상 사용하여 문제를 디버그할 수는 없습니다.

Chrome팀은 추측 규칙 디버깅에 대한 DevTools의 지원을 개선하기 위해 열심히 노력해 왔습니다. 이 게시물에서는 페이지의 예측 규칙을 이해하기 위해 이러한 도구를 사용하는 다양한 방법, 이 규칙이 작동하지 않을 수 있는 이유, 개발자가 더 친숙한 DevTools 옵션을 사용할 수 있는 경우와 사용할 수 없는 경우를 알아봅니다.

'pre-'에 대한 설명 약관

많은 '사전-'이 혼동하기 쉬운 용어이므로 다음 설명부터 시작하겠습니다.

미리 가져오기: 향후 성능 향상을 위해 리소스 또는 문서를 미리 가져옵니다. 이 게시물에서는 비슷하지만 하위 리소스 미리 가져오기에 자주 사용되는 오래된 <link rel="prefetch"> 옵션이 아닌 Speculation Rules API를 사용하여 문서를 미리 가져오는 방법을 설명합니다.
사전 렌더링: 미리 가져오기를 뛰어넘어 사용자가 실제로 이동한 것처럼 전체 페이지를 렌더링하지만, 사용자가 실제로 페이지를 탐색할 때 사용할 수 있도록 숨겨진 백그라운드 렌더기 프로세스에 페이지를 보관합니다. 앞서 언급했듯이 이 문서는 이전 <link rel="prerender"> 옵션 (더 이상 전체 사전 렌더링을 실행하지 않음)이 아닌 최신 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`개 디버그

예측 규칙에 의해 트리거된 미리 가져오기는 다른 가져오기와 동일한 방식으로 Network 패널에서 볼 수 있습니다.

미리 가져온 문서를 보여주는 Chrome DevTools의 네트워크 패널 — 미리 가져온 문서를 표시하는 Chrome DevTools의 네트워크 패널

빨간색으로 강조 표시된 두 개의 요청은 미리 가져온 리소스이며 Type 열에서 볼 수 있습니다. 향후 탐색을 위한 것이므로 Lowest 우선순위로 가져오고 Chrome은 현재 페이지의 리소스에 우선순위를 둡니다.

행 중 하나를 클릭하면 서버 측에서 이러한 요청을 식별할 수 있는 Sec-Purpose: prefetch HTTP 헤더도 표시됩니다.

Chrome DevTools에서 Sec-Purpose가 미리 가져오기로 설정된 헤더 미리 가져오기 — 초목적이 미리 가져오기로 설정된 Chrome DevTools 미리 가져오기 헤더

추측 로드 탭으로 `prefetch` 디버그

추측 규칙 디버깅에 도움이 되도록 Chrome DevTools의 애플리케이션 패널에 있는 백그라운드 서비스 섹션에 새로운 추측 로드 섹션이 추가되었습니다.

미리 가져오기 규칙을 보여주는 Chrome DevTools 추측 로드 탭

핵심 사항: 예측 로드 탭은 예측 규칙 미리 가져오기와 사전 렌더링('탐색 예측'으로 통칭)을 사용하기 위한 것입니다. 이러한 탭은 <link rel="preload">를 사용한 하위 리소스 미리 로드, <link rel="prefetch">를 사용한 하위 리소스 미리 가져오기, 이전 <link rel="prerender"> 상태 없음 미리 가져오기를 디버그하는 데 사용할 수 없습니다.

이 섹션에서는 세 가지 탭을 사용할 수 있습니다.

추측 로드: 현재 페이지의 사전 렌더링된 상태가 나열됩니다.
규칙: 현재 페이지에서 찾은 모든 규칙 집합을 나열합니다.
추측: 규칙 집합에서 미리 가져온 URL과 사전 렌더링된 URL을 모두 나열합니다.

위의 스크린샷은 Speculations 탭을 보여줍니다. 이 예시 페이지에는 3개 페이지를 미리 가져오기 위한 단일 추측 규칙 세트가 포함되어 있습니다. 이러한 미리 가져오기 중 2개는 성공했고 나머지 하나는 실패했습니다. 규칙 집합 옆에 있는 아이콘을 클릭하면 요소 패널의 규칙 집합 소스로 이동할 수 있습니다. 또는 상태 링크를 클릭하여 해당 규칙 세트로 필터링된 추측 탭으로 이동할 수 있습니다.

Speculations 탭에는 모든 대상 URL과 함께 작업 (미리 가져오기 또는 사전 렌더링), URL이 유입된 규칙 세트 (한 페이지에 여러 개가 있을 수 있음), 각 추측 상태가 표시됩니다.

미리 가져온 URL을 상태와 함께 보여주는 Chrome DevTools 추측 탭

URL 위에 있는 드롭다운을 사용하여 모든 규칙 집합의 URL을 표시하거나 특정 규칙 집합의 URL만 표시할 수 있습니다. 그 아래에 모든 URL이 나열됩니다. URL을 클릭하면 더 자세한 정보를 볼 수 있습니다.

이 스크린샷에서는 next3.html 페이지 (존재하지 않으므로 2xx가 아닌 HTTP 상태 코드인 404를 반환함)의 실패 이유를 확인할 수 있습니다.

추측 로드 요약 탭에는 이 페이지에 미리 가져오기 또는 사전 렌더링이 사용되었는지를 보여주는 이 페이지의 추측 로드 상태 보고서가 표시됩니다.

미리 가져온 페이지의 경우 해당 페이지로 이동하면 성공 메시지가 표시됩니다.

성공적인 미리 가져오기가 표시된 Chrome DevTools 추측 로드 탭 — 성공적인 미리 가져오기를 보여주는 Chrome DevTools 추측 로드 탭

타의 추종을 불허하는 추측

미리 가져오기 또는 사전 렌더링이 사용되지 않는 예측 규칙이 있는 페이지에서 탐색이 발생하면 탭의 추가 섹션에 URL이 어떤 추측 URL과도 일치하지 않는 이유에 관한 자세한 내용이 표시됩니다. 이는 예측 규칙에서 오타를 발견하는 데 유용합니다.

현재 URL이 이전 페이지의 예측 규칙에 있는 어떤 URL과도 일치하지 않는 방식을 보여주는 Chrome DevTools 추측 로드 탭 — 일치하지 않는 URL이 DevTools에서 강조표시됨

예를 들어 여기서는 next4.html로 이동했지만 next.html, next2.html 또는 next3.html만 미리 가져오기이므로 세 가지 규칙과 완전히 일치하지 않음을 알 수 있습니다.

추측 로드 탭은 추측 규칙 자체를 디버깅하고 JSON에서 구문 오류를 찾는 데 매우 유용합니다.

미리 가져오기의 경우 Network 패널이 더 익숙할 수 있습니다. 미리 가져오기 실패의 경우, 여기에서 미리 가져오기의 404 오류를 확인할 수 있습니다.

실패한 미리 가져오기가 표시된 Chrome DevTools Network 패널

하지만 추측 로드 탭은 다음에 다룰 예측 규칙을 사전 렌더링하는 데 훨씬 더 유용합니다.

`prerender` 추측 규칙

사전 렌더링 예측 규칙은 미리 가져오기 예측 규칙과 동일한 구문을 따릅니다. 예를 들면 다음과 같습니다.

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

이 규칙 집합은 지정된 페이지의 전체 로드 및 렌더링을 트리거합니다 (특정 제한사항이 적용됨). 이를 통해 즉각적인 로드 환경을 제공할 수 있지만 추가 리소스 비용이 발생합니다.

하지만 미리 가져오기와 달리 미리 가져오기는 Chrome에서 별도의 렌더링 프로세스에서 가져와 렌더링하므로 Network 패널에서 볼 수 없습니다. 따라서 사전 렌더링 예측 규칙을 디버그하는 데 추측 로드 탭이 더 중요해집니다.

추측 로드 탭으로 `prerender` 디버그

세 페이지를 미리 가져오는 대신 사전 렌더링을 시도하는 유사한 데모 페이지에서 설명하는 것과 동일한 추측 로드 화면을 사전 렌더링 예측 규칙에 사용할 수 있습니다.

Chrome DevTools 예측에서 사전 렌더링 예측 규칙이 있는 페이지의 탭을 로드함

여기에서 3개의 URL 중 하나가 사전 렌더링에 실패했음을 다시 확인할 수 있습니다. 개발자는 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 DevTools Speculations 탭 — 여러 개의 트리거되지 않은 URL이 표시된 Chrome DevTools Speculations 탭

사전 렌더링 프로세스가 시작되지 않았으므로 Status가 트리거되지 않음으로 표시됩니다. 그러나 링크 위에 포인터를 가져가면 각 URL이 사전 렌더링될 때 상태가 변경됩니다.

Chrome은 moderate(eagerness)를 위한 최대 2개의 사전 렌더링을 포함하여 사전 렌더링에 제한을 설정했습니다. 따라서 세 번째 링크에 마우스를 가져가면 URL의 실패 이유가 표시됩니다.

다른 DevTools 패널로 `prerender` 디버그

미리 가져오기와 달리, 사전 렌더링된 페이지는 자체 백그라운드 렌더기에서 렌더링되기 때문에 Network 패널과 같은 DevTools 패널의 현재 렌더링 프로세스에 표시되지 않습니다.

하지만 이제 오른쪽 상단 드롭다운에 있는 드롭다운 메뉴를 사용하거나 패널 상단의 URL을 선택하고 검사를 선택하여 DevTools 패널에서 사용하는 렌더기를 전환할 수 있습니다.

이제 Chrome DevTools를 사용하여 정보가 표시되는 렌더기를 전환할 수 있습니다.

이 드롭다운 (및 선택한 값)은 Network 패널과 같은 다른 모든 패널에서도 공유됩니다. 여기에서 요청 중인 페이지가 사전 렌더링된 페이지임을 확인할 수 있습니다.

사전 렌더링된 페이지의 네트워크 요청을 보여주는 Chrome DevTools Network 패널

이러한 리소스의 HTTP 헤더를 보면 모두 Sec-Purpose: prefetch;prerender 헤더로 설정되는 것을 확인할 수 있습니다.

사전 렌더링된 페이지의 Sec-Purpose 헤더가 표시된 Chrome DevTools Network 패널

또는 다음 스크린샷과 같이 페이지 콘텐츠를 볼 수 있는 Elements 패널을 사용합니다. <h1> 요소는 사전 렌더링된 페이지용입니다.

사전 렌더링된 페이지의 Chrome DevTools Elements 패널

또는 사전 렌더링된 페이지에서 내보낸 콘솔 로그를 볼 수 있는 콘솔 패널:

사전 렌더링된 페이지의 콘솔 출력을 보여주는 Chrome DevTools Console 패널

사전 렌더링된 페이지에서 추측 규칙 디버그

이전 섹션에서는 페이지에서 사전 렌더링을 시작하는 사전 렌더링된 페이지를 디버그하는 방법을 설명했습니다. 하지만 사전 렌더링된 페이지 자체에서 분석을 호출하거나 콘솔 (이전 섹션에서 설명한 대로 볼 수 있음)에 로깅하여 디버깅 정보를 제공할 수도 있습니다.

또한 사용자가 사전 렌더링된 페이지로 이동하여 활성화되면 추측 로드 탭에 이 상태와 사전 렌더링에 성공했는지 여부가 표시됩니다. 사전 렌더링이 불가능한 이유에 대한 설명이 제공된 경우:

성공한 사전 렌더링 페이지와 실패한 사전 렌더링 페이지가 모두 표시된 Chrome DevTools 추측 로드 탭 — 성공 및 실패한 사전 렌더링 페이지가 모두 표시된 Chrome DevTools 추측 로드 탭

또한 미리 가져오기의 경우와 마찬가지로 현재 페이지와 일치하지 않는 추측 규칙이 있는 페이지에서 이동하면 URL이 추측 로드 탭의 이전 페이지의 추측 규칙에 포함된 URL과 일치하지 않는 이유를 보여주려고 합니다.

현재 URL과 이전 페이지에 포함된 URL의 불일치를 보여주는 Chrome DevTools 추측 로드 탭 — URL 불일치를 표시하는 Chrome DevTools

결론

이 게시물에서는 개발자가 미리 가져오기 및 사전 렌더링 예측 규칙을 디버그할 수 있는 다양한 방법을 살펴보았습니다. 팀은 추측 규칙을 위한 도구를 계속 개발하고 있으며, 이 흥미진진한 새 API를 디버깅하는 데 도움이 될 만한 다른 방법에 대해 개발자들의 제안을 듣고 싶습니다. 개발자는 기능 요청 또는 발견된 버그와 관련하여 Chrome Issue Tracker를 통해 문제를 제기하는 것이 좋습니다.

감사의 말씀

Unsplash에 누벨슨 페르난데스의 썸네일 이미지

Chrome DevTools로 추측 규칙 디버그하기

'pre-'에 대한 설명 약관

prefetch 추측 규칙

추측 규칙 prefetch개 디버그

추측 로드 탭으로 prefetch 디버그