Largest Contentful Paint (LCP) durch websiteübergreifendes Prefetching beschleunigen
Ab Chrome 103 für Android wird nach und nach eine Funktion für einen privaten Prefetch-Proxy in Chrome eingeführt, um ausgehende Navigationen über die Google Suche und andere teilnehmende Websites im Medianwert um 30% zu beschleunigen. Diese private Prefetch-Proxy-Funktion ermöglicht den Vorabruf von ursprungsübergreifenden Inhalten, ohne dass Nutzerinformationen für die Zielwebsite offengelegt werden, bis der Nutzer die Website aufruft.
Im Folgenden erfahren Sie, wie diese Funktion funktioniert, wie sie den Largest Contentful Paint (LCP) Ihrer Websites erheblich verbessern kann und wie Nutzer mit Verweis-URLs ihre Ziele erreichen können, indem sie die websiteübergreifende Navigation beschleunigen.
Funktionsweise des privaten Prefetch-Proxys
Sicherer Kommunikationskanal
Diese Funktion nutzt einen CONNECT
-Proxy, um einen sicheren Kommunikationskanal zwischen Chrome und dem Server einzurichten, auf dem die Inhalte für den Prefetch gehostet werden. Dieser sichere Kommunikationskanal verhindert, dass der Proxy Datenübertragungen prüft. Der private Prefetch-Proxy kann zwar den Hostnamen sehen, um einen sicheren Kommunikationskanal einzurichten, aber weder die vollständigen URLs noch die Ressourcen selbst.
![Animation, die den Datenfluss durch einen Proxy zeigt](https://developer.chrome.com/static/blog/private-prefetch-proxy/images/prefetch.png?authuser=6&hl=de)
CONNECT
-Proxy verhindert, dass Nutzerinformationen offengelegt werden.Da der sichere Kommunikationskanal außerdem durch Ende-zu-Ende-Verschlüsselung geschützt ist, können die Mittler weder die Hostnamen noch den Inhalt der vorab abgerufenen Websites beobachten. Schließlich hindert der Proxy den Zielserver an, die IP-Adresse des Nutzers zu sehen.
Benutzeridentifikation verhindern
Abgesehen von den zuvor beschriebenen Netzwerkaspekten müssen Server auch daran hindern, Nutzer beim Prefetch-Zeitpunkt anhand der zuvor auf ihrem Gerät gespeicherten Informationen zu identifizieren. Zu diesem Zweck beschränkt Chrome derzeit die Nutzung des privaten Prefetch-Proxys auf Websites, für die der Nutzer keine Cookies oder anderen lokalen Status hat. Dies sind die Einschränkungen für Prefetch-Anfragen über den privaten Prefetch-Proxy:
- Cookies:Prefetch-Anfragen dürfen keine Cookies enthalten.
- Wenn für eine Ressource ein Cookie vorhanden ist, führt Chrome einen Abruf ohne Anmeldedaten durch, verwendet die Antwort aber nicht (siehe Abschnitt Caching weiter unten).
- Antworten auf eine Prefetch-Anfrage können zwar Cookies enthalten, diese werden jedoch nur gespeichert, wenn der Nutzer die Prefetch-Seite aufruft.
- Fingerabdruck:Andere Oberflächen, die für die Fingerabdruckerkennung verwendet werden können, werden ebenfalls angepasst. Beispielsweise enthält der vom Prefetch-Proxy gesendete
User-Agent
-Header nur begrenzte Informationen.
Wir hoffen, den privaten Prefetch-Proxy in Zukunft auf Links mit Cookies oder mit dem lokalen Status ausweiten zu können, ohne die Datenschutzeigenschaften zu überschreiten. Weitere Informationen finden Sie im Abschnitt Weitere Informationen.
Caching
Chrome ruft Ressourcen vorab ab, selbst 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. Durch diesen Vorabruf soll verhindert werden, dass der Cache-Status eines Clients an die Prefetch-Website weitergegeben wird. Außerdem wird eine vorab abgerufene Ressource von Chrome nur dann dem Cache zugewiesen, wenn der Nutzer beschließt, die vorabgerufene Website aufzurufen.
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 weder Cookies noch einen lokalen Status hat. Unsere Tests haben ergeben, dass dies für die meisten Websites eine große Chance ist. Außerdem ist es immer eine gute Idee, erstmalige oder seltene Besucher mit einer superschnellen Ladezeit zu beeindrucken. Bei früheren Tests haben wir festgestellt, dass Largest Contentful Paint bei Prefetch-Navigationen um 20 bis 30 % schneller war.
Wir hoffen, diese Funktion in Zukunft auf Links mit Cookies oder lokalen Bundesstaaten ausweiten zu können, wobei die Datenschutzmerkmale beibehalten werden. Die Herausforderung bei Cookies ist, dass sie dazu dienen, die Nutzererfahrung nur schwer vorhersehbar zu beeinflussen. Websiteinhaber müssen also höchstwahrscheinlich zustimmen oder ihre Website anpassen, um vom privaten Prefetch-Proxy für Links mit Cookies zu profitieren.
Die Prefetch-Anfragen bleiben zwar ohne Anmeldedaten, aber die Webseite erhält Zugriff auf Cookies und andere lokale Status, wenn der Nutzer zu ihr navigiert. Entwickler könnten diese Funktion nutzen, um die Personalisierung und Änderungen basierend auf Cookies oder dem lokalen Status wieder hinzuzufügen. Vielleicht möchten Entwickler auch festlegen, dass bestimmte Ressourcen ohne Cookies (also Ressourcen, die nicht von Cookies abhängig sind) so deklariert werden können, dass sie im Vorfeld abgerufen und ohne Cookies genutzt werden können. Im Abschnitt Weitere Informationen finden Sie weitere Informationen und können unseren Plan entsprechend anpassen.
Standortabhängige Inhalte oder Dienste
Wenn sich Ihre Website je nach IP-Adresse des Nutzers je nach Markt unterschiedlich verhält (z. B. unterschiedliche Inhalte oder selektiver Zugriff), fragen Sie sich vielleicht, wie die Prefetch-Anfragen des privaten Prefetch-Proxys gehandhabt werden sollen. Es ist wichtig zu wissen, dass der private Prefetch-Proxy von mehreren Servern auf der ganzen Welt unterstützt wird und dass die IP-Adresse des Proxys dem Land zugeordnet wird, von dem aus der Nutzer den Prefetch initiiert hat.
Vor diesem Hintergrund empfehlen wir Folgendes:
- Prefetch-Anfragen vom privaten Prefetch-Proxy werden durch den HTTP-Header
Sec-Purpose: Prefetch; anonymous-client-ip
identifiziert. - Suchen Sie die Standortbestimmung des privaten Prefetch-Proxys, der die Anfrage über seine IP-Adresse gesendet hat. In dieser Ressource finden Sie eine aktuelle Liste der eingeführten Regionen und die entsprechenden IP-Adressen.
- Liefern Sie Ressourcen in Übereinstimmung mit dem Markt, der mit diesem speziellen Standort verbunden ist.
Verkehrsüberwachung
Aus früheren Tests wissen wir, dass diese Funktion in der Regel weniger als 2% mehr Anfragen nach Hauptressourcen (z. B. HTML-Dokumenten) zur Folge hat. Wenn Sie jedoch vorsichtig sind, können Sie mit dem Feld für den Bruch in der Traffic-Empfehlung steuern, wie viel Traffic der private Prefetch-Proxy durchlassen soll. Sie können mit einem kleinen Bruchteil wie 0,3 (also 30%) beginnen und diesen schrittweise auf 1,0 (d. h. 100%) erhöhen. Fügen Sie dazu den folgenden JSON-Code in die Datei /.well-known/traffic-advice
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 zugestellt).
Mit der folgenden Konfiguration ist es auch möglich, dies 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 im Proxy gespeichert. Für mehr Flexibilität, z. B. bei einem plötzlichen starken Anstieg des Zugriffs, können Sie Prefetch-Anfragen (Sec-Purpose: prefetch;anonymous-client-ip
) mit dem Statuscode 503 vorübergehend ablehnen und den Cache-Control: no-store
-Header in der Antwort festlegen. Sie können auch den Retry-After
-Header hinzufügen, um Chrome mitzuteilen, wie lange gewartet werden soll, bevor Prefetch-Anfragen wiederholt werden.
Für Inhaber von Verweis-Websites
Wenn Sie eine Website mit vielen Links zu anderen Websites betreiben, ist es möglicherweise interessant, die Funktion „Privater Prefetch-Proxy“ zu verwenden, um diese ursprungsübergreifende Navigation zu beschleunigen. Sie müssen Ihren Seiten Spekulationsregeln hinzufügen, damit Chrome erkennt, welche Seite Ihrer Meinung nach über den privaten Prefetch-Proxy vorab abgerufen werden soll. Hier 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 basierend auf dem Interesse und dem Feedback der Community ausweiten und verbessern zu können. Wir würden uns zum Beispiel sehr über Feedback dazu freuen, wie die Erweiterung auf Links mit Cookies und den lokalen Status verbessert werden kann, um Probleme für Entwickler zu minimieren, oder Möglichkeiten, diese Funktion für Verweis-Websites noch nützlicher zu machen.