Qu'est-ce que le rendu progressif?

Le rendu progressif est un ensemble de techniques visant à améliorer la performance d'une page web en affichant progressivement le contenu à l'utilisateur, jusqu'à ce que le chargement complet soit terminé. Cela crée l'illusion d'un chargement plus rapide et augmente la performance perçue.

Techniques clés:

Chargement paresseux (Lazy Loading): Charger les ressources (images, vidéos, scripts) uniquement lorsqu'elles deviennent visibles dans la zone de visualisation de l'utilisateur ou lorsque celui-ci interagit avec la page.

// Exemple de chargement paresseux d'images avec l'API Intersection Observer
const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

Rendu côté serveur (Server-Side Rendering - SSR): Rendu du HTML initial sur le serveur avant de l'envoyer au client. Permet à l'utilisateur de voir le contenu plus rapidement pendant que le navigateur charge et analyse JavaScript. Frameworks d'exemple : Next.js, Nuxt.js.
Rendu avec priorité CSS critique (Critical CSS): Extraction et intégration en ligne du CSS nécessaire pour afficher la partie supérieure de la page (contenu au-dessus du pli), afin que le navigateur puisse rapidement rendre la vue initiale. Tout le reste du CSS est chargé de manière asynchrone.
```

<style>
  /* CSS critique pour la partie supérieure de la page */
  body { margin: 0; }
  h1 { color: blue; }
</style>
<link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
```
Division du code (Code Splitting): Diviser le bundle JavaScript en parties plus petites qui se chargent selon les besoins. Cela réduit la taille du chargement initial. Populaire dans les frameworks SPA comme React, Vue, Angular.

Avantages du rendu progressif:

Amélioration de la performance perçue: L'utilisateur voit le contenu plus rapidement, ce qui crée l'impression d'un chargement plus rapide.
Réduction du First Contentful Paint (FCP) et du Largest Contentful Paint (LCP): Métriques qui reflètent la vitesse de chargement du contenu visible.
Amélioration du SEO: Les moteurs de recherche peuvent indexer le contenu plus rapidement.
Économie de trafic: Surtout avec le chargement paresseux.

L'idée principale est de fournir à l'utilisateur un contenu utile dès que possible, puis de charger progressivement le reste pour ne pas bloquer le rendu de la page.