Cos'è il rendering progressivo?

Il rendering progressivo è una tecnica per migliorare le prestazioni delle pagine web, in cui il contenuto viene caricato e visualizzato a fasi, anziché tutto in una volta. Questo migliora la percezione delle prestazioni e l'interattività, permettendo all'utente di vedere e interagire con una parte della pagina prima che vengano caricati tutti le risorse.

Approcci principali:

• Caricamento lazy (Lazy Loading): Caricare immagini, video o altri elementi ad alto consumo di risorse solo quando diventano visibili nel viewport dell'utente.

  <!-- immagine con lazy loading -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Descrizione dell'immagine">
  

• Rendering a streaming: Inviare il codice HTML a pezzi, permettendo al browser di iniziare ad analizzare e renderizzare prima di ricevere tutta la pagina.

• Rendering lato server (SSR) o idratazione: Generare l'HTML iniziale sul server per una visualizzazione rapida del contenuto, poi "rivitalizzare" la struttura statica sul client con JavaScript per l'interattività.

  // Esempio di concetto di idratazione
  // Sul client
  const appElement = document.getElementById('app');
  // Montare l'app Vue/React/etc. sulla struttura DOM esistente
  Vue.createApp(App).mount(appElement);
  // o React.hydrate(<App />, appElement);
  

• Prioritizzare il contenuto visibile (Above-the-fold rendering): Caricare e renderizzare il contenuto visibile nella prima parte della pagina (senza scorrere), con caricamento lazy del resto.

L'applicazione del rendering progressivo migliora le metriche principali di Web Vitals:

• Largest Contentful Paint (LCP): Accelerare la visualizzazione dell'elemento più grande.
• First Contentful Paint (FCP): Ridurre il tempo fino alla comparsa del primo contenuto.
• Cumulative Layout Shift (CLS): Anche se non direttamente, un uso corretto di placeholders e lazy loading può aiutare a ridurre gli spostamenti imprevisti del contenuto.