Misurare le prestazioni: Lighthouse e Core Web Vitals

Lighthouse è lo strumento standard per misurare le prestazioni web. Lo esegua in Chrome DevTools, nella scheda Lighthouse, oppure tramite la CLI (npx lighthouse https://yoursite.com). Quando valuta l'Islands Architecture, esegua Lighthouse su pagine rappresentative prima e dopo la migrazione per quantificare obiettivamente i miglioramenti.

LCP misura il momento in cui termina il rendering dell'elemento di contenuto visibile più grande. Islands Architecture migliora l'LCP perché il server invia immediatamente HTML completamente renderizzato: il browser non deve attendere l'esecuzione di JavaScript per visualizzare il contenuto. Un'immagine hero o un titolo principale che costituirebbe l'LCP viene dipinto a partire dalla risposta HTML iniziale.

In una React SPA, l'LCP spesso viene ritardato perché il browser deve scaricare ed eseguire JavaScript prima che React esegua il rendering dell'elemento LCP. Con Islands Architecture, il contenuto LCP è incluso nell'HTML iniziale, quindi l'esecuzione di JavaScript non blocca l'LCP. Questo è uno dei vantaggi misurabili più significativi.

Il Total Blocking Time misura per quanto tempo il thread principale rimane bloccato da task JavaScript più lunghi di 50 ms. La hydration di una SPA React di grandi dimensioni può produrre centinaia di millisecondi di TBT. Islands Architecture riduce drasticamente il TBT perché la quantità di JavaScript eseguito è proporzionale al numero di isole, non alle dimensioni della pagina.

La Cumulative Layout Shift misura la stabilità visiva — ovvero lo spostamento degli elementi durante il caricamento della pagina. Il contenuto renderizzato da JavaScript può causare spostamenti del layout quando React esegue il rendering e modifica le dimensioni. L'HTML renderizzato dal server da Islands Architecture evita gli spostamenti del layout legati alla hydration, perché il layout iniziale proviene da HTML statico che non cambia durante la hydration.

Il First Input Delay (ora sostituito dall'Interaction to Next Paint, INP) misura la rapidità con cui la pagina risponde alle interazioni dell'utente. Islands Architecture migliora l'INP perché ogni isola dispone di un bundle JavaScript piccolo e focalizzato. Le interazioni all'interno di un'isola vengono eseguite rapidamente, perché non devono attraversare un grande albero React per pianificare il lavoro.

Un confronto tipico per una pagina di blog: una SPA React completa potrebbe ottenere un punteggio di 45-65 su Lighthouse mobile (TBT: 800 ms, LCP: 3.2 s). Gli stessi contenuti, presentati come sito Astro con una sola isola React, potrebbero ottenere un punteggio di 90-98 (TBT: 80 ms, LCP: 1.1 s). I vantaggi sono più evidenti nelle pagine ricche di contenuti e con interattività limitata.

Islands Architecture non è la scelta giusta per applicazioni altamente interattive come dashboard, editor di codice o strumenti collaborativi. Queste app hanno componenti che condividono costantemente lo stato e vengono nuovamente renderizzati insieme: l'overhead della comunicazione tra le isole annullerebbe i vantaggi in termini di prestazioni e aggiungerebbe complessità architetturale.

Islands Architecture è particolarmente efficace per i siti ricchi di contenuti con interattività distribuita: blog (lettura dei contenuti, un like o un commento occasionale), documentazione (lettura dei documenti, ricerca occasionale o pulsante per copiare il codice), landing page (per lo più statiche, con un'isola per il modulo della newsletter) e pagine di prodotto per l'e-commerce (immagini e descrizione statiche, con un'isola per l'aggiunta al carrello).

Google usa i Core Web Vitals (LCP, INP, CLS) come segnali di ranking. Migliorare queste metriche con Islands Architecture porta vantaggi diretti al posizionamento nei risultati di ricerca. Un sito che migliora il proprio punteggio Lighthouse su dispositivi mobili da 55 a 92 adottando Islands Architecture ottiene simultaneamente vantaggi sia per l'esperienza utente sia per la SEO.

I team che migrano da una SPA React basata su Next.js ad Astro per i siti di marketing e documentazione riportano risultati ricorrenti: i payload JavaScript diminuiscono del 70-90%, i punteggi delle prestazioni su dispositivi mobili aumentano di 20-40 punti e i costi di hosting del server diminuiscono, perché i file statici vengono distribuiti da una CDN senza l'overhead del rendering lato server per ogni richiesta.

Perché Islands Architecture riduce drasticamente il Total Blocking Time (TBT)?

Islands Architecture migliora tutti i Core Web Vitals: l'LCP trae vantaggio dall'HTML renderizzato dal server, il TBT diminuisce perché la quantità di JavaScript è proporzionale all'interattività, il CLS si riduce grazie a layout stabili renderizzati dal server e l'INP migliora con bundle piccoli e focalizzati per ogni isola. I punteggi Lighthouse delle pagine ricche di contenuti migliorano drasticamente. Questo pattern non è adatto alle app altamente interattive, ma è ideale per blog, documentazione, landing page ed e-commerce.