Qu'est-ce que le rendu progressif?

Le rendu progressif est une méthode d’optimisation de la vitesse de chargement et d’affichage d’une page web, où le contenu est chargé et affiché de manière progressive, plutôt que tout d’un coup.

Ses principaux avantages :

Un rendu plus rapide du contenu significatif initial (First Meaningful Paint).
Une meilleure perception de la vitesse de chargement par l’utilisateur.
Une réduction du temps jusqu’à l’interactivité (Time to Interactive).

Les principales techniques de rendu progressif incluent :

Chargement paresseux (Lazy Loading) : Reporter le chargement des ressources non essentielles (comme les images ou vidéos) jusqu’à ce qu’elles soient nécessaires pour l’utilisateur (jusqu’à ce qu’il fasse défiler la page jusqu’à elles).
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Exemple d’image" loading="lazy">
```

Rendu côté serveur (Server-Side Rendering - SSR) : Générer la page HTML sur le serveur et envoyer le contenu déjà rendu au navigateur.

// Exemple d’utilisation d’un framework pour SSR (par exemple, Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Récupérer des données sur le serveur
//   const data = await fetchData();
//   return {
//     props: { data }, // Transmettre les données au composant
//   }
// }
//
// function MyPage({ data }) {
//   // Rendu du composant avec les données
//   return <div>{/* ... */}</div>
// }

Rendu côté client (Client-Side Rendering - CSR) avec hydratation : Le navigateur reçoit un HTML minimal et du JavaScript. Ensuite, JavaScript charge les données et rend entièrement la page dans le navigateur. L’hydratation est le processus d’attachement des gestionnaires d’événements au contenu déjà rendu par SSR sur le client.

Transmission en streaming de HTML (Streaming HTML) : Envoyer le HTML en parties au fur et à mesure de sa génération sur le serveur, permettant au navigateur de commencer à analyser et rendre avant que le document ne soit complètement chargé.

<!-- Exemple de transmission en streaming hypothétique -->
<html>
  <head>
    <title>Page en streaming</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Partie du HTML envoyée en premier -->
    <h1>Titre</h1>
    <script src="script.js" async></script>
    <!-- Le reste du HTML peut être envoyé plus tard -->
  </body>
</html>

CSS critique / CSS en ligne (Critical CSS / Inline Critical CSS) : Intégration en ligne des styles CSS nécessaires pour afficher la partie visible de la page (Above the Fold), afin d’accélérer le rendu initial. Les autres styles sont chargés de manière asynchrone.

Technique	Description	Avantages	Inconvénients
Chargement paresseux	Chargement différé des ressources hors de la zone visible	Chargement rapide du contenu visible	Peut nécessiter du JavaScript pour la mise en œuvre
SSR	Rendu côté serveur, envoi du HTML prêt	Rendu rapide du contenu initial, convivial pour le SEO	Augmentation de la charge sur le serveur
CSR avec hydratation	Rendu initial côté client avec hydratation ultérieure du contenu SSR	Applications dynamiques	Chargement long et interactivité limitée sans SSR
Transmission en streaming de HTML	Envoi de HTML en parties	Démarrage rapide de l’analyse	Dépend de la mise en œuvre du serveur
CSS critique	Inclusion en ligne des styles pour la partie visible	Rendu rapide de la partie visible	Nécessite des outils pour extraire le CSS critique

Le rendu progressif est une combinaison de ces techniques et d’autres, visant à améliorer l’expérience utilisateur en accélérant le rendu de la page web.