103 Early Hints

Définition

Code de statut HTTP informatif défini par la RFC 8297 : pendant que le serveur prépare la vraie réponse (requête en base, rendu), il envoie d'abord un 103 contenant des en-têtes Link (preload, preconnect) pour que le navigateur commence à charger CSS, polices et scripts. Chrome le supporte depuis la version 103, uniquement sur HTTP/2 et HTTP/3 ; Cloudflare peut le générer automatiquement à partir des en-têtes Link de vos pages.

Analogie

Le serveur du restaurant qui vous apporte pain et couverts dès la commande, sans attendre que le plat soit prêt en cuisine.

Exemple de code

// Node.js >= 18 : res.writeEarlyHints (HTTP/2 côté proxy pour Chrome)
import http from 'node:http';

http.createServer(async (req, res) => {
  res.writeEarlyHints({
    link: [
      '</styles/app.css>; rel=preload; as=style',
      '</fonts/inter.woff2>; rel=preload; as=font; crossorigin',
      '<https://api.example.com>; rel=preconnect',
    ],
  });                                   // 103 part immédiatement
  const html = await renderPage(req);   // travail lent (BDD, SSR)
  res.writeHead(200, { 'content-type': 'text/html' });
  res.end(html);                        // 200 final
}).listen(3000);

Cas d'usage

Pages rendues côté serveur avec un TTFB de plusieurs centaines de millisecondes : les ressources critiques se chargent pendant l'attente.

Anti-pattern

Lister vingt ressources en Early Hints : la bande passante se disperse et le HTML lui-même arrive plus tard ; se limiter au CSS critique, aux polices et aux preconnect.

Définition

Analogie

Exemple de code

Cas d'usage

Anti-pattern

Termes liés

Sources