103 Early Hints: Kritische Ressourcen während der Server-Bedenkzeit vorladen

Zuletzt geprüft von Arjen Karel im März 2026

Was sind 103 Early Hints?

Early Hints ist ein HTTP-Statuscode (103), der gesendet wird, bevor der Webserver die endgültige Antwort sendet. Er ermöglicht es dem Server, dem Browser früh im Ladevorgang mitzuteilen, dass bestimmte Ressourcen wie ein Bild oder ein Stylesheet für das Rendering der Seite kritisch sind.

Die meisten dynamischen Seiten benötigen Zeit zur Generierung. Der Server fragt eine Datenbank ab, führt die Anwendungslogik aus und stellt das HTML zusammen. Während dieser Verarbeitungszeit wartet der Browser einfach. 103 Early Hints füllen diese Lücke, indem sie dem Browser sagen, was er abrufen soll, während er auf die echte Antwort wartet.

Early Hints ersetzen den veralteten HTTP/2 Server Push, den Chrome in Version 106 entfernt hat. Server Push bündelte Ressourcen mit der endgültigen Antwort und pushte häufig Bytes, die der Browser bereits im Cache hatte. Early Hints vermeiden dieses Problem, da sie nur Hinweise (Hints) geben; der Browser entscheidet, ob er darauf reagiert.

Browser-Unterstützung

103 Early Hints wird von 93 % der Browser weltweit unterstützt:

• Chrome 103+ und Edge 103+: volle Unterstützung für preconnect und preload (seit Juni 2022)
• Firefox 123+: volle Unterstützung für preconnect und preload (seit Februar 2024)
• Safari 17+: nur preconnect. Safari unterstützt kein preload in 103-Antworten

Die Einschränkung bei Safari ist wichtig. Wenn Ihre Early Hints Strategie vollständig auf dem Preloading von Bildern oder Fonts basiert, werden Safari-Nutzer nicht davon profitieren. Fügen Sie preconnect Hints neben preload Hints hinzu, damit Safari zumindest die Verbindung zu Ihren Ressourcen-Quellen (Origins) aufwärmt.

Early Hints funktionieren nur über HTTP/2 oder HTTP/3. Sie funktionieren nicht über HTTP/1.1, aus iframes oder für Nicht-Navigationsanfragen. Der Browser verarbeitet Hinweise nur für preload und preconnect; dns-prefetch und prefetch werden in 103-Antworten nicht unterstützt.

Wie sehen 103 Early Hints aus?

Wenn ein Browser eine Seite anfordert, gibt der Server sofort eine 103-Antwort zurück, bevor er die Generierung des HTML abgeschlossen hat. Diese Antwort weist den Browser an, mit dem Abrufen des LCP-Bildes und des Stylesheets zu beginnen:

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

In der Zwischenzeit generiert der Server die Seite. Sobald sie fertig ist, sender er die endgültige Antwort:

HTTP/2 200 OK
Content-Length: 1234
[der Rest der Antwort]

Bis der Browser die 200-Antwort erhält, hat er bereits mit dem Herunterladen des Bildes und des Stylesheets begonnen. Dieser Vorsprung ist es, der den Largest Contentful Paint schneller macht.

So senden Sie 103 Early Hints

Sie haben drei Hauptoptionen, von der einfachsten bis zur Option mit der meisten Kontrolle.

Cloudflare (am einfachsten)

Wenn Sie bereits Cloudflare für die Performance nutzen, ist die Aktivierung von Early Hints ein einziger Klick. Navigieren Sie zu Speed > Settings > Content Optimization und schalten Sie Early Hints ein. Es ist in allen Tarifen verfügbar, auch in der kostenlosen Version.

Cloudflare cacht die Link-Header aus den 200-Antworten Ihres Ursprungsservers (Origin). Bei nachfolgenden Anfragen sendet es diese gecachten Header als 103-Antwort, bevor es die Anfrage an Ihren Origin weiterleitet. Sie stellen die Hinweise bereit, indem Sie Link-Header von Ihrer Anwendung senden:

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

NGINX (nativ seit 1.29.0)

NGINX hat in Version 1.29.0 (Juni 2025) native Unterstützung für 103 Early Hints hinzugefügt. Die early_hints-Direktive leitet 103-Antworten von Ihrem Backend an den Client weiter:

map $http_sec_fetch_mode $early_hints {
    navigate $http2$http3;
}

server {
    location / {
        early_hints $early_hints;
        proxy_pass http://backend.example.com;
    }
}

Das sec-fetch-mode-Mapping stellt sicher, dass Hinweise nur für Navigationsanfragen über HTTP/2 oder HTTP/3 gesendet werden. Ihre Backend-Anwendung muss die 103-Antwort generieren; NGINX reicht sie durch.

Apache (2.4.58+)

Apache kann 103-Antworten selbst mit mod_http2 generieren. Aktivieren Sie es mit der H2EarlyHints-Direktive und definieren Sie die Ressourcen für die Hinweise:

H2EarlyHints on
H2EarlyHint Link "</style.css>;rel=preload;as=style"
H2EarlyHint Link "</image.webp>;rel=preload;as=image"

Im Gegensatz zu NGINX generiert Apache die 103-Antwort auf Serverebene, ohne dass Ihre Anwendung sie erzeugen muss.

Wann Early Hints helfen (und wann nicht)

103 Early Hints sind am effektivsten, wenn Ihr Server spürbar Zeit für die Antwort benötigt: dynamische Seiten, die Datenbanken abfragen, APIs aufrufen oder Templates rendern. Je langsamer der Time to First Byte, desto mehr Zeit hat der Browser, auf die Hinweise zu reagieren.

Early Hints bieten weniger Vorteile, wenn:

• Ihr Server in unter 100 ms antwortet. Wenn der TTFB bereits schnell ist, gibt es keine Lücke, die der Browser füllen könnte. Konzentrieren Sie sich stattdessen auf die Ressourcen-Priorisierung in Ihrem HTML.
• Seiten aus dem Cache serviert werden. Eine vollständig gecachte HTML-Antwort lädt so schnell, dass die 103-Antwort kaum einen Vorsprung hat.
• Sie zu viele Ressourcen ankündigen. Das Hinweisen auf 10+ Ressourcen sättigt die Verbindung und kann die Sache verlangsamen. Shopify stellte fest, dass auf mobilen Geräten aggressives Hinting zu Leistungseinbußen bei TTFB, FCP und LCP führte. Beschränken Sie sich auf 2 bis 4 kritische Ressourcen.

Trotz 93 % Browser-Unterstützung bleibt die Verbreitung gering. Laut dem 2025 Web Almanac nutzen nur etwa 5 % der Top-Seiten 103 Early Hints. Die größte Hürde ist zu wissen, welche Ressourcen für jede Seite angekündigt werden sollen – etwas, das die meisten CMS nicht automatisch handhaben.

So überprüfen Sie, ob Early Hints funktionieren

Öffnen Sie die Chrome DevTools, gehen Sie zum Tab Network und laden Sie die Seite neu. Klicken Sie auf die Dokumentanfrage und prüfen Sie die Response Header. Wenn Early Hints funktionieren, sehen Sie in der Timing-Aufschlüsselung einen 103-Status vor dem 200.

Über die Kommandozeile können Sie dies mit curl verifizieren:

curl -v --http2 https://example.com 2>&1 | grep "< HTTP"

Sie sollten sowohl eine 103- als auch eine 200-Antwort sehen.

Testergebnisse

Ich habe zwei Szenarien getestet, um die Auswirkungen auf den First Contentful Paint und den Largest Contentful Paint zu messen.

1. Early Hints nur für das LCP-Bild

Das LCP-Bild erschien mit 103 Early Hints um 35 % früher auf dem Bildschirm im Vergleich zu einem regulären preload im HTML.

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

2. Early Hints mit einem großen Stylesheet und dem LCP-Bild

Das Hinzufügen einer 85 KB großen CSS-Datei zu den Hinweisen machte den Unterschied noch deutlicher. Der FCP verbesserte sich von 1,8 Sekunden auf 1,4 Sekunden, und der LCP verbesserte sich von 3,2 Sekunden auf 2,0 Sekunden.

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

Diese Zahlen decken sich mit dem, was Cloudflare bei über 100.000 Kunden gemessen hat: eine LCP-Verbesserung von 6 % am 50. Persentiil und 16 % am 75. Persentiil auf dem Desktop. Shopify verzeichnete eine LCP-Verbesserung von 500 ms bei p50 während Black Friday und Cyber Monday. Die größten Gewinne ergeben sich auf Seiten mit langsamen Serverantwortzeiten, also genau dann, wenn Early Hints die meiste Zeit zum Arbeiten haben.

Early Hints und TTFB

Es gibt eine Nuance bei der Messung zu beachten. Seit Chrome 133 umfasst das responseStart-Timing des Browsers (das von den meisten Tools zur Meldung des TTFB verwendet wird) die 103-Antwort. Dies bedeutet, dass Ihr gemeldeter TTFB nach der Aktivierung von Early Hints sinken wird, obwohl sich die tatsächliche Verarbeitungszeit Ihres Servers nicht geändert hat.

Wenn Sie die Serververarbeitungszeit separat messen müssen: Chrome 133 hat einen neuen firstResponseHeadersStart-Zeitstempel eingeführt, der meldet, wann die endgültigen 200-Response-Header eintreffen. Real User Monitoring Tools, die beide Werte verfolgen, geben Ihnen das vollständige Bild: wie viel Zeit Early Hints dem Browser erspart haben und wie lange Ihr Server tatsächlich für die Antwort gebraucht hat.