Beschleunigung von Largest Contentful Paint (LCP) mit websiteübergreifendem Vorabruf
Ab Chrome 103 für Android wird in Chrome nach und nach eine private prefetch-Proxy-Funktion eingeführt, um ausgehende Navigationen von der Google Suche und anderen teilnehmenden Websites im Median um 30% zu beschleunigen. Diese Funktion für private prefetch-Proxys ermöglicht das Vorabladen von inhaltsübergreifenden Inhalten, ohne dass Nutzerinformationen der Zielwebsite offengelegt werden, bis der Nutzer die Seite aufruft.
Im Folgenden erfahren Sie, wie diese Funktion funktioniert, wie Sie damit den Largest Contentful Paint (LCP) Ihrer Website deutlich verbessern können und wie Verweiswebsites ihren Nutzern helfen können, ihre Ziele zu erreichen, indem sie die websiteübergreifende Navigation beschleunigen.
So funktioniert der Private Prefetch Proxy
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 eine Datenübertragung prüft. Der Private Prefetch-Proxy muss zwar den Hostnamen sehen, um einen sicheren Kommunikationskanal herzustellen, er sieht aber weder die vollständigen URLs noch die Ressourcen selbst.
CONNECT-Proxy wird das Auslaufen von Nutzerdaten verhindert.Da der sichere Kommunikationskanal Ende-zu-Ende-verschlüsselt ist, können Zwischenhändler weder die Hostnamen noch den Inhalt der vorab geladenen Websites sehen. Außerdem verhindert der Proxy, dass der Zielserver die IP-Adresse des Nutzers sieht.
Nutzeridentifikation verhindern
Neben den bereits erwähnten Netzwerkaspekten müssen wir auch verhindern, dass Server einen Nutzer zum Zeitpunkt des Prefetching anhand von Informationen identifizieren, die zuvor auf seinem Gerät gespeichert wurden. Aus diesem Grund beschränkt Chrome derzeit die Verwendung des privaten Prefetch-Proxys auf Websites, für die der Nutzer keine Cookies oder anderen lokalen Statusinformationen hat. Hier sind die Einschränkungen für prefetch-Anfragen über den privaten prefetch-Proxy:
- Cookies:Prefetch-Anfragen dürfen keine Cookies enthalten.
- Wenn es ein Cookie für eine Ressource gibt, 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 vorab geladene Seite aufruft.
- Fingerabdruckerkennung: Auch andere Oberflächen, die für die Fingerabdruckerkennung verwendet werden könnten, werden angepasst. Der vom Prefetch-Proxy gesendete
User-Agent-Header enthält beispielsweise nur begrenzte Informationen.
Wir hoffen, den privaten Prefetch-Proxy in Zukunft auf Links mit Cookies oder lokalem Status auszuweiten und dabei dieselben Datenschutzmerkmale beizubehalten. Weitere Informationen finden Sie im Abschnitt Nächste Schritte.
Caching
Chrome lädt Ressourcen vorab, auch wenn sie sich bereits im Cache befinden. Sie enthalten jedoch keine sitzungsspezifischen Header wie ETag oder If-Modified-Since. Diese enthalten serverseitig festgelegte Werte, die auch ohne Cookies für das Tracking verwendet werden können. Durch dieses Vorabladen wird verhindert, dass der Cache-Status eines Clients an die vorab geladene Website weitergegeben wird. 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 unternehmen, 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 große Chance ist. Außerdem ist es immer eine gute Idee, Erstbesucher oder seltene Besucher mit einer superschnellen Ladezeit zu beeindrucken. In früheren Tests haben wir festgestellt, dass die Largest Contentful Paint bei vorab gepufferten Navigationen um 20 bis 30 % schneller war.
Wir hoffen, diese Funktion in Zukunft auch auf Links mit Cookies oder lokalem Status auszuweiten und dabei die Datenschutzaspekte beizubehalten. Das Problem mit Cookies besteht darin, dass sie verwendet werden können, um 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.
Konkret: Während die prefetch-Anfragen weiterhin ohne Anmeldedaten bleiben, erhält die Webseite Zugriff auf Cookies und anderen lokalen Status, wenn der Nutzer sie aufruft. Entwickler können diese Funktion nutzen, um die Personalisierung und Änderungen auf Grundlage von Cookies oder dem lokalen Status wiederherzustellen. Vielleicht möchten Entwickler auch bestimmte Ressourcen als geeignet für das Vorabladen und die Verwendung ohne Cookies deklarieren, also Ressourcen, die nicht von Cookies abhängen. Im Abschnitt Nächste Schritte finden Sie weitere Informationen und Informationen zur Planung.
Standortabhängige Inhalte oder Dienstleistungen
Wenn sich Ihre Website je nach Markt unterschiedlich verhält (z. B. unterschiedliche Inhalte oder selektiver Zugriff), je nachdem, welche IP-Adresse der Nutzer hat, fragen Sie sich vielleicht, wie Sie mit den Prefetch-Anfragen des Private Prefetch Proxy 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 Folgendes:
- Identifizieren Sie Prefetch-Anfragen vom privaten Prefetch-Proxy anhand eines
Sec-Purpose: Prefetch; anonymous-client-ip-HTTP-Headers. - Rufen Sie die Geolokalisierung des privaten Prefetch-Proxy ab, der die Anfrage über seine IP-Adresse gesendet hat. Eine aktuelle Liste der eingeführten Regionen und der entsprechenden IP-Adressen finden Sie in dieser Ressource.
- Ressourcen werden gemäß dem Market ausgeliefert, der mit diesem geografischen Standort verknüpft ist.
Verkehrsüberwachung
Aus früheren Tests 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 lieber auf Nummer sicher gehen, können Sie mit dem Bruchteilfeld der Verkehrsempfehlung festlegen, wie viel Traffic der Private Prefetch Proxy durchlassen soll. Du kannst mit einem kleinen Bruchteil wie 0, 3 (30%) beginnen und ihn schrittweise auf 1,0 (100%) erhöhen. Dazu fügst du einer /.well-known/traffic-advice-Datei, die mit dem MIME-Typ application/trafficadvice+json bereitgestellt werden muss, die folgende JSON-Datei hinzu:
[{
"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 /.well-known/traffic-advice-Datei wird vom Proxy und nicht vom Client abgerufen und gemäß der üblichen HTTP-Cache-Semantik im Proxy im Cache gespeichert. Für mehr Flexibilität, z. B. bei einem plötzlichen Anstieg der Zugriffe, können Sie prefetch-Anfragen (Sec-Purpose: prefetch;anonymous-client-ip) vorübergehend mit dem Statuscode 503 ablehnen und den Header Cache-Control: no-store in der 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 Websiteinhaber von Verweiswebsites
Wenn Sie eine Website mit vielen Links zu anderen Websites betreiben, können Sie die Funktion „Privater Prefetch-Proxy“ verwenden, um diese plattformübergreifenden Navigationen zu 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 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 auf Grundlage des Interesses und des Feedbacks der Community ausweiten und verbessern zu können. Wir würden uns beispielsweise gerne Feedback dazu geben, wie wir auf Links mit Cookies und dem lokalen Status erweitern können, um den Aufwand für die Entwickler zu minimieren, oder wie wir diese Funktion für Referrer-Websites nützlicher gestalten können.