Percorso critico di rendering
La sequenza di passaggi che il browser deve compiere dalla ricezione dell'HTML alla comparsa dei primi pixel: parsing HTML → DOM, parsing CSS → CSSOM, unione in un render tree, layout, paint. Ottimizzarla è la chiave per un caricamento percepito come rapido.
I passaggi: il browser costruisce in parallelo il DOM (dall'HTML) e il CSSOM (dal CSS), li combina in un render tree (solo gli elementi visibili con i loro stili), esegue il layout (calcolo di posizioni e dimensioni) e infine il paint (disegno dei pixel). Colli di bottiglia: il CSS è bloccante per il rendering (nulla viene disegnato finché il CSSOM non è pronto) e gli script sincroni bloccano il parsing del DOM. Ottimizzazione: ridurre e dare priorità al CSS critico (inserire inline ciò che serve per la prima schermata), caricare CSS/JS non critici in modo asincrono o differito, ridurre le risorse bloccanti e inviare presto l'HTML (streaming). Capire questo percorso è la base per migliorare First Contentful Paint e Largest Contentful Paint. Collegato a render-blocking e Largest Contentful Paint.