Per consentire il primo rendering nel minor tempo possibile, dobbiamo ridurre al minimo tre variabili:
- Il numero di risorse critiche.
- La lunghezza del percorso critico.
- Il numero di byte critici.
Una risorsa critica è una risorsa che potrebbe bloccare il rendering iniziale della pagina. Minore è il numero di queste risorse, minore è il lavoro per il browser, la CPU e le altre risorse.
Allo stesso modo, la lunghezza del percorso critico è una funzione del grafico delle dipendenze tra le risorse critiche e le relative dimensioni in byte: alcuni download di risorse possono essere avviati solo dopo che una risorsa precedente è stata elaborata. Maggiore è la risorsa, maggiore è il numero di round trip necessari per il download.
Infine, minore è il numero di byte critici che il browser deve scaricare, più rapidamente è in grado di elaborare i contenuti e di renderli visibili sullo schermo. Per ridurre il numero di byte, possiamo ridurre il numero di risorse (eliminarle o renderle non critiche) e ridurre al minimo le dimensioni di trasferimento comprimendo e ottimizzando ogni risorsa.
La sequenza generale di passaggi per ottimizzare il percorso di rendering critico è:
- Analizza e caratterizza il tuo percorso critico: numero di risorse, byte, lunghezza.
- Riduci al minimo il numero di risorse critiche: eliminale, posticipa il download, contrassegnale come asincrone e così via.
- Ottimizza il numero di byte critici per ridurre il tempo di download (numero di round trip).
- Ottimizza l'ordine in cui vengono caricate le risorse critiche rimanenti: scarica tutti gli asset critici il prima possibile per ridurre la lunghezza del percorso critico.