Beschleunigung von Largest Contentful Paint (LCP) mit websiteübergreifendem Vorabruf
Ab Chrome 103 für Android wird nach und nach eine private Prefetch-Proxy-Funktion eingeführt, um ausgehende Aufrufe von der Google Suche und anderen teilnehmenden Websites im Medianwert um 30% zu beschleunigen. Diese private Prefetch-Proxy-Funktion ermöglicht den Vorabruf von ursprungsübergreifendem Content, ohne dass Nutzerinformationen für die Zielwebsite offengelegt werden, bis der Nutzer die Seite aufruft.
Lesen Sie weiter, um zu erfahren, wie diese Funktion funktioniert und wie Sie damit die Leistung Ihrer Websites erheblich verbessern können. Largest Contentful Paint (LCP) oder Wie Websites mit Referrer-URL Nutzern beim Erreichen ihrer Ziele helfen können, indem sie die Website-übergreifende Navigation beschleunigen
Funktionsweise des privaten Prefetch-Proxys
Sicherer Kommunikationskanal
Bei dieser Funktion wird ein CONNECT
-Proxy verwendet, um einen sicheren Kommunikationskanal zwischen Chrome und dem Server einzurichten, auf dem die Inhalte gehostet werden, die vorab abgerufen werden sollen. Dieser sichere Kommunikationskanal verhindert, dass der Proxy Datenübertragungen überprüft. Vor allem kann der private Prefetch-Proxy zwar den Hostnamen sehen, um einen sicheren Kommunikationskanal einzurichten, aber weder die vollständigen URLs noch die Ressourcen selbst sieht.
Da der sichere Kommunikationskanal durch Ende-zu-Ende-Verschlüsselung geschützt ist, können Vermittler außerdem weder die Hostnamen noch den Inhalt der vorabgerufenen Websites beobachten. Schließlich verhindert der Proxy grundsätzlich, dass der Zielserver die IP-Adresse des Nutzers sehen kann.
Nutzeridentifikation verhindern
Neben den zuvor beschriebenen Netzwerkaspekten müssen wir auch verhindern, dass Server einen Nutzer beim Vorabruf über zuvor auf ihrem Gerät gespeicherte Informationen identifizieren. Aus diesem Grund beschränkt Chrome derzeit die Nutzung des privaten Prefetch-Proxys auf Websites, für die der Nutzer keine Cookies oder anderen lokalen Status hat. Im Folgenden sind die Einschränkungen für Prefetch-Anfragen über den privaten Prefetch-Proxy aufgeführt:
- Cookies:Prefetch-Anfragen dürfen keine Cookies enthalten.
- Wenn für eine Ressource ein Cookie vorhanden ist, ruft Chrome zwar ohne Anmeldedaten ab, verwendet die Antwort aber nicht. Weitere Informationen dazu finden Sie weiter unten im Abschnitt Caching.
- Antworten auf eine Prefetch-Anfrage können zwar Cookies enthalten, diese Cookies werden jedoch nur gespeichert, wenn der Nutzer die vorabgerufene Seite aufruft.
- Fingerabdrücke:Andere Oberflächen, die für die Fingerabdruckerkennung verwendet werden können, werden ebenfalls angepasst. Beispielsweise enthält der vom Prefetch-Proxy gesendete Header
User-Agent
nur begrenzte Informationen.
In Zukunft möchten wir den privaten Prefetch-Proxy auf Links mit Cookies oder dem lokalen Status unter Beibehaltung der Datenschutzeigenschaften ausweiten. Weitere Informationen finden Sie im Abschnitt Weitere Informationen.
Caching
Chrome ruft Ressourcen vorab ab, auch wenn sie sich bereits im Cache befinden, aber sie enthalten keine bedingten Header wie ETag
oder If-Modified-Since
. Diese enthalten vom Server festgelegte Werte, die auch ohne Cookies für das Tracking verwendet werden können. Dieser Prefetch dient dazu, ein Datenleck des Cache-Status eines Clients bei der Prefetch-Website zu verhindern. Darüber hinaus speichert Chrome eine vorabgerufene Ressource nur dann im Cache, wenn der Nutzer die vorabgerufene Website aufrufen möchte.
Erste Schritte mit dem privaten Prefetch-Proxy
Für Websiteinhaber
Websiteinhaber müssen nichts weiter tun, um von einem privaten Prefetch-Proxy für Links zu profitieren, für die der Nutzer keine Cookies oder keinen lokalen Status hat. Unsere Tests haben gezeigt, dass dies für die meisten Websites eine bedeutende Chance darstellt. Außerdem ist es eine gute Idee, Erstbesucher oder unregelmäßige Besucher mit einem superschnellen Laden zu beeindrucken. Frühere Tests haben gezeigt, dass Largest Contentful Paint um 20% bis 30% schneller bei vorabgerufenen Aufrufen erzielt wurde.
Wir hoffen, diese Funktion in Zukunft unter Beibehaltung der Datenschutzfunktionen auf Links mit Cookies oder lokalen Bundesstaaten auszuweiten. Die Herausforderung bei Cookies besteht darin, dass sie dazu verwendet werden können, die Nutzererfahrung auf schwer vorhersehbare Weise zu verändern. Daher müssen Websiteinhaber ihre Website wahrscheinlich aktivieren oder anpassen, um vom privaten Prefetch-Proxy für Links mit Cookies zu profitieren.
Während für die Prefetch-Anfragen keine Anmeldedaten vorhanden sind, erhält die Webseite Zugriff auf Cookies und andere lokale Status, wenn der Nutzer zu ihr navigiert. Entwickler können diese Funktion nutzen, um die Personalisierung und die Änderungen basierend auf Cookies oder dem lokalen Status wieder hinzuzufügen. Oder vielleicht möchten Entwickler auch daran interessiert sein, bestimmte Ressourcen als absolut in Ordnung für den Prefetch und die Verwendung in der vorliegenden Form zu deklarieren, also ohne Cookies (d. h. Ressourcen, die keine Cookies benötigen). Im Abschnitt Nächste Schritte finden Sie weitere Informationen und Informationen zur Planung.
Geoabhängige Inhalte oder Dienste
Wenn sich Ihre Website je nach IP-Adresse des Nutzers in verschiedenen Märkten unterschiedlich verhält (zum Beispiel unterschiedliche Inhalte oder selektiven Zugriff), fragen Sie sich vielleicht, wie Sie mit den Prefetch-Anfragen des privaten Prefetch-Proxys umgehen sollen. Es ist wichtig zu wissen, dass der private Prefetch-Proxy von mehreren Servern betrieben wird, die über die ganze Welt verteilt sind, und dass die IP-Adresse des Proxys das Land ermittelt, von dem aus der Nutzer einen Prefetch initiiert hat.
Daher empfehlen wir Ihnen vor diesem Hintergrund Folgendes:
- Identifizieren Sie Prefetch-Anfragen vom privaten Prefetch-Proxy anhand eines
Sec-Purpose: Prefetch; anonymous-client-ip
-HTTP-Headers. - Suchen Sie die Standortbestimmung des privaten Prefetch-Proxys, der die Anfrage über seine IP-Adresse ausgegeben hat. Eine aktuelle Liste der eingeführten Regionen und der entsprechenden IP-Adressen finden Sie hier.
- Liefern Sie Ressourcen entsprechend dem Markt, der mit diesem speziellen Standort verbunden ist.
Verkehrsüberwachung
Aus früheren Experimenten wissen wir, dass diese Funktion in der Regel zu weniger als 2% zusätzlichen Anfragen für Hauptressourcen (z. B. HTML-Dokumente) führt. Wenn Sie jedoch vorsichtig sind, können Sie das Bruchteilfeld des Traffic-Hinweises verwenden, um zu steuern, wie viel Traffic der private Prefetch-Proxy durchlassen soll. Sie können mit einem kleinen Bruchteil wie 0,3 (d. h. 30%) beginnen und ihn schrittweise auf 1,0 (also 100%) erhöhen. Fügen Sie dazu die folgende JSON-Datei in eine /.well-known/traffic-advice
-Datei ein, die mit dem MIME-Typ application/trafficadvice+json
bereitgestellt werden muss:
[{
"user_agent": "prefetch-proxy",
"fraction": 0.3
}]
Das Feld fraction
ist eine Gleitkommazahl zwischen 0,0 (überhaupt kein Prefetch) und 1,0 (100% der Prefetch-Anfragen werden weitergeleitet).
Es ist auch möglich, diese Funktion mit der folgenden Konfiguration vollständig zu deaktivieren:
[{
"user_agent": "prefetch-proxy",
"disallow": true
}]
Die Datei /.well-known/traffic-advice
wird vom Proxy und nicht vom Client abgerufen und gemäß der üblichen HTTP-Cache-Semantik am Proxy zwischengespeichert. Wenn Sie mehr Flexibilität wünschen, z. B. bei einer plötzlichen Spitzenlast mit starkem Zugriff, können Sie Prefetch-Anfragen (Sec-Purpose: prefetch;anonymous-client-ip
) mit einem 503-Statuscode vorübergehend ablehnen und den Cache-Control: no-store
-Header für die Antwort festlegen. Sie können auch den Header Retry-After
hinzufügen, um Chrome mitzuteilen, wie lange gewartet werden soll, bevor Prefetch-Anfragen wiederholt werden.
Für Inhaber von Websites mit Referrer-URL
Wenn Sie eine Website mit vielen Links zu anderen Websites betreiben, können Sie diese ursprungsübergreifenden Navigationen mit dem privaten Prefetch-Proxy beschleunigen. Sie müssen Ihren Seiten Spekulationsregeln hinzufügen, damit Chrome weiß, welche Seite Ihrer Meinung nach über den privaten Prefetch-Proxy vorab abgerufen werden sollte. Hier ist ein einfaches Beispiel:
<script type="speculationrules">
{
"prefetch": [
"source": "list",
"urls": ["https://example.com/index.html"],
"requires": ["anonymous-client-ip-when-cross-origin"]
]
}
</script>
Nächste Schritte
Diese Einführung ist nur ein erster Schritt. Wir hoffen, diese Funktion aufgrund des Interesses und des Feedbacks der Community ausweiten und verbessern zu können. Wir würden uns zum Beispiel gern Feedback dazu geben, wie wir auf Links mit Cookies und lokalen Status umsteigen, um den Aufwand für die Entwickler zu minimieren, oder wie wir diese Funktion für Referrer-Websites noch nützlicher machen können.