Early Hints

Early Hints ist ein Webstandard, den du implementieren kannst, um die Ladezeiten von Seiten um bis zu 30% zu verbessern. Dieser Webstandard definiert einen neuen HTTP-Statuscode: 103 Early Hints.

Wenn die Funktion Early Hints aktiviert ist und ein Besucher deine Seite in einem kompatiblen Browser aufruft, werden 103-Antworten (vor 200-Antworten) mit Informationen über verlinkte Elemente, die in der endgültigen Antwort des Servers erscheinen könnten, an den Browser gesendet. Mit diesen Informationen kann der Browser mit der Vorbereitung der Seite beginnen, bevor er die 200 OK-Antwort vom Server erhält. So kann der Browser die Seite effizienter auf das Laden vorbereiten, während der Server noch „denkt“.

Der Early Hints-Mechanismus kann mit jeder Art von Link-Header oder Ressourcenhinweis verwendet werden, z. B. preload und preconnect. Er hilft dabei, die Leistung von Webseiten zu verbessern, indem er Browsern erlaubt, mit dem Abrufen oder Vorbereiten von Ressourcen zu beginnen, bevor die endgültige Antwort empfangen wird.

Als Teil der Cloudflare-Integration von Kinsta können Early Hints für deine WordPress-Seite in MyKinsta für deine benutzerdefinierte Domain aktiviert werden. Du kannst Early Hints nicht mit einer temporären kinsta.cloud-Domain verwenden.

Preload und Preconnect

Early Hints is primarily designed to work with resource hints such as preload and preconnect. It can be used to enhance the effectiveness of preload and preconnect by sending these hints to the browser as soon as the initial request is made.

Early Hints sind in erster Linie für die Verwendung mit Ressourcenhinweisen wie „preload“ und „preconnect“ gedacht. Sie können die Effektivität von preload und preconnect verbessern, indem sie diese Hinweise an den Browser senden, sobald die erste Anfrage gestellt wird.

• Preload: Sagt dem Browser, dass er eine Ressource so schnell wie möglich laden soll. Early Hints schickt dem Browser frühzeitig Hinweise zum Vorladen, damit er wichtige Ressourcen (z. B. CSS, JavaScript) sofort abrufen kann. Das reduziert die Zeiten, in denen das Rendern blockiert ist, und verbessert die Performance.
• Preconnect: Baut frühzeitig Verbindungen zu wichtigen Drittanbietern auf. Early Hints sendet frühzeitig preconnect-Hinweise, damit der Browser Netzwerkverbindungen (DNS-Lookup, TLS-Verhandlung) im Voraus aufbauen kann. Das reduziert die Latenz bei den eigentlichen Anfragen und sorgt für schnellere Ladezeiten der Seiten.

Um Preload und Preconnect effektiv zu nutzen, musst du bestimmte Link-Header zu den Assets hinzufügen, die du für das Vorladen markieren möchtest. Du kannst ein WordPress-Plugin verwenden, um preload– oder preconnect-Header zu deinen Assets in WordPress hinzuzufügen, z. B. WP Rocket, Perfmatters oder Pre* Party Resource Hints.

Wichtige Hinweise

1. Deine Seite muss den Antwort-Header Link: mit dem rel-Typpreload oder preconnect haben, um die Ressourcen anzugeben, die du in die Early Hints-Antwort aufnehmen willst. Du kannst ein WordPress-Plugin verwenden, um preload– oder preconnect-Header zu deinen Assets in WordPress hinzuzufügen.
2. Der Statuscode 103 Early Hints ist mit den neuesten Versionen von Chrome, Edge, Safari und Firefox kompatibel. Wenn ein Browser Early Hints nicht unterstützt und ein 103-Response-Header an ihn gesendet wird, passiert nichts; der Browser ignoriert ihn einfach.
3. Wenn deine Website mehr als 20 Domains hat, kann die Aktivierung von Early Hints je nach Gesamtzahl der Domains 5 oder mehr Minuten dauern.
4. Du kannst Early Hints nicht mit einer temporären kinsta.cloud-Domain verwenden.

Early Hints aktivieren

1. Um Early Hints zu aktivieren, logge dich bei MyKinsta ein und gehe zu WordPress Seiten > Seitenname > Werkzeuge.
2. Klicke unter Early Hints auf die Schaltfläche Aktivieren.

In der oberen rechten Ecke erscheint eine Benachrichtigung, dass Early Hints aktiviert ist.

Teste Early Hints

Um festzustellen, ob Early Hints funktionieren, überprüfe die HTTP-Header einer Seite auf deiner Website und suche nach Link:-Headern mit dem rel-Typ preload oder preconnect, die du hinzugefügt hast. Um die HTTP-Header deiner Seite zu überprüfen, kannst du eine der folgenden Methoden verwenden:

• Unseren kostenlosen HTTP-Status- und Weiterleitungs-Checker.
• Die eingebauten Entwicklertools deines Webbrowsers.
• Den Befehl curl im Terminal (Kommandozeile), indem du die URL am Ende des Beispiels durch die URL der Seite ersetzt, die du testen willst:

curl -L -s -o /dev/null -D - https://kinstaexample.com

Early Hints deaktivieren

1. Um Early Hints zu deaktivieren, melde dich bei MyKinsta an und gehe zu WordPress Seiten > Seitenname > Werkzeuge.
2. Klicke unter Early Hints auf die Schaltfläche Deaktivieren.

In der oberen rechten Ecke erscheint eine Benachrichtigung, dass Early Hints deaktiviert ist.