Mantieni un numero ridotto di richieste e dimensioni ridotte per i trasferimenti

Lighthouse indica quante richieste di rete sono state effettuate e quanti dati sono stati trasferiti durante il caricamento della pagina:

Uno screenshot del numero di richieste di Lighthouse Keep basso e il controllo di dimensioni ridotte per i trasferimenti
  • I valori Richieste e Dimensioni trasferimento per la riga Totale vengono calcolati aggiungendo i valori per le righe Image, Script, Font, Stylesheet, Other, Document e Media.
  • La colonna Terze parti non tiene conto dei valori della riga Totale. Il suo scopo è riferirti a quante delle richieste totali e in che misura le dimensioni di trasferimento totali provengono da domini di terze parti. Le richieste di terze parti potrebbero essere una combinazione di qualsiasi altro tipo di risorsa.

Come ridurre il numero di risorse e le dimensioni di trasferimento

L'effetto di un numero elevato di risorse o di grandi dimensioni di trasferimento sulle prestazioni del carico dipende dal tipo di risorsa richiesta.

CSS e JavaScript

Per impostazione predefinita, le richieste di file CSS e JavaScript bloccano la visualizzazione. In altre parole, i browser non sono in grado di visualizzare i contenuti sullo schermo fino al termine di tutte le richieste CSS e JavaScript. Se uno di questi file è ospitato su un server lento, il singolo server lento può ritardare l'intero processo di rendering. Consulta le sezioni Ottimizzare JavaScript, Ottimizzare le risorse di terze parti e Ottimizzare il codice CSS per scoprire come spedire solo il codice necessario.

Metriche interessate: Tutte

Immagini

Le richieste di immagini non bloccano la visualizzazione come CSS e JavaScript, ma possono comunque influire negativamente sulle prestazioni del caricamento. Un problema comune si verifica quando un utente di un dispositivo mobile carica una pagina e vede che è iniziato il caricamento delle immagini, ma il completamento richiede un po' di tempo. Consulta la sezione Ottimizzare le immagini per scoprire come caricare più velocemente le immagini.

Metriche interessate: First Contentful Paint, First Meaningful Paint, Speed Index

Caratteri

Il caricamento non efficiente dei file dei caratteri può causare testo invisibile durante il caricamento della pagina. Consulta l'articolo Ottimizzare i caratteri per scoprire come utilizzare per impostazione predefinita un carattere disponibile sul dispositivo dell'utente e passare al carattere personalizzato al termine del download.

Metriche interessate: First Contentful Paint

Documenti

Se il file HTML è di grandi dimensioni, il browser deve dedicare più tempo all'analisi dell'HTML e alla creazione dell'albero DOM a partire dall'HTML analizzato.

Metriche interessate: First Contentful Paint

Contenuti multimediali

I file GIF animati sono spesso molto grandi. Per scoprire come caricare le animazioni più velocemente, consulta l'articolo Sostituire le GIF con i video.

Metriche interessate: First Contentful Paint

Utilizzare i budget delle prestazioni per evitare regressioni

Dopo aver ottimizzato il codice per ridurre il numero di richieste e le dimensioni di trasferimento, consulta Impostare i budget delle prestazioni per scoprire come evitare regressioni.

Risorse

Codice sorgente per il controllo Mantieni il numero di richieste in basso e le dimensioni di trasferimento ridotte