Il sito scarica due volte immagini, font o script: come trovare i trasferimenti inutili

Preparare una visita di prova con un inizio e una fine

Scegli una pagina e descrivi il percorso: apertura iniziale, accettazione delle preferenze, scorrimento fino alla galleria ed eventuale apertura di un componente. Una risorsa caricata dopo l’apertura della chat risponde a una situazione diversa da un file trasferito subito senza essere usato. Per confrontare due versioni del sito, mantieni identici pagina, azioni e dimensione della finestra.

Chiedi al tecnico di distinguere la prima visita da quella con cache già disponibile. Gli strumenti di sviluppo possono disabilitare la cache durante il controllo; se l’opzione resta attiva, il risultato non descrive il normale riutilizzo dei file. Anche un registro conservato attraverso più navigazioni può far sembrare simultanee richieste avvenute in pagine differenti.

Usa una sessione di prova pulita e annota le condizioni iniziali, senza cambiare insieme rete, dispositivo e configurazione. Conserva il risultato prima dell’intervento: servirà a verificare se è diminuito un trasferimento reale oppure soltanto il numero di righe visualizzato nello strumento.

Verificare che il file sia stato davvero scaricato di nuovo

Nel pannello Network di Chrome, il tecnico può confrontare risorse, dimensioni trasferite e origine delle richieste. Due voci con lo stesso nome breve non dimostrano due download completi: bisogna esaminare indirizzo, risposta e provenienza del contenuto.

La documentazione sulla cache HTTP distingue il riutilizzo dalla convalida: una risposta 304 non invia nuovamente il corpo del file, pur comportando una richiesta. Raccogli quindi sia il costo di rete sia il comportamento, senza considerare automaticamente difettosa ogni voce ripetuta.

Confrontare indirizzi, versioni e componenti che richiedono i file

Una libreria può arrivare dal tema e da un’estensione; un font può essere ospitato sul dominio e richiamato anche da un servizio esterno. Verifica l’indirizzo completo, compresi eventuali parametri di versione, e risali al punto in cui la risorsa viene dichiarata. Il nome finale del file può essere identico anche se i contenuti sono differenti.

Chiedi una mappa minima: risorsa, componenti che la usano, versione richiesta e pagina su cui compare. Prima di rimuovere una copia di uno script, il tecnico deve verificare compatibilità e ordine di esecuzione. Due versioni della stessa libreria possono segnalare un problema da risolvere, ma cancellarne una alla cieca può bloccare un modulo o una galleria.

Evita inoltre di confondere caricamento ed esecuzione: il browser può riutilizzare un file e il codice della pagina può comunque avviare un componente due volte. Se il sintomo è un doppio comportamento, serve anche un controllo del codice. Questa guida si concentra sul trasferimento; le due verifiche possono essere collegate senza avere la stessa causa.

Controllare che il browser scelga l’immagine necessaria

Per una copertina, confronta la risorsa effettivamente scelta sul telefono con quelle richieste durante l’avvio. Una pagina può contenere una foto come immagine e anche come sfondo, oppure avere due componenti distinti per telefono e computer. Il fatto che uno sia nascosto visivamente non dimostra da solo che non abbia causato un caricamento: va controllato il comportamento reale.

Quando si usano immagini responsive, precaricamento e immagine finale devono descrivere scelte coerenti. La guida web.dev sul precaricamento delle immagini responsive spiega come anticipare la selezione senza imporre un file diverso da quello che servirà alla pagina. La configurazione va verificata alle larghezze rilevanti, non soltanto sul monitor del tecnico.

Esempio ipotetico: la pagina anticipa una grande copertina per computer, poi mostra sul telefono una foto alternativa. Il controllo deve stabilire se entrambe siano state trasferite e quale regola abbia anticipato la prima. La correzione deve conservare il ritaglio adatto e la qualità visiva, come approfondito nella guida alle immagini del sito.

Verificare i precaricamenti di font e altre risorse

Il precaricamento è un’indicazione per anticipare una risorsa che servirà alla pagina. Se si anticipa il file sbagliato, una versione non utilizzata o una risorsa descritta in modo incoerente, si può aggiungere lavoro anziché ridurre l’attesa. Controlla prima i precaricamenti esistenti, evitando di aggiungerne altri come soluzione generica alla lentezza.

Per i font, fai confrontare il file dichiarato nel foglio di stile e quello anticipato: indirizzo, formato e modalità della richiesta devono essere coerenti. La documentazione MDN su preload descrive il ruolo del tipo di risorsa e dell’attributo crossorigin, anche nel caso dei font. È un controllo tecnico sul caricamento, non un motivo per rimuovere indiscriminatamente quell’attributo.

Verifica quali pesi e varianti siano usati nella pagina. Un file trasferito una volta ma mai impiegato è uno spreco diverso dal doppio download e va registrato separatamente. La guida ai font che compaiono in ritardo approfondisce la leggibilità durante il caricamento.

Correggere il componente responsabile nella copia di prova

Una volta individuata la duplicazione, intervieni nel punto che la produce: configurazione del tema, estensione, sistema di ottimizzazione o modello della pagina. La cancellazione del file dal server può generare errori senza eliminare la richiesta. Chiedi invece una modifica che rimuova il richiamo superfluo o renda coerenti quelli che devono restare.

Prepara il confronto nella copia di prova e cambia una sola causa alla volta. Dopo la modifica, controlla le pagine che condividono quel componente: una libreria superflua sulla homepage potrebbe essere necessaria nel modulo di preventivo. Se il file è condiviso, concorda dove deve essere caricato e verifica che l’ordine delle dipendenze resti corretto.

Per una correzione dei precaricamenti, considera anche il contenuto principale: ridurre i trasferimenti totali non deve far arrivare molto più tardi la copertina o il testo. Il risultato utile unisce quantità di dati e tempi del percorso. Un report che segnala soltanto meno richieste può nascondere una regressione visibile al visitatore.

Confrontare risparmio, visualizzazione e funzioni

Ripeti la prova iniziale e conserva il confronto: file coinvolti, byte trasferiti, eventuali attese e differenze nella pagina. Esegui almeno una visita senza copia già disponibile e una visita con riutilizzo consentito. Se la modifica riguarda risorse responsive, controlla telefono e computer mantenendo per ciascuno condizioni confrontabili.

Completa le azioni importanti: aprire il menu, usare i filtri, inviare un modulo di prova e raggiungere il carrello quando presente. Le immagini devono avere ancora il ritaglio previsto e il testo deve usare i caratteri corretti. La guida su menu e moduli guasti dopo l’ottimizzazione aiuta a verificare le conseguenze sulle funzioni.

Annota la regola corretta e il componente responsabile, così un aggiornamento non reintroduce il richiamo doppio. Il risultato da consegnare è verificabile: una specifica risorsa inutile è stata eliminata dal percorso e le funzioni previste continuano a riuscire. Miglioramenti di visite, vendite o posizionamento richiedono misurazioni separate e non si deducono dal solo numero di file.

Domande frequenti

Due righe nel pannello Network indicano sempre un doppio download?

No. Può esserci riutilizzo della cache, convalida oppure una richiesta legata a un’altra navigazione. Controlla indirizzi completi, risposte e byte trasferiti prima di classificare la duplicazione.

Devo togliere tutti i precaricamenti?

No. Mantieni quelli che anticipano risorse necessarie e coerenti con l’uso effettivo. Correggi quelli inutili o configurati male e verifica anche il tempo di comparsa del contenuto principale.

Posso eliminare dal server una delle copie dello script?

Prima serve ricostruire chi richiama il file e quali funzioni dipendono da esso. La modifica deve correggere il caricamento nella pagina o nel componente e passare un collaudo delle funzioni interessate.