Ottimizzazione del percorso di rendering critico

Ilya Grigorik
Ilya Grigorik

Data di pubblicazione: 31 marzo 2014

Per ottenere il tempo di rendering iniziale più breve possibile, dobbiamo minimizzare tre variabili:

  • Il numero di risorse fondamentali.
  • 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.

Analogamente, la lunghezza del percorso critico è una funzione del grafo di dipendenza tra le risorse critiche e le relative dimensioni in byte: alcuni download di risorse possono essere avviati solo dopo l'elaborazione di una risorsa precedente e, maggiore è la risorsa, più viaggi di andata e ritorno sono necessari per il download.

Infine, meno byte critici deve scaricare il browser, più velocemente può elaborare i contenuti e renderli visibili sullo schermo. Per ridurre il numero di byte, possiamo ridurre il numero di risorse (eliminandole o rendendole non critiche) e assicurarci di ridurre al minimo le dimensioni del trasferimento comprimendo e ottimizzando ogni risorsa.

La sequenza generale di 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 fondamentali: eliminale, posticipa il loro download, contrassegnale come asincrone e altre considerazioni importanti.
  3. Ottimizza il numero di byte critici per ridurre il tempo di download (numero di roundtrip).
  4. Ottimizza l'ordine di caricamento delle risorse fondamentali rimanenti: scarica tutti gli asset critici il prima possibile per accorciare la lunghezza del percorso critico.

Feedback