Early Hints

Early Hints is een webstandaard die je kunt gebruiken om de laadtijd van pagina’s tot 30% te verbeteren. Deze webstandaard definieert een nieuwe HTTP-statuscode: 103 Early Hints.

Als de feature Early Hints is ingeschakeld, en een bezoeker laadt je site in een compatibele browser, dan worden 103 responses naar de browser gestuurd (vóór 200 antwoorden) met informatie over gelinkte onderdelen die kunnen voorkomen in de uiteindelijke respons van de server. Met deze informatie kan de browser beginnen de pagina voor te bereiden voordat hij het 200 OK antwoord van de server ontvangt. Hierdoor kan de browser de pagina efficiënter voorbereiden op het laden, terwijl de server aan het “denken” is.

Het Early Hints mechanisme kan worden gebruikt met elk type Link-header of bronverwijzing, zoals preload en preconnect. Het helpt de prestaties van webpagina’s te verbeteren door browsers in staat te stellen bronnen op te halen of voor te bereiden voordat de definitieve respons is ontvangen.

Als onderdeel van Kinsta’s Cloudflare integratie kan Early Hints worden ingeschakeld voor je WordPress site in MyKinsta voor je eigen domein. Je kunt Early Hints niet gebruiken met een tijdelijk kinsta.cloud domein.

Preload en preconnect

Early Hints is vooral bedoeld om te werken met bronverwijzingen zoals preload en preconnect. Het kan worden gebruikt om de effectiviteit van preloaden preconnectte verbeteren door deze verwijzingen naar de browser te sturen zodra het eerste verzoek wordt gedaan.

• Preload: geeft aan de browser door dat een bron zo snel mogelijk moet worden geladen. Early Hints stuurt preload hints in een vroeg stadium naar de browser, zodat deze onmiddellijk kan beginnen met het ophalen van cruciale bronnen (bijv. CSS, JavaScript). Dit vermindert de render-blokkeringstijden en verbetert de prestaties.
• Preconnect: brengt vroegtijdig verbindingen tot stand met belangrijke externe bronnen. Early Hints stuurt preconnect hints in een vroeg stadium, zodat de browser van tevoren netwerkverbindingen (DNS lookup, TLS onderhandeling) kan tot stand brengen. Dit vermindert de vertraging wanneer de daadwerkelijke verzoeken worden gedaan, wat leidt tot snellere laadtijden van pagina’s.

Om preload en preconnect effectief te gebruiken, moet je specifieke linkheaders toevoegen aan de assets die je wilt markeren voor preloading. Je kunt een WordPress plugin gebruiken om preload of preconnect headers toe te voegen aan je assets in WordPress, zoals WP Rocket, Perfmatters of Pre* Party Resource Hints.

Belangrijke opmerkingen

1. Je site moet de Link: response header hebben met ofwel het preload of preconnectrel type om aan te geven welke resources je wilt opnemen in de Early Hints respons. Je kunt een WordPress plugin gebruiken om preload of preconnect headers toe te voegen aan je assets in WordPress.
2. De 103 Early Hints statuscode is compatibel met de nieuwste versies van Chrome, Edge, Safari en Firefox. Als een browser Early Hints niet ondersteunt en er een 103-responsheader naar wordt gestuurd, gebeurt er niets; de browser negeert deze gewoon.
3. Als je site meer dan 20 domeinen heeft, kan het inschakelen van Early Hints 5 of meer minuten duren, afhankelijk van het totale aantal domeinen.
4. Je kunt Early Hints niet gebruiken met een tijdelijk kinsta.cloud domein.

Early Hints inschakelen

1. Om Early Hints in te schakelen log je in op MyKinsta en ga je naar WordPress sites > sitenaam > Tools.
2. Klik onder Early Hints op de knop Activeren.

In de rechterbovenhoek verschijnt een melding dat Early Hints is ingeschakeld.

Early Hints testen

Om te bevestigen dat Early Hints werkt, inspecteer je de HTTP headers van een pagina op je site, en zoek je naar Link: headers met het rel type preload of preconnect die je hebt toegevoegd. Om de HTTP headers van je site te inspecteren kun je een van de volgende dingen gebruiken:

• Onze gratis HTTP status en redirect checker.
• De ingebouwde developer tools van je webbrowser.
• Het curl commando in Terminal (opdrachtregel), waarbij je de URL aan het eind van dit voorbeeld vervangt door de URL van de pagina die je wilt testen:

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

Early Hints uitschakelen

1. Om Early Hints uit te schakelen, log je in op MyKinsta en ga je naar WordPress Sites > sitenaam > Tools.
2. Klik onder Early Hints op de knop Uitschakelen.

In de rechterbovenhoek verschijnt een melding dat Early Hints is uitgeschakeld.