Cos'è il percorso critico del rendering delle pagine web?

È una sequenza di passaggi che il browser esegue per visualizzare il contenuto della pagina sullo schermo, a partire dal recupero del documento HTML. Include:

1. Costruzione del DOM (Document Object Model): Analisi del codice HTML e creazione di un albero di oggetti che rappresentano la struttura del documento.
2. Costruzione del CSSOM (CSS Object Model): Analisi dei file CSS e degli stili inline per creare un albero di oggetti che rappresentano gli stili degli elementi.
3. Costruzione dell'albero di rendering: Unione del DOM e del CSSOM. Viene creato un albero solo degli elementi da rendere con gli stili applicati.
4. Layout (o Reflow): Determinazione delle dimensioni geometriche e della posizione di ogni elemento sulla pagina.
5. Paint (o Repaint): Riempimento dei pixel sullo schermo basato sull'albero di rendering e sui dati di layout.

L'ottimizzazione del percorso critico di rendering mira a far visualizzare al browser il primo contenuto significativo (First Meaningful Paint) o l'interattività (Time to Interactive) il più rapidamente possibile. Ciò si ottiene minimizzando le risorse bloccanti (JS e CSS), ottimizzando le dimensioni delle risorse e il loro caricamento al momento opportuno.