Cos'è
Prima che un browser possa mostrare qualsiasi parte di una pagina, deve prima scaricare per intero il documento HTML della pagina (o almeno abbastanza per iniziare a lavorarci), separatamente da immagini, video o altri media, che si caricano successivamente. Questo controllo esamina specificamente la dimensione di quel documento HTML iniziale, segnalandola quando è cresciuta in modo insolitamente grande.
I documenti HTML tipicamente si gonfiano di dimensione quando molto contenuto viene incorporato direttamente in linea, grandi blocchi di codice di stile, script o contenuti ripetuti incollati direttamente nella pagina, invece di essere mantenuti in file separati e riutilizzabili che il browser può caricare una volta e mettere in cache.
Perché è importante
Un documento HTML più grande impiega più tempo, in modo misurabile, per essere scaricato ed elaborato prima che il browser possa iniziare a renderizzare qualsiasi cosa, il che ritarda proprio la primissima cosa che un visitatore vede, non solo i contenuti secondari più in basso nella pagina. Questo effetto è più pronunciato sulle connessioni mobili più lente, dove ogni frammento di dati in più aggiunge tempo reale e percepito prima che la pagina inizi a sembrare reattiva.
Un file HTML gonfio è anche spesso sintomo di un problema strutturale più profondo: contenuto o codice che avrebbe dovuto essere organizzato in file separati e memorizzabili in cache viene invece duplicato in linea nella pagina, o addirittura in ogni pagina del sito.
Come risolverlo
- Individua cosa costituisce la maggior parte del file: gli strumenti per sviluppatori del browser possono mostrare la ripartizione delle dimensioni delle risorse di una pagina, incluso il documento HTML di base stesso.
- Sposta grandi blocchi di CSS in linea (codice di stile) in un file
.cssseparato che il browser può caricare una volta e riutilizzare su tutte le pagine, invece di ripeterlo in linea su ogni pagina. - Sposta grandi blocchi di JavaScript in linea in file
.jsseparati per lo stesso motivo. - Controlla la presenza di contenuto duplicato per errore nel codice della pagina (lo stesso blocco ripetuto più di una volta) e rimuovi i duplicati.
- Se sei su un website builder, questo è di solito gestito per te: una pagina insolitamente grande qui è più spesso causata da un pesante blocco di codice personalizzato che dalla piattaforma stessa, quindi controlla eventuali blocchi di codice personalizzati che hai aggiunto.