Comment pouvons-nous aider le navigateur à se préparer au chargement des ressources?

Utiliser des directives de préchargement : preconnect, dns-prefetch, preload, prefetch, prerender.

Directive	Description	Exemple
preconnect	Établit une connexion (recherche DNS, poignée de main TCP, négociation TLS) avec une autre source de données à l'avance.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Effectue la résolution du nom de domaine à l'avance.	<link rel="dns-prefetch" href="//api.example.com">
preload	Demande des ressources (JS, CSS, polices) avec une priorité élevée à l'avance, sans bloquer le rendu.	<link rel="preload" href="/styles.css" as="style">
prefetch	Demande des ressources qui seront probablement nécessaires à l'avenir (par exemple, sur la page suivante).	<link rel="prefetch" href="/next_page.html">
prerender	Rend la page suivante en arrière-plan dans un onglet caché.	<link rel="prerender" href="/upcoming_page.html">

Utiliser l'attribut async ou defer dans la balise <script> pour charger et exécuter les scripts de manière asynchrone, sans bloquer l'analyse HTML :

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Utiliser l'attribut loading="lazy" pour les images et <iframe> pour leur chargement différé lorsqu'ils entrent dans la zone visible :

<img src="image.jpg" loading="lazy" alt="Image chargée paresseusement">

Optimiser les images (compresser, utiliser des formats modernes comme WebP), les polices (sous-ensembles, formats WOFF/WOFF2) et autres ressources.

Minifier et compresser CSS, JavaScript et HTML.

Utiliser Service Worker pour mettre en cache les ressources et assurer l'accès hors ligne.

Diviser le code JavaScript volumineux en parties plus petites (code splitting) et les charger à la demande.

Utiliser HTTP/2 et HTTP/3 pour une multiplexation plus efficace et une compression des en-têtes.

Configurer les en-têtes de cache appropriés (Cache-Control, Expires) sur le serveur.

Utiliser <link rel="modulepreload"> pour précharger les modules JavaScript ES.

<link rel="modulepreload" href="/dist/module.js">