DevCore.net

Early Hints: Kritische Assets vor der eigentlichen Antwort laden

103 Early Hints ist ein HTTP-Status, mit dem der Server dem Browser schon vor der eigentlichen Response wichtige Hinweise schicken kann, z. B. welche CSS- oder Font-Dateien direkt geladen werden sollen.

HTTP/1.1 103 Early Hints
Link: </assets/css/main.css>; rel=preload; as=style
Link: </assets/fonts/ibm-plex-sans.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

Wo hilft das? Vor allem bei SSR, langsamen Datenbankabfragen oder generell hohem TTFB. Der Browser kann kritische Assets schon anfordern, während das Backend noch an der finalen HTML-Antwort arbeitet.

Wichtig: Early Hints bringt vor allem etwas für Assets, die du sehr sicher brauchst. Für wechselnde oder unklare Ressourcen ist der Effekt gering oder du preloadest unnötig.

Server-Timing: Performance-Daten direkt in den DevTools

Mit dem Server-Timing HTTP-Header verschickst du Performance-Metriken direkt an den Browser. Diese tauchen sofort im DevTools unter Network → Timings auf.

Format:

Server-Timing: db;dur=123;desc="Query"

In PHP:

$start = microtime(true);
// ... Datenbankabfrage oder andere Operation ...
$duration = (microtime(true) - $start) * 1000; // Dauer
header("Server-Timing: db;dur=$duration;desc=\"Database\"", true);

Live Demo: https://server-timing-hono.deno.dev/ – öffne DevTools, schau in Network → Timing

User-Agent-Debugging mit geheimem Key

Wenn du im Frontend schnell debuggen willst, nutze einen geheimen Hash im User-Agent.

Nur wenn der Hash stimmt, gibt das Backend Debug-Infos aus (z. B. Timing, Cache-Hit/Miss, interne Steps).

$ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
$token = $_ENV['UA_DEBUG_TOKEN'] ?? '';
$debug = $token !== '' && str_contains($ua, 'DevCoreDebug/' . $token);

if ($debug) {
    header('X-Debug-Info: ' . json_encode(['dbMs' => 42, 'cache' => 'MISS']));
}

Warum gut: Du erzeugst keinen Debug-Noise für normale User, siehst direkt im echten Frontend, was passiert, und kannst alles ohne extra UI-Flag aktivieren.

Wichtig: Das ist kein Security-Feature, sondern nur ein Debug-Schalter; gib keine sensiblen Daten aus und wechsle den Token regelmäßig.