Cos'è il rendering progressivo?

Il rendering progressivo è una tecnica di ottimizzazione della velocità di caricamento e visualizzazione delle pagine web, in cui il contenuto viene caricato e mostrato progressivamente, anziché tutto in una volta.

I principali vantaggi:

Renderizzazione più rapida del contenuto significativo iniziale (First Meaningful Paint).
Migliore percezione della velocità di caricamento da parte dell’utente.
Riduzione del tempo fino all’interattività (Time to Interactive).

Le principali tecniche di rendering progressivo includono:

Caricamento lazy (Lazy Loading): Ritardare il caricamento di risorse non essenziali (come immagini o video) fino a quando non sono necessari per l’utente (fino a quando scorrono la pagina fino a loro).
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Esempio di immagine" loading="lazy">
```

Rendering lato server (Server-Side Rendering - SSR): Generare la pagina HTML sul server e inviare il contenuto già renderizzato al browser.

// Esempio di utilizzo di un framework per SSR (ad esempio, Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Ottenere dati dal server
//   const data = await fetchData();
//   return {
//     props: { data }, // Trasmettere i dati al componente
//   }
// }
//
// function MyPage({ data }) {
//   // Renderizzare il componente con i dati
//   return <div>{/* ... */}</div>
// }

Rendering lato client (Client-Side Rendering - CSR) con idratazione: Il browser riceve HTML e JavaScript minimi. Poi, JavaScript carica i dati e rende completamente la pagina nel browser. L’idratazione è il processo di attaccare gli handler degli eventi al contenuto già renderizzato da SSR sul client.

Streaming HTML: Invio di HTML in parti man mano che viene generato sul server, permettendo al browser di iniziare ad analizzare e rendere prima che l’intero documento sia caricato.

<!-- Esempio di streaming HTML ipotetico -->
<html>
  <head>
    <title>Pagina in streaming</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Parte HTML inviata per prima -->
    <h1>Titolo</h1>
    <script src="script.js" async></script>
    <!-- Il resto dell’HTML può essere inviato più tardi -->
  </body>
</html>

CSS critico / CSS inline: Incorporamento inline degli stili CSS necessari per mostrare la parte visibile della pagina (Above the Fold), per accelerare il rendering iniziale. Gli altri stili vengono caricati in modo asincrono.

Tecnica	Descrizione	Vantaggi	Svantaggi
Lazy Loading	Caricamento ritardato delle risorse fuori dalla vista	Caricamento rapido del contenuto visibile	Potrebbe richiedere JavaScript per l’implementazione
SSR	Rendering sul server, invio dell’HTML pronto	Rendering rapido del contenuto iniziale, SEO-friendly	Aumenta il carico sul server
CSR con idratazione	Rendering iniziale sul client con successiva idratazione del contenuto SSR	Applicazioni dinamiche	Caricamento lungo e interattività limitata senza SSR
Streaming HTML	Invio di HTML in parti	Avvio rapido del parsing	Dipende dall’implementazione del server
CSS critico	Inclusione inline degli stili per la parte visibile	Rendering rapido della parte visibile	Richiede strumenti per estrarre il CSS critico

Il rendering progressivo è una combinazione di queste tecniche e altre, finalizzata a migliorare l’esperienza utente accelerando il rendering della pagina web.