Analisi del peso della pagina

Ogni file ha due dimensioni

C’è la dimensione che un file ha sulla rete e quella che ha una volta decompresso. Mettiamo che il tuo server comprima uno script da 400 KB fino a 110 KB. Il visitatore paga 110 KB di download e di traffico dati, e il suo telefono deve comunque leggere tutti i 400 KB. Questo strumento dà il voto sul primo numero, i byte trasferiti, e mostra il secondo accanto.

I byte diventano attesa in fretta. Sul profilo 4G lento che Lighthouse usa per i suoi test, 1,6 megabit al secondo, una pagina da 2 MB impiega circa dieci secondi a scaricarsi, e questo prima che giri un solo script.

Cosa viene scaricato

Una volta ottenuto l’HTML, lo strumento richiede ciò che un browser richiederebbe al primo caricamento:

• i fogli di stile e i file annunciati con rel="preload" o modulepreload;
• gli script con un src, tranne i fallback nomodule e i tipi di script che un browser non esegue;
• le immagini: per srcset e <picture> prende il candidato più grande che sceglierebbe un browser desktop, e legge data-src sulle immagini in lazy loading;
• i poster dei video, la favicon e le immagini negli attributi style inline;
• i font dichiarati nelle regole @font-face (il file WOFF2 quando c’è, al massimo dodici font) e i fogli di stile richiamati con @import.

Alcuni limiti tengono il controllo breve: 80 file, 6 MB per file, 15 MB in totale. Se una pagina supera gli 80 file, il numero di richieste viene mostrato come “≥”.

La scala dei voti

Per darti un’idea, la pagina mobile mediana misurata dall’HTTP Archive pesa circa 2,3 MB, che qui prende una D. Quindi una pagina può essere perfettamente nella media del web ed essere comunque lenta su un telefono.

Cosa fare con i risultati

Immagini oltre 200 KB

Quasi sempre un’immagine servita più grande di come viene mostrata. Esportala alla larghezza di visualizzazione, o al doppio per gli schermi ad alta densità, e lascia che srcset offra versioni più piccole ai telefoni.

Immagini JPEG o PNG

Quando il server lo consente, lo strumento ricodifica le otto immagini più pesanti in WebP (qualità 80) e AVIF (qualità 55) e mostra la dimensione di ciascun risultato. Così il risparmio viene misurato sulle tue immagini. Servi il nuovo formato con un fallback:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="630" alt="…">
</picture>

Immagini senza width e height

Questo non riguarda il peso. È il motivo per cui il testo salta mentre la pagina si carica. Aggiungi entrambi gli attributi.

File di testo inviati senza compressione

HTML, CSS, JavaScript o SVG oltre 1,5 KB arrivati senza gzip né Brotli. L’audit di compressione e cache riporta le impostazioni del server.

Più di 1 MB di JavaScript, o 300 KB di font

Togli le librerie e i plugin che nessuno usa, carica il resto solo sulle pagine che ne hanno bisogno, e tieni due o tre pesi di font in WOFF2.

La cifra sul carbonio, e cosa non viene contato

La stima segue la versione 4 del modello Sustainable Web Design. Conta 0,300 kWh per ogni gigabyte trasferito, che copre data center, reti e dispositivi dei visitatori insieme alla loro fabbricazione, e lo moltiplica per una media mondiale di 494 g di CO₂e per kWh. Fanno circa 0,15 g per megabyte. Il confronto con un’auto a benzina usa 170 g per chilometro. Prendila come un ordine di grandezza, utile per confrontare due versioni di una pagina.