Eine Einführung in leicht verfügbare Technologien.
Warum ist die Ladegeschwindigkeit wichtig?
Die meisten Nutzer empfinden langsame Seitenladezeiten als Hauptursache für Frust (54% in einer von Google durchgeführten Nutzerstudie). Daher überrascht es nicht, dass schnellere Seitenladezeiten zu besseren Geschäftsergebnissen führen. Wenn Besucher bereits vor der Interaktion mit einer Website frustriert sind, ist es höchst unwahrscheinlich, dass sie lange genug bleiben, um ihren Wert zu schätzen. Laut einer anderen Google-Studie zu 254 E-Commerce-, Finanz- und Reisewebsites ist die Conversion-Rate bei Websites, die innerhalb von maximal zwei Sekunden geladen werden, um 15% höher.
Largest Contentful Paint (LCP) beschleunigen
Was man nicht misst, kann auch nicht verbessert werden. Wir sind der Meinung, dass die Core Web Vitals eine solide Reihe nutzerorientierter Messwerte darstellen, um grundlegende Aspekte der Nutzererfahrung im Web zu erfassen. Mit dem Largest Contentful Paint (LCP) wird insbesondere die Ladeleistung Ihrer Seiten gemessen. Dazu wird die Zeit erfasst, die zum Anzeigen des größten Text- oder Bildblocks benötigt wird, den der Nutzer sieht. Für eine gute Nutzererfahrung sollte der LCP innerhalb von 2,5 Sekunden nach dem ersten Laden der Seite – dem Grenzwert für einen guten LCP-Wert – stattfinden.
Sehen wir uns an, was zum LCP einer typischen Seite beiträgt.
Wenn ein Nutzer eine Seite besucht, fordert der Browser den HTML-Code vom Server an. Der Server antwortet mit dem HTML-Code, wodurch der Browser mehr Hinweise darauf erhält, was als Nächstes abgerufen werden soll, einschließlich CSS, JavaScript, Schriftarten und Bildern. Wenn diese Antworten zurückgegeben werden, muss der Browser sie ebenfalls bewerten und schließlich Komponenten auf der Seite anordnen und darstellen. Die meiste Zeit wird jedoch damit verbracht, darauf zu warten, dass diese Pakete vom Gerät zum Server und dann zurück zum Gerät gesendet werden. Unsere Daten (Chrome für Android, Medianwert) zeigen, dass der Browser normalerweise etwa 40% der für den Nutzer sichtbaren Latenzen benötigt, um darauf zu warten, dass das allererste Byte vom Server zurückgegeben wird.
Die Möglichkeiten des Vorabrufs
Wenn man alle diese Dateien vorab abrufen könnte, d. h. sie abrufen könnte, bevor der Nutzer die Seite besucht, würde dies die Geschwindigkeit enorm steigern. Es sind nur noch ein paar Aufgaben übrig, bevor die Seite angezeigt wird: Auswerten, Berechnen des Layouts und Malen.
Mit den zuvor freigegebenen Daten könnte man auch einfach die Hauptressource vorab abrufen und dennoch einen deutlich schnelleren Seitenaufbau erzielen. Am selben Standort ist diese Art von Verfahren ohne Weiteres mit Primitiven wie rel=prefetch verfügbar. Bei websiteübergreifenden Szenarien ist das jedoch nicht so einfach.
Websiteübergreifende Navigation
Der Vorabruf gibt es zwar schon eine Weile, aber beim Vorabruf von Seiten von einer Website, während der Nutzer sich auf einer anderen befindet, ist eine zusätzliche Überlegung erforderlich.
Angenommen, eine Verweis-Website soll den Browser anweisen, eine Seite von einer anderen Website vorab abzurufen. Klickt der Nutzer auf den Link zu dieser vorabgerufenen Seite, wird die Nutzererfahrung deutlich verbessert, da die Seite viel schneller geladen wird. Was passiert jedoch, wenn der Nutzer nie auf diesen Link klickt? Er sollte nicht erwarten, dass eine verlinkte Website erfährt, dass sie sich für ein bestimmtes Thema interessiert hat, während sie auf der Verweis-Website danach recherchiert hat. Dennoch ist dies ein erhebliches Risiko, da die Prefetch-Anfragen wie jede andere reguläre Anfrage die IP-Adresse des Nutzers und ggf. Cookies enthalten.
Lösungen
Wir haben in den letzten drei Jahren zwei Lösungen entwickelt, um den datenschutzkonformen websiteübergreifenden Prefetch zu ermöglichen: Private Prefetch Proxy und Signed Exchanges (SXG). Außerdem haben wir in einem groß angelegten Test festgestellt, dass ursprungsübergreifender Prefetch zu deutlichen Geschwindigkeitsvorteilen führt. Konkret sahen wir Fälle, in denen Google den Haupt-HTML-Code für die nächste Navigation des Nutzers sicher vorab abrufen konnte, dass der Anteil der Seitenladevorgänge mit dem „guten“ LCP um 14 Prozentpunkte gestiegen ist.
Wichtige Überlegungen
Der private Prefetch-Proxy und Signed Exchange lösen zwar denselben Anwendungsfall, aber jede Technologie hat andere Nachteile. Die beste Wahl hängt also wirklich von den spezifischen Anforderungen Ihrer Website ab. In den folgenden Abschnitten werden zwei wichtige Aspekte für das Aktivieren des websiteübergreifenden Prefetchings und die Auswahl zwischen den beiden verfügbaren Technologien beschrieben, damit Sie sich ein Bild von den damit verbundenen Vor- und Nachteilen machen können. Weitere Details finden Sie auch in den ausführlichen Artikeln zu den einzelnen Technologien.
Wiederkehrende Besucher
Der websiteübergreifende Vorabruf ist für Nutzer, die Ihre Website zum ersten Mal besuchen, ganz einfach aktivieren. Bei wiederkehrenden Besuchern kommt es darauf an, wie stark die Personalisierung auf Ihrer Website erfolgt. Das liegt daran, dass bei websiteübergreifenden Prefetch-Anfragen aus Datenschutzgründen keine Cookies verwendet werden dürfen.
- Für Erstbesucher stellt diese Einschränkung keine Herausforderung dar, da für diese Besucher zu Beginn keine Cookies vorhanden sind. Daher können Sie für diese Nutzer den websiteübergreifenden Vorabruf aktivieren, ohne dass Änderungen an Ihrer Website erforderlich sind.
- Wenn Sie den websiteübergreifenden Vorabruf für wiederkehrende Besucher aktivieren möchten und Ihre Website anhand von Cookies personalisiert wird, müssen Sie diese personalisierten Elemente nach der Navigation des Nutzers per Lazy Loading laden. Dies funktioniert, weil die Einschränkung für Cookies nach der Navigation nicht mehr erforderlich ist, da der Nutzer sich explizit dafür entschieden hat, Ihre Website zu besuchen. Während der Navigation hat Ihre Website also wie gewohnt Zugriff auf ihre Cookies. Konkrete Empfehlungen finden Sie in den Best Practices für Lazy Loading.
- Wenn Sie die Personalisierung derzeit direkt in Ihrem HTML-Code codieren, können Sie das weiterhin tun, sofern Cookies vorhanden sind, und Lazy Loading als Fallback-Strategie für Prefetch-Seiten verwenden.
- Wenn Ihre Website nicht anhand von Cookies personalisiert wird oder die Personalisierung keine entscheidende Rolle spielt, können Sie für wiederkehrende Besucher dieselben Inhalte wie für Erstbesucher bereitstellen.
Derzeit ist der private Prefetch-Proxy nur für Erstbesucher aktiviert (Links ohne Cookies), wobei kontinuierlich daran gearbeitet wird, die Abdeckung auf wiederkehrende Besucher auszuweiten (Links mit Cookies). Signed Exchange hingegen unterstützt bereits den websiteübergreifenden Vorabruf sowohl für Erst- als auch für wiederkehrende Besucher, wie oben beschrieben.
Zusätzliche Datenbereitstellung durch Prefetch
Das Aktivieren des websiteübergreifenden Vorabrufs kann zu einer zusätzlichen Datenbereitstellung führen. Wenn eine Verweis-URL Ihre Seite vorab abruft, der Nutzer jedoch nicht auf den Link klickt, bedeutet dies tatsächlich zusätzlichen Traffic für Sie.
- Um dieses Problem zu beheben, könnten Sie verlangen, dass die Referrer-URL weniger aggressiv mit ihren Prefetch-Anfragen umgeht. In ähnlicher Weise können die Referrer-URL bzw. der Browser dieses Problem abmildern, indem sie sich auf relativ einfache, aber dennoch kritische Ressourcen konzentrieren (z. B. Hauptressource, kritische CSS- oder JavaScript-Unterressourcen). Dies ist im Wesentlichen ein Kompromiss zwischen Geschwindigkeitsvorteilen und zusätzlichem Traffic.
- Alternativ können Sie diesen Traffic durch zusätzliches Caching ausgleichen. Weitere Informationen finden Sie in diesem Abschnitt zu Signed Exchange. Der Nachteil wäre, dass ein zu langes Caching von Inhalten dazu führen kann, dass Ihren Nutzern ältere Informationen angezeigt werden. Dabei handelt es sich im Wesentlichen um einen Kompromiss zwischen zusätzlicher Datenbereitstellung und Aktualität der Inhalte.
Um hier die beste Entscheidung zu treffen, sollten Sie sich fragen, an welcher Stelle Ihre Website auf der gleitenden Skala zwischen maximaler Aktualität und minimalen zusätzlichen Anfragen liegt. Die Antwort auf diese Frage hängt letztendlich von den spezifischen Anforderungen Ihres Unternehmens und Ihrer Nutzer ab.
Erste Schritte
Diese Technologien wurden in die Google Suche integriert, sodass Websites ihren LCP sofort verbessern können. Wir hoffen, dass wir dadurch auch andere beliebte Empfehlungskunden anregen, unserem Beispiel zu folgen, und dazu beitragen, dass das Web in allen Bereichen viel schneller wird.
Beide Technologien lösen zwar den gleichen Anwendungsfall, bieten aber unterschiedliche Vor- und Nachteile im Hinblick auf die oben erläuterten wichtigen Überlegungen. Sie können sich sogar dafür entscheiden, mit einer Technologie zu beginnen und dann zur anderen zu wechseln, wenn sich Ihre Bedürfnisse oder die Vorteile der Vorteile weiterentwickeln. Sehen Sie sich diese ausführlichen Informationen an, um herauszufinden, welche Technologie für Ihre jeweilige Situation am besten in die Zukunft geeignet ist: