Indice della guida · ← Capitolo precedente · Capitolo successivo →
Passo 18: confronta prestazioni equivalenti
Ripeti i test sulle stesse pagine e con gli stessi criteri iniziali. Verifica che immagini, contenuti e funzioni siano comparabili. Una pagina incompleta può ottenere un ottimo punteggio semplicemente perché non carica ciò che serve. Prima di celebrare un miglioramento, controlla che la copertina, il menu e i collegamenti siano ancora presenti.
Costruisci una tabella con indirizzo, data, risultato precedente, risultato successivo e modifica effettuata. Separare le modifiche aiuta a capire quali siano utili. Se cambi hosting, tema, immagini e script insieme, potresti ottenere un miglioramento senza sapere come mantenerlo, oppure introdurre un problema difficile da localizzare.
Passo 19: alleggerisci prima le immagini principali
Apri una pagina lenta e individua l’immagine più grande nella parte iniziale. Verifica le dimensioni reali del file e quelle con cui viene mostrato. Una fotografia destinata a un riquadro relativamente piccolo non dovrebbe essere caricata automaticamente nella massima risoluzione della fotocamera. Esporta una versione adeguata e controllane la leggibilità su schermi diversi.
Confronta formati moderni come WebP o AVIF quando disponibili nel tuo flusso di lavoro. La scelta va verificata sulle fotografie reali: osserva bordi, scritte e dettagli, senza affidarti soltanto alla dimensione in kilobyte. Una compressione eccessiva può danneggiare proprio gli elementi che rendono utile una guida, come una schermata con pulsanti piccoli.
La guida Google all’ottimizzazione LCP evidenzia l’importanza di rendere tempestivamente disponibile il contenuto principale. Non applicare il caricamento differito all’immagine che costituisce il contenuto principale iniziale. Il lazy loading è invece utile per immagini più in basso, che il visitatore non vede subito. Controlla il comportamento dopo ogni esportazione.
Passo 20: impedisci che la pagina salti
Riserva spazio a immagini, video e contenuti incorporati. Gli attributi di dimensione e proporzioni coerenti aiutano il browser a preparare il layout. La documentazione sul CLS spiega perché elementi aggiunti o ridimensionati durante il caricamento possono spostare ciò che l’utente sta leggendo o tentando di selezionare.
Fai una prova pratica sul telefono: apri la pagina e prova a toccare un collegamento mentre le immagini si caricano. Se il collegamento si sposta, annota l’elemento che lo provoca. Un banner tardivo, un font sostitutivo o un riquadro pubblicitario possono essere più importanti del tempo necessario a scaricare il documento HTML.
Passo 21: riduci il lavoro del browser
Valuta se servono davvero slider, animazioni ripetute, video automatici e molti servizi incorporati. Per una guida testuale, una copertina ferma e un collegamento a un video possono essere sufficienti. Non eliminare funzioni utili soltanto per migliorare un numero, ma chiediti quali componenti aiutino concretamente il lettore a completare il suo compito.
La guida sull’INP collega la reattività anche al lavoro eseguito nel browser. Consegnare velocemente un file non impedisce a uno script pesante di occupare il dispositivo. Un telefono economico rende questi problemi più visibili di un computer recente. Verifica menu, apertura dei pannelli e ricerca anche durante il caricamento.
Prompt: “Analizza questo elenco di risorse e questi risultati. Ordina le modifiche per impatto atteso e rischio. Per ogni proposta indica il problema osservato, il test da fare e la funzione che potrebbe rompersi. Non suggerire di eliminare tutto il JavaScript o di minificare file già ottimizzati. Preferisci cambiamenti riproducibili nell’origine”.
Passo 22: mantieni semplice la cache
Pages gestisce già la distribuzione dei file e la cache secondo le proprie impostazioni. La guida Serving Pages raccomanda normalmente di evitare regole personalizzate di cache non necessarie. Non iniziare con una regola universale che conservi qualsiasi file per un anno: rischieresti di mostrare versioni vecchie dopo gli aggiornamenti.
Una cache molto lunga può essere adatta a risorse il cui nome cambia quando cambia il contenuto. Non applicarla indiscriminatamente a index.html o a un foglio di stile sempre chiamato style.css. Prima stabilizza il flusso di pubblicazione; soltanto dopo valuta ottimizzazioni avanzate con una strategia chiara per aggiornare e invalidare le risorse.
Quando considerare riuscita l’ottimizzazione
Il risultato desiderato è una lettura rapida, stabile e completa su dispositivi reali. Conserva misurazioni, ma ascolta anche chi prova il sito. Chiedi a una persona di trovare una guida senza spiegazioni: se si perde in un menu complicato, il problema non si risolve con una CDN. La velocità sostiene l’utilità, non la sostituisce.
Indice della guida · ← Capitolo precedente · Capitolo successivo →
