다음 페이지 로드 성능 개선

사이트를 탐색하는 사용자의 페이지 로드 성능을 개선하는 가장 효과적인 방법 중 하나는 사용자가 방문하기 전에 방문하려는 다음 페이지의 로드를 시작하는 것입니다. 이는 Speculation Rules API를 사용하는 추측 로드라는 기법을 통해 가능합니다.

작동 방식

추측 로드는 JSON 기반 추측 규칙을 사용하여 사용자가 클릭할 때 페이지 로드 성능을 개선하는 미리 가져오기 또는 사전 렌더링이 가능한 링크를 브라우저에 알려주는 방식으로 작동합니다.

규칙은 urls 키 (목록 규칙이라고 함)가 있는 하드코딩된 URL 목록이거나 페이지에서 링크를 찾는 데 사용되는 href 및 CSS 선택자 집합이 포함된 where 키(document 규칙이라고 함)가 있는 URL 목록일 수 있습니다.

규칙에는 페이지를 미리 가져오거나 미리 렌더링해야 하는 시점을 지정하는 선택적 eagerness 속성도 포함될 수 있습니다. eagerness 속성은 immediate, eager, moderate 또는 conservative로 설정할 수 있습니다. immediate는 최대한 빨리 추측하는 반면, 다른 옵션은 짧은 시간 동안 마우스를 가져가거나, 더 긴 시간 동안 마우스를 가져가거나, 페이지를 클릭하기 시작하는 등의 사용자 신호를 기다립니다.

규칙을 다양한 적극성 설정과 결합하여 적극적으로 미리 가져온 다음 사용자가 더 많이 상호작용할 때 미리 렌더링할 수 있습니다.

사용 시기

추측 로드는 콘텐츠가 자주 변경되지 않고 페이지 생성 비용이 저렴한 정적 페이지에 특히 유용합니다. 특히 에지에서 캐시되는 경우 더욱 그렇습니다. 동적 페이지에도 사용할 수 있지만 오래된 콘텐츠가 표시될 수 있으므로 주의해야 합니다.

추측 로드는 일반적으로 동일 출처 링크에 사용되지만, 고급 옵션을 사용하면 일부 교차 출처 추측이 가능합니다. 이 가이드에서는 더 일반적인 동일 출처 사용 사례에 중점을 둡니다.

더 적극적인 추측 로드는 헤드라인 기사나 학습 과정과 같은 단계별 프로세스의 다음 페이지와 같이 다음에 방문할 가능성이 높은 페이지에 적합합니다.

사용자가 다음에 무엇을 할지 명확하지 않은 경우, 페이지에 링크가 많고 각 링크를 방문할 가능성이 동일한 경우, 덜 적극적인 추측 로드가 좋은 선택입니다. 마우스 오버와 같은 더 많은 신호를 기다리거나 페이지를 클릭하기 시작하면 다음 페이지를 미리 시작하고 사용자 환경을 개선할 수 있습니다. 완전히 미리 가져오거나 미리 렌더링하지 않더라도 마찬가지입니다.

마찬가지로 미리 가져오기는 사전 렌더링보다 더 보수적인 선택으로, 클라이언트와 서버 측 모두에서 더 적은 리소스를 사용하지만 사용자에게 제공하는 이점은 더 적습니다. 초기 구현에 적합하며, 개발자가 명시적으로 요청하면 나중에 사전 렌더링으로 확장할 수 있습니다.

활용 방법

추측 규칙은 JSON 기반 형식을 가지며 <script type="speculationrules"> 태그에 포함될 수 있습니다. 규칙은 문서의 <head> 또는 <body>에 포함되거나 JavaScript를 사용하여 동적으로 추가될 수 있습니다.

tag은 전역 수준 또는 규칙별로 사용할 수도 있습니다. 이 태그를 설정하면 Sec-Speculation-Tags 헤더에 포함되며, 서버 측에서 어떤 추측이 이루어졌는지 식별할 수 있습니다.

사전 정의된 URL을 미리 가져오기 위한 간단한 URL 목록 규칙의 예

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

페이지의 모든 동일 출처 링크를 사전 렌더링하는 간단한 문서 규칙의 예

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

상호작용 사이트 제외가 포함된 링크 사전 렌더링에 대한 복잡한 문서 규칙의 예

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

혼합 규칙 집합의 예

이 예에서는 모든 링크를 적극적으로 미리 가져온 다음 moderate 적극성으로 더 많은 신호를 수신하면 동일한 링크를 미리 렌더링하는 규칙 집합을 보여줍니다.

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

권장사항

• 권장사항: 추측 규칙을 사용하여 사용자가 다음에 방문할 가능성이 높은 페이지를 미리 가져오고 사전 렌더링합니다.
• 콘텐츠가 자주 변경되지 않고 페이지를 생성하는 데 비용이 적게 드는 정적 사이트에는 추측 규칙을 사용하세요. 특히 에지에 캐시된 경우에 유용합니다.
• 콘텐츠가 자주 변경되고, 오래될 수 있으며, 페이지 생성 비용이 더 많이 드는 동적 페이지에 추측 규칙을 사용할 때는 더 주의를 기울여야 합니다.
• 목록 규칙보다 문서 규칙을 사용하는 것이 좋습니다. 문서 규칙은 더 유연하고, 동일한 규칙을 여러 페이지에서 공유할 수 있으며, 사전에 알 수 없는 페이지를 미리 가져오고 미리 렌더링하는 데 사용할 수 있기 때문입니다.
• 권장사항: 미리 가져오기와 사전 렌더링 간의 장단점을 고려하고 사용 사례에 적합한 것을 선택하세요. 사전 렌더링은 미리 가져오기보다 비용이 더 많이 들고 동적 상태를 표시하는 복잡한 애플리케이션에서 의도하지 않은 부작용을 더 많이 일으킬 수 있지만 더 나은 사용자 환경을 제공합니다. 확실하지 않은 경우 개발자에게 선호하는 방법을 물어보세요.
• 다양한 eagerness 수준 간의 장단점을 고려하고 사용 사례에 적합한 수준을 선택합니다. 더 적극적인 추측은 더 나은 사용자 환경을 제공하지만 더 많은 리소스를 사용하며 동적 상태를 표시하는 복잡한 애플리케이션에서 의도하지 않은 부작용을 더 많이 일으킬 수 있습니다. 확실하지 않은 경우 개발자에게 선호하는 방법을 물어보세요.
• 추측 규칙을 과도하게 사용하지 마세요. 예를 들어 페이지의 모든 링크를 추측하지 마세요. 브라우저에는 제한이 있습니다 (즉시 실행되지 않는 추측의 경우 추측 2개). immediate는 아주 적은 수의 링크에만 사용해야 합니다.
• /logout 또는 /add-to-cart와 같이 상태 변경을 트리거할 가능성이 있는 URL을 추측하지 마세요. 문서 규칙에 포함될 가능성이 있는 경우 추측 규칙에서 명시적으로 제외하세요.
• SPA (단일 페이지 애플리케이션)에서 추측 규칙을 사용하지 마십시오. 추측 규칙은 브라우저가 탐색할 때마다 새 문서로 이동하는 다중 페이지 애플리케이션 (MPA)을 위해 설계되었습니다. SPA에서는 브라우저가 탐색할 때마다 새 문서로 이동하지 않으므로 추측 규칙이 예상대로 작동하지 않습니다.

브라우저 지원 및 대체 전략

하지만 추측 로드는 점진적 개선입니다. 보정 기능으로 사용해도 안전하며, 잠재적인 실적 개선 효과를 고려할 때 적극 권장됩니다. 브라우저가 추측 규칙을 지원하지 않으면 이를 무시합니다.