Chrome의 비공개 미리 가져오기 프록시

Katie Hempenius
Katie Hempenius
Kenji Baheux
Kenji Baheux
Michael Buettner
Michael Buettner

크로스 사이트 미리 가져오기로 최대 콘텐츠 렌더링 시간 (LCP) 속도 향상

Android용 Chrome 103부터 Chrome은 비공개 미리 가져오기 프록시 기능을 점진적으로 출시하여 Google 검색 및 기타 참여 웹사이트에서 나가는 탐색 속도를 중앙값으로 30% 높일 예정입니다. 이 비공개 미리 가져오기 프록시 기능을 사용하면 사용자가 탐색할 때까지 대상 웹사이트에 사용자 정보를 노출하지 않고 교차 출처 콘텐츠를 미리 가져올 수 있습니다.

이 기능이 작동하는 방식, 이 기능이 사이트의 최대 콘텐츠 페인트 (LCP)를 크게 개선하는 방법 또는 리퍼러 웹사이트가 크로스 사이트 탐색 속도를 높여 사용자의 목표 달성에 도움을 주는 방법에 대해 알아보세요.

비공개 미리 가져오기 프록시 작동 방식

보안 통신 채널

이 기능은 CONNECT 프록시를 사용하여 Chrome과 미리 가져올 콘텐츠를 호스팅하는 서버 간에 보안 통신 채널을 설정합니다. 이 보안 통신 채널은 프록시가 데이터 전송을 검사하는 것을 방지합니다. 특히 비공개 미리 가져오기 프록시는 보안 통신 채널을 설정하기 위해 반드시 호스트 이름을 보지만 전체 URL이나 리소스 자체는 보지 못합니다.

프록시를 통한 데이터 흐름을 보여주는 애니메이션
CONNECT 프록시를 통해 웹사이트를 미리 가져오면 사용자 정보 유출을 방지할 수 있습니다.

또한 보안 통신 채널은 엔드 투 엔드 암호화되므로 중개자는 호스트 이름이나 미리 가져온 사이트의 콘텐츠를 관찰할 수 없습니다. 마지막으로 프록시는 기본적으로 대상 서버가 사용자의 IP 주소를 보지 못하게 합니다.

사용자 식별 방지

앞서 설명한 네트워크 측면 외에도, 우리는 서버가 이전에 기기에 저장된 정보를 통해 프리패치 시 사용자를 식별하지 못하도록 해야 합니다. 이를 위해 Chrome은 현재 사용자에게 쿠키나 다른 로컬 상태가 없는 웹사이트에만 비공개 미리 가져오기 프록시를 사용하도록 제한하고 있습니다. 비공개 미리 가져오기 프록시를 통한 미리 가져오기 요청에 대한 제한사항은 다음과 같습니다.

  • 쿠키: 미리 가져오기 요청은 쿠키를 전달할 수 없습니다.
    • 리소스에 대한 쿠키가 있는 경우 Chrome은 사용자 인증 정보 없이 가져오기를 실행하지만 응답은 사용하지 않습니다 (후반부의 캐싱 섹션 참고).
    • 미리 가져오기 요청에 대한 응답에는 쿠키가 포함될 수 있지만 이러한 쿠키는 사용자가 미리 가져온 페이지로 이동한 경우에만 저장됩니다.
  • 지문 입력: 지문 수집에 사용할 수 있는 다른 표면도 조정됩니다. 예를 들어 프리패치 프록시에서 전송된 User-Agent 헤더는 제한된 정보만 전달합니다.

Google에서는 향후 동일한 개인 정보 보호 특성을 유지하면서 비공개 미리 가져오기 프록시를 쿠키 또는 로컬 상태가 있는 링크로 확장할 수 있기를 바랍니다. 자세한 내용은 다음 단계 섹션을 참고하세요.

캐싱

Chrome은 이미 캐시에 있는 경우에도 리소스를 미리 가져오지만 ETag 또는 If-Modified-Since과 같은 조건부 헤더는 전달하지 않습니다. 여기에는 쿠키 없이도 추적에 사용할 수 있는 서버 설정 값이 포함되어 있습니다. 이러한 미리 가져오기는 클라이언트의 캐시 상태가 미리 가져온 웹사이트에 유출되지 않도록 하기 위해 수행됩니다. 또한 Chrome은 사용자가 미리 가져온 웹사이트로 이동하기로 결정한 경우에만 미리 가져온 리소스를 캐시에 커밋합니다.

비공개 미리 가져오기 프록시 시작하기

웹사이트 소유자

사용자에게 쿠키나 로컬 상태가 없는 링크에서 비공개 미리 가져오기 프록시를 사용하기 위해 웹사이트 소유자가 별도로 취해야 할 조치는 없습니다. Google의 실험을 통해 얻은 결과, 이것은 대부분의 웹사이트에서 중요한 기회라고 할 수 있습니다. 또한 처음 방문한 사용자나 빈번하지 않은 방문자에게 로드 속도가 매우 빠른 것이 좋습니다. 이전 실험을 통해 미리 가져온 탐색에서 최대 콘텐츠 렌더링 시간이 20~30% 빠른 것으로 나타났습니다.

향후 개인 정보 보호 특성을 유지하면서 쿠키 또는 로컬 상태와 연결할 수 있도록 이 기능을 확장할 수 있도록 노력하겠습니다. 쿠키의 문제는 예측하기 어려운 방식으로 사용자 경험을 변경하는 데 사용될 수 있다는 점입니다. 따라서 웹사이트 소유자는 쿠키가 포함된 링크에 대해 비공개 미리 가져오기 프록시를 사용하기 위해 사이트를 선택하거나 조정해야 합니다.

확실하게 미리 가져오기 요청은 사용자 인증 정보가 없는 상태로 유지되지만 사용자가 웹페이지로 이동하면 웹페이지는 쿠키 및 기타 로컬 상태에 액세스할 수 있습니다. 개발자는 이를 활용하여 쿠키 또는 로컬 상태를 기반으로 맞춤설정과 변경사항을 다시 추가할 수 있습니다. 또는 개발자는 특정 리소스 (즉, 쿠키에 종속되지 않는 리소스) 없이 있는 그대로 미리 가져오고 사용하기에 완벽하게 괜찮다고 선언하는 데 관심이 있을 수도 있습니다. 다음 단계 섹션에서 자세한 내용을 알아보고 Google의 계획에 필요한 정보를 얻으세요.

지역 종속 콘텐츠 또는 서비스

사용자의 IP 주소에 따라 여러 시장에서 웹사이트가 다르게 작동 (예: 다른 콘텐츠 또는 선택적 액세스)하는 경우 비공개 미리 가져오기 프록시의 미리 가져오기 요청을 처리하는 방법이 궁금할 수 있습니다. 비공개 미리 가져오기 프록시는 전 세계에 분산된 여러 서버에 의해 구동되며 프록시의 IP는 사용자가 미리 가져오기를 시작한 국가의 위치를 파악한다는 점을 아는 것이 중요합니다.

따라서 이러한 점을 염두에 두고 다음과 같이 해보시기 바랍니다.

  1. Sec-Purpose: Prefetch; anonymous-client-ip HTTP 헤더가 있는지 확인하여 비공개 미리 가져오기 프록시의 미리 가져오기 요청을 식별합니다.
  2. IP 주소를 통해 요청을 실행한 비공개 미리 가져오기 프록시의 위치정보를 조회합니다. 출시된 지역과 해당 IP 주소의 최신 목록은 이 리소스를 참고하세요.
  3. 이 특정 위치정보에 연결된 시장에 따라 리소스를 제공합니다.

트래픽 제어

이전 실험을 통해 이 기능을 사용했을 때 기본 리소스 (예: HTML 문서)에 대한 추가 요청이 일반적으로 2% 미만으로 발생하는 것으로 나타났습니다. 하지만 주의가 필요한 경우 트래픽 조언의 비율 필드를 사용하여 비공개 미리 가져오기 프록시가 통과해야 하는 트래픽의 양을 제어할 수 있습니다. 0.3 (즉, 30%)과 같은 작은 비율로 시작하여 application/trafficadvice+json MIME 유형으로 제공해야 하는 /.well-known/traffic-advice 파일에 다음 JSON을 추가하여 점진적으로 1.0 (즉, 100%)까지 늘릴 수 있습니다.

[{
  "user_agent": "prefetch-proxy",
  "fraction": 0.3
}]

fraction 필드는 0.0 (미리 가져오기 없음)과 1.0 (미리 가져오기 요청의 100% 통과) 사이의 부동 소수점입니다.

다음 구성을 사용하여 이를 완전히 사용 중지할 수도 있습니다.

[{
  "user_agent": "prefetch-proxy",
  "disallow": true
}]

/.well-known/traffic-advice 파일은 클라이언트가 아닌 프록시에서 가져오며 일반적인 HTTP 캐시 의미 체계에 따라 프록시에 캐시됩니다. 예를 들어 갑작스러운 액세스 대량 증가와 같이 더 많은 유연성을 위해 상태 코드가 503인 미리 가져오기 요청 (Sec-Purpose: prefetch;anonymous-client-ip)을 일시적으로 거부하고 응답에 Cache-Control: no-store 헤더를 설정하는 것이 좋습니다. Retry-After 헤더를 추가하여 미리 가져오기 요청을 다시 시도하기 전에 Chrome에 대기해야 하는 시간을 알릴 수도 있습니다.

리퍼러 웹사이트 소유자의 경우

다른 웹사이트로 연결되는 링크가 많은 웹사이트를 운영하는 경우 비공개 미리 가져오기 프록시 기능을 사용하여 교차 출처 탐색 속도를 높이는 것이 좋습니다. Chrome에서 비공개 미리 가져오기 프록시를 통해 미리 가져와야 할 페이지를 알 수 있도록 페이지에 추정 규칙을 추가해야 합니다. 간단한 예를 들면 다음과 같습니다.

<script type="speculationrules">
{
  "prefetch": [
    "source": "list",
    "urls": ["https://example.com/index.html"],
    "requires": ["anonymous-client-ip-when-cross-origin"]
  ]
}
</script>

다음 단계

이번 출시는 첫 단계에 불과합니다. 커뮤니티의 관심과 의견을 바탕으로 이 기능을 확대하고 개선할 수 있도록 노력하겠습니다. 예를 들어 개발자의 불편을 최소화하면서 쿠키와 로컬 상태를 사용하여 링크로 확장하는 방법이나 리퍼러 웹사이트에서 이 기능을 더 유용하게 만드는 방법에 관한 의견을 보내주시기 바랍니다.

더보기