Ottimizzazione del percorso di rendering critico

Ilya Grigorik
Ilya Grigorik

Per garantire il tempo più rapido possibile per la prima visualizzazione, 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 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 e più è grande 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 potrà elaborare i contenuti e renderli visibili sullo schermo. Per ridurre il numero di byte, possiamo ridurre il numero di risorse (eliminarle o renderle non critiche) e garantire di ridurre al minimo le dimensioni di trasferimento comprimendo e ottimizzando ogni risorsa.

La sequenza generale dei passaggi per ottimizzare il percorso di rendering critico è la seguente:

  1. Analizza e caratterizza il percorso critico: numero di risorse, byte, lunghezza.
  2. Riduci al minimo il numero di risorse critiche: eliminale, posticipa il loro download, contrassegnale come asincrone e così via.
  3. Ottimizza il numero di byte critici per ridurre il tempo di download (numero di round trip).
  4. Ottimizza l'ordine di caricamento delle risorse critiche rimanenti: scarica tutte le risorse critiche il prima possibile per ridurre la lunghezza del percorso critico.

Feedback