Resource Hints

Definition

Directives HTML (preload, prefetch, preconnect, dns-prefetch) qui informent le navigateur des ressources à charger en priorité ou à préparer en avance.

Analogie

Commander l'entrée et le plat en même temps au restaurant pour que le plat arrive plus vite après l'entrée.

Exemple de code

<!-- Critical resource -->
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>
<!-- Next page -->
<link rel="prefetch" href="/dashboard">
<!-- Third-party -->
<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

Cas d'usage

Accélérer le chargement des fonts critiques, des pages suivantes probables et des APIs tierces.

Anti-pattern

Termes lies