103 Early hints

Was sind 103 - early hints?

Wie verwendet ein Browser 103 - early hints?

Early hints werden derzeit nur von Google Chrome ab Version 94 unterstützt. Da Early hints noch eine experimentelle Funktion ist, müssen Sie Chrome mit einem sogenannten Chrome Browser Flag von der Kommandozeile starten. In meinem Fall muss ich Chrome vom Terminal aus mit dem Befehl starten:

google-chrome --enable-features=EarlyHintsPreloadForNavigation

Early hints funktionieren nicht, wenn:

• Early hints von einer anderen Quelle als dem Hauptthema (dem HTML) gesendet werden
• Early Hints von einem Iframe gesendet werden
• Early hints mit HTTP/1.1 oder früher gesendet werden
• Early hints einen dns-prefetch oder prefetch hint enthalten

Early hints funktionieren nur für preload und preconnect Resource Hints, wenn sie vom main document über HTTP2 oder HTTP/3 gesendet werden. Es ist nicht erlaubt, Early hints Header von beispielsweise einem Bild oder einem Iframe weiterzugeben.

Wie sehen 103 early hints aus?

Nach der Implementierung von 103 early hints wird, sobald ein Browser eine Webseite anfordert, sofort ein 103 early hints Header zurückgegeben. Zum Beispiel besagt dieser Header, dass image.webp und style.css gepreloadet werden sollen.

HTTP/1.1 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style

In der Zwischenzeit kann der Server beginnen, die 'echte' HTTP-Antwort zu generieren. Bei dynamischen Seiten kann dies etwas dauern. Nachdem der Server bereit ist, sie zu senden, wird die endgültige Antwort gesendet.

HTTP/1.1 200 OK
Date: Thurs, 16 Sept 2021 11:30:00 GMT
Content-Length: 1234
[the rest of the response]

Senden Sie 103 early hints

PageSpeed-technisch ist der schnellste Ansatz zum Senden von 103 early hints über Ihren eigenen Server. Verwenden Sie diese Anleitung, um 103 early hints selbst auf dem Apache Webserver oder über das experimentelle NGINX-Modul einzurichten. Das Aktivieren von 103 early hints ist nicht einfach und Early hints integrieren sich noch nicht gut in populäre CMS wie WordPress.

Deshalb ist der einfachste Weg momentan, Early hints über Cloudflare zu aktivieren. Melden Sie sich für Early hint an. Sobald Sie zugelassen sind, navigieren Sie zu 'Speed' -> 'Optimization und aktivieren Sie Early Hints

Cloudflare akzeptiert Resource Hint Header und übersetzt diese in einen 103 early resource Header. Sie können einfach einen Early hint senden, indem Sie einen Preload- oder Preconnect-Header senden. Cloudflare übersetzt diesen dann in einen 103 early hint Header.
Mit PHP und Cloudflare können 103 early hints mit diesem Code gesendet werden:

header("Link: </image.webp>; rel=preload; as=image", false);
header("Link: </style.css>; rel=preload; as=style", false);

Lighthouse-Ergebnisse für 103 early hints

Die wichtigste Frage ist natürlich: "Was bedeutet 103 early resource für meine Core Web Vitals?" Ich habe 2 häufige Szenarien getestet.

1. Early resource hint auf dem LCP-Element

Unmittelbar nach dem ersten Test bemerkte ich, wie effektiv Early hints sein können. Das LCP-Element (ein Bild) erschien 35% früher auf dem Bildschirm als ohne das Vorhandensein des 103 early hints Headers.

HTTP/1.1 103 Early Hints
Link: </image.webp>; rel=preload; as=image

2. Early resource hint mit einem großen Stylesheet und dem LCP-Element

Für den zweiten Test habe ich eine 85kb CSS-Datei zur Seite hinzugefügt. Der Unterschied in den Core Web Vitals Ergebnissen ist noch deutlicher. Der First Contentful Paint (FCP) verbesserte sich von 1,8 Sekunden auf 1,4 Sekunden und der Largest Contentful Paint (LCP) verbesserte sich von 3,2 Sekunden auf nur 2 Sekunden.

HTTP/1.1 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style