Come le dimensioni delle immagini influenzano i Core Web Vitals

Quali Core Web Vitals possono cambiare?

Largest Contentful Paint (LCP) misura quando viene mostrata l’immagine o il blocco di testo visibile più grande. Può essere una foto, ma non automaticamente il logo o il file maggiore. Identifica prima l’elemento. La guida LCP di Google spiega ritardi di individuazione, download e rendering.

Cumulative Layout Shift (CLS) misura spostamenti imprevisti. Senza spazio riservato, le immagini possono spingere il contenuto quando arrivano. La guida CLS consiglia dimensioni che consentano al browser di riservare le proporzioni corrette.

Interaction to Next Paint (INP) riguarda la risposta alle interazioni. Comprimere una foto non corregge automaticamente un menu lento o un gestore di clic pesante. Indagali separatamente con la documentazione INP.

Quando un risultato Core Web Vitals è buono?

La tabella riporta le soglie per un buon risultato della guida Core Web Vitals di Google. Tutte e tre le metriche devono raggiungere gli obiettivi al 75º percentile delle visite reali, valutando mobile e desktop separatamente. Un’immagine più leggera o un singolo buon test di laboratorio non dimostrano che la pagina superi la valutazione. Se il problema è INP, esamina i ritardi nelle interazioni anziché ricomprimere la foto.

Inizia dall’immagine principale visibile

Su una pagina prodotto controlla la foto principale; in un articolo, copertina o titolo indicato dal rapporto. Annota peso, dimensioni in pixel e dimensioni visualizzate prima di creare la copia, per confrontare prima e dopo.

Se la foto è eccessiva per lo spazio, prepara una versione minore con il ridimensionatore. Confronta poi WebP con JPG in WebP. Valuta dettagli e testo utili al visitatore, non soltanto i kilobyte risparmiati.

Lascia che il browser carichi presto l’immagine principale

Non usare caricamento differito per l’immagine LCP. Anche un file piccolo arriva tardi se gli script ne ritardano l’individuazione. Chiedi allo sviluppatore del tema o sito di esaminare la richiesta reale se comprimere aiuta poco.

Usa il caricamento differito selettivamente per immagini più in basso. La prima foto visibile di una galleria serve subito; le successive possono arrivare quando il visitatore si avvicina.

Identifica l’immagine LCP misurata sulla pagina pubblicata. Deve essere individuata presto e non caricata in differita. Uno sviluppatore può valutare fetchpriority="high" per quella precisa immagine; applicarlo a tutta la galleria vanifica la priorità. Ricontrolla le richieste di rete.

Mantieni stabile il layout

Indica larghezza e altezza nel codice e mantieni le proporzioni con stili responsive. Controlla telefono stretto e desktop ampio. Per ritagli intenzionali, riserva coerentemente l’area visualizzata.

Se gli spostamenti persistono, controlla banner, contenuti incorporati e font. Cambiare foto non risolve un avviso inserito sopra l’articolo dopo che la pagina è apparsa.

Dimensioni HTML come width="1200" e height="800" indicano le proporzioni. CSS può ridurre la visualizzazione con max-width: 100% e height: auto. Controlla che il tema non imponga un’altezza fissa incompatibile. Una scheda ritagliata richiede uno spazio riservato coerente.

Se il paragrafo salta ancora quando appare un file minore, può mancare lo spazio riservato. Correggi dimensioni o contenitore e riprova. Al contrario, un riquadro stabile può contenere un’immagine lenta: riservare spazio non riduce il file.

Verifica una modifica alla volta

1. Annota URL, dispositivo ed elemento problematico.
2. Modifica un’immagine o impostazione di consegna.
3. Conferma che la pagina richieda il nuovo file, non il vecchio in cache.
4. Ripeti il test e controlla la schermata iniziale.
5. Conserva la modifica se qualità e misurazione la giustificano.

L’export è solo parte delle prestazioni. Continua con il flusso PageSpeed per le immagini.