103 Erste Hinweise: Was es ist und wie man es umsetzt

103 Early Hints ist der neue HTTP-Statuscode, der Browsern hilft zu entscheiden, welche Inhalte vorab geladen werden sollen, bevor die Seite überhaupt ankommt.

Nach der ersten Erwähnung durch Cloudflare Ende letzten Jahres gab Google nun offiziell bekannt, dass Early Hints in der Chrome-Version 103 mit Unterstützung für Preload und Preconnect zum Start verfügbar ist:

In den folgenden Zeilen erfahren Sie, was Early Hints genau sind und wie Sie es auf Ihrer Website implementieren können, um die Leistung zu verbessern.

Aber vorher gehen wir einen kurzen Überblick darüber, wie Browser funktionieren und warum es überhaupt einen Bedarf an frühen Hinweisen gab.

Kurz gesagt: Browser, Server und Server-Denkzeit

Damit Sie diese Seite (oder jede andere Seite) laden und den Inhalt lesen können, benötigt Ihr Browser Anweisungen darüber, was zu rendern ist und welche Ressourcen (wie Bilder, Schriftarten, JavaScript-Dateien) abgerufen werden müssen, um das Zeichnen abzuschließen.

Grundsätzlich sendet Ihr Browser eine Anfrage an einen Server, und die Anweisungen zum Laden stammen aus der Antwort des Servers.

Leider kann es zu einer Latenz von ein paar hundert Millisekunden kommen, bis der Server alle Ressourcen gesammelt hat, die zum Kompilieren der gesamten Webseite und zum Zurücksenden an den Browser erforderlich sind.

Dieser Zeitraum wird als „Serverbedenkzeit“ bezeichnet.

Während dieser Serverbedenkzeit sitzt der Browser einfach da und wartet, ohne Inhalte anzuzeigen. Und ich glaube, wir können uns darauf einigen, dass niemand auf einen leeren Bildschirm starren möchte.

Hier kommen die Early Hints ins Spiel.

Was sind frühe Hinweise?

Eine Möglichkeit, die Seitenleistung zu verbessern, ist die Verwendung von Ressourcenhinweisen. Wie der Name schon sagt, geben sie dem Browser „Hinweise“ darauf, welche Ressourcen er später benötigt – zum Beispiel das Vorladen bestimmter Dateien oder das Verbinden mit einem anderen Server.

Wenn Sie sich für das Thema interessieren und mehr erfahren möchten, lesen Sie unseren Artikel zu Ressourcenhinweisen und deren Implementierung.

So großartig es auch klingen mag, Ressourcenhinweise zu verwenden, es gibt einen Haken. Damit der Browser darauf reagieren kann, muss der Server zumindest einen Teil der Seite senden.

Geben Sie frühe Hinweise ein.

Early Hints nutzt die „Server-Denkzeit“, um asynchron Anweisungen an den Browser zu senden, um mit dem Laden kritischer Unterressourcen (wie Stylesheets, kritischer JavaScript-Dateien usw.) zu beginnen oder eine Verbindung mit Ursprüngen herzustellen, die wahrscheinlich auf dem verwendet werden Seite, während der Server die vollständige Antwort kompiliert.

Ohne frühe Hinweise

Einfacher ausgedrückt:

Wenn Early Hints aktiviert ist, sendet der Server zwei Antworten: die erste (HTTP 103 Early Hints-Statuscode), um den Browser anzuweisen, was er sofort mit dem Laden beginnen kann, und die zweite (HTTP 200-Statuscode) ist die vollständige Antwort mit dem Rest Information.

Mit aktivierten frühen Hinweisen

Indem diese Hinweise an den Browser gesendet werden, bevor die vollständige Antwort kompiliert ist, kann der Browser herausfinden, was er tun muss, um die Webseite für den Benutzer schneller zu laden.

Das Endergebnis:

Schnellere Seitenladezeiten und reduzierte vom Benutzer wahrgenommene Latenz.

Wenn Sie nach einer formelleren Erklärung suchen, hat Cloudflare großartige Arbeit geleistet:

Implementieren von frühen Hinweisen auf Ihrer Website

Sie müssen mehrere Schritte unternehmen, um Early Hints erfolgreich auf Ihrer Website zu implementieren.

Schritt 0: Erwägen Sie die Verwendung von link rel =preload oder link rel=preconnect anstelle von Early Hints

Dies ist Schritt 0, denn wenn Ihr Server sofort eine 200-Antwort senden kann, ist das Hinzufügen von Early Hints nutzlos . Wenn Sie stattdessen die 200-Antwort noch weiter beschleunigen möchten, können Sie die Ressourcenhinweise link rel= preload oder link rel=preconnect verwenden .

Der einfachste Weg, um festzustellen, wie schnell Ihr Server die 200-Antwort sendet, ist die Verwendung des Leistungstest-Tools von KeyCDN. Alles, was Sie tun müssen, ist die URL Ihrer Website einzufügen und die Daten abzurufen:

Schritt 1: Identifizieren Sie Ihre Top-Seiten

Falls Schritt 0 für Sie nicht gültig ist und Ihr Server Zeit benötigt, um die Antwort zu generieren, haben Sie alle Voraussetzungen, um mit der Integration der Early Hints fortzufahren.

Der erste Schritt besteht darin, Ihre Top-Landingpages zu identifizieren, oder mit anderen Worten, die Seite, auf der Ihre Benutzer ihre Reise auf Ihrer Website beginnen. Diese Einstiegspunkte sind wichtiger als alle anderen Seiten, da die Wirksamkeit von Early Hints abnimmt, wenn Ihre Besucher durch Ihre Websites navigieren .

Das liegt daran, dass moderne Browser ziemlich gut darin sind, zu erraten, welche Seite der Benutzer als nächstes besuchen wird, und sie haben wahrscheinlich alle Unterressourcen, die sie bei der zweiten oder dritten nachfolgenden Navigation benötigen.

Schritt 2: Identifizieren Sie die kritischen Ursprünge und Unterressourcen, die am meisten zu den wichtigsten Leistungskennzahlen beitragen

Nachdem Sie Ihre Top-Landingpages identifiziert haben, sollten Sie damit fortfahren, herauszufinden, welche Ursprünge und Unterressourcen gute Kandidaten für Preconnect- oder Preload-Hinweise sind. Dies wären Ursprünge und Ressourcen, die massiv zu den Schlüsselkennzahlen wie „Lastest Contentful Paint“ und „First Contentful Paint“ beitragen.

Genauer gesagt sollten Sie nach Unterressourcen suchen, die das Rendering blockieren, wie z. B. synchrones JavaScript, Stylesheets oder sogar Webfonts.

Sie können sie identifizieren, indem Sie Ihre Website durch ein Testtool wie WebPageTest laufen lassen und das Wasserfalldiagramm überprüfen. Alle Render-Blocking-Ressourcen hätten ein „X“ vor sich:

Der einfachste Weg, Unterressourcen zu identifizieren, die für Early Hints geeignet sind, ist, wenn Ihre Hauptressourcen bereits link rel=preconnect oder link rel =preload verwenden. Das sind die perfekten Kandidaten.

Und so können Sie Early Hints manuell zu Ihrer Website hinzufügen.

Aber was ist, wenn Sie nicht über die technischen Fähigkeiten verfügen, um es selbst zu tun?

Nun, es gibt einen einfacheren Weg.

Frühzeitige Hinweise mit Ihrem Cloudflare-Konto aktivieren

Wenn Sie ein Cloudflare-Benutzer sind, können Sie Early Hints über Ihr Dashboard aktivieren, indem Sie die folgenden Schritte ausführen:

1. Melden Sie sich bei Ihrem Cloudflare-Dashboard an und wählen Sie Ihre Domain aus.
2. Klicken Sie im Dashboard auf Geschwindigkeit > Optimierung.
3. Aktivieren Sie unter „Optimierte Bereitstellung“ die Option „Frühe Hinweise“.

Wie Sie vielleicht wissen, wird das integrierte CDN von NitroPack auch von Cloudflare bereitgestellt. Dieser Übergang öffnete uns die Tür, um mit der Arbeit an einer neuen HTML-Edge-Caching-Funktion zu beginnen, die es uns nach ihrer Veröffentlichung ermöglichen wird, allen unseren Kunden die Möglichkeit zu geben, Early Hints zu aktivieren, ohne ein Cloudflare-Konto zu haben.

Wir sind tief im Entwicklungsprozess und arbeiten hart daran, das HTML-Edge-Caching so schnell wie möglich freizugeben. Abonnieren Sie also unseren Newsletter und folgen Sie unserem Blog, um als Erster zu erfahren, wenn wir ihn ankündigen.