HTTP Status 103 - Early Hints

Der HTTP-Status-Code 103 Early Hints ermöglicht dem Server, dem Client wichtige Resource-Hints (Link Preload) zu senden, während die finale Response noch verarbeitet wird. Browser können kritische Assets (CSS, JavaScript, Fonts) bereits laden, bevor HTML-Response verfügbar ist.

Typ

Response-Status-Code

Syntax

Der Status Code wird mit Link Header für Resource Preloading zurückgegeben.

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

Direktiven

Der 103 Early Hints Status Code wird für Performance-Optimierung durch Resource Preloading verwendet.

Link Header mit rel=preload
Server sendet Link Header in 103 Response, die kritische Resources identifizieren. Browser beginnt mit Laden dieser Resources parallel zur Verarbeitung der finalen Response.
Critical Resource Optimization
Besonders wertvoll für render-blocking Resources (CSS, Fonts) und kritisches JavaScript. Reduziert First Contentful Paint und Time to Interactive Metriken.
Server Processing Time
Ideal wenn Server-Side-Rendering oder Backend-Calls Zeit benötigen. Server sendet 103 Early Hints sofort nach Request-Empfang, bevor eigentliche Response-Generierung abgeschlossen ist.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für Status 103.

Beispiel 1 CSS und Font Preload

http 
GET /product/12345 HTTP/1.1
Host: shop.example.com

HTTP/1.1 103 Early Hints
Link: </assets/styles.css>; rel=preload; as=style
Link: </assets/font.woff2>; rel=preload; as=font; crossorigin

[Server generiert dynamische Produktseite]

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/assets/styles.css">
</head>
...

Beispiel 2 Critical JavaScript Preload

http 
GET /dashboard HTTP/1.1
Host: app.example.com

HTTP/1.1 103 Early Hints
Link: </js/vendor.bundle.js>; rel=preload; as=script
Link: </js/app.bundle.js>; rel=preload; as=script
Link: </api/user/session>; rel=preconnect

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>
<head>
  <script src="/js/vendor.bundle.js"></script>
  <script src="/js/app.bundle.js"></script>
</head>

Beispiel 3 CDN Resource Preconnect

http 
GET / HTTP/1.1
Host: website.example.com

HTTP/1.1 103 Early Hints
Link: <https://cdn.example.com>; rel=preconnect
Link: <https://analytics.example.com>; rel=dns-prefetch
Link: </hero-image.webp>; rel=preload; as=image

HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: max-age=3600

Early Hints Performance Flow

103 Early Hints optimiert Resource Loading während Server Processing

Vorteile für die Systemarchitektur

  • Latency-Reduktion: Browser lädt kritische Resources parallel zu Server-Processing, eliminiert Waterfall-Effekt zwischen HTML-Response und Asset-Loading, verbessert Core Web Vitals
  • Improved User Experience: Reduziert First Contentful Paint und Time to Interactive durch frühzeitiges Laden von render-blocking CSS und Fonts, besonders wertvoll bei langsamen Backend-Calls
  • CDN Integration: Ermöglicht preconnect zu CDNs und Third-Party-Domains während Server-Processing, reduziert DNS+TCP+TLS-Handshake-Zeit für externe Resources

Spezifikation

RFC 8297 – An HTTP Status Code for Indicating Hints https://www.rfc-editor.org/rfc/rfc8297.html

Weitere Spezifikationen

Link Header, HTTP Status 200 - OK