Qu'est-ce que le rendu progressif?

Le rendu progressif est une technique d’amélioration des performances des pages web, où le contenu est chargé et affiché par étapes, plutôt que tout d’un coup. Cela améliore la perception des performances et l’interactivité, permettant à l’utilisateur de voir et d’interagir avec une partie de la page avant le chargement complet de toutes les ressources.

Approches principales :

Chargement différé (Lazy Loading) : Charger les images, vidéos ou autres éléments gourmands en ressources uniquement lorsqu’ils deviennent visibles dans la viewport de l’utilisateur.
```

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Description de l’image">
```
Rendu par streaming : Envoyer le code HTML par parties, permettant au navigateur de commencer à analyser et rendre avant de recevoir toute la page.

Rendu côté serveur (SSR) ou Hydratation : Générer le HTML initial sur le serveur pour un affichage rapide du contenu, puis "réanimer" la structure statique côté client avec JavaScript pour l’interactivité.

// Exemple de concept d’hydratation
// Sur le client
const appElement = document.getElementById('app');
// Monter l’application Vue/React/etc. sur la structure DOM existante
Vue.createApp(App).mount(appElement);
// ou React.hydrate(<App />, appElement);

Prioriser le contenu visible (rendu au-dessus du pli) : Charger et rendre le contenu visible dans la première partie de la page (sans faire défiler), avec chargement différé du reste.

L’application du rendu progressif améliore les principales métriques Web Vitals :

Largest Contentful Paint (LCP) : Accélère l’affichage de l’élément le plus volumineux.
First Contentful Paint (FCP) : Réduit le temps jusqu’à l’apparition du premier contenu.
Cumulative Layout Shift (CLS) : Bien que ce ne soit pas directement, une utilisation correcte des placeholders et du lazy loading peut aider à réduire les décalages inattendus du contenu.