Come le immagini influiscono sui Core Web Vitals - e come rimediare
Le immagini sono responsabili della maggior parte dei problemi di LCP (Largest Contentful Paint). Se i tuoi Core Web Vitals sono rossi, probabilmente la colpa è delle immagini. Ecco esattamente come risolvere.
Provalo ora - gratis, senza registrazione.
Comprimi le immagini in modo intelligente →Immagini e LCP (Largest Contentful Paint)
L'LCP misura quando finisce di caricarsi l'elemento visibile più grande. Nella maggior parte delle pagine è un'immagine. Google vuole un LCP sotto i 2,5 secondi.
Come migliorare l'LCP:
- Usa WebP/AVIF: file più leggeri del 25-50% = download più veloce. Converti ora.
- Ridimensiona le immagini: servi la dimensione giusta per il contenitore. Ridimensiona qui.
- Precarica le immagini hero:
<link rel="preload" as="image" href="hero.webp"> - Usa una CDN: servi le immagini da server edge vicini agli utenti.
- Imposta fetchpriority:
<img fetchpriority="high">per le immagini sopra la piega.
Immagini e CLS (Cumulative Layout Shift)
Il CLS misura gli spostamenti imprevisti del layout. Le immagini senza dimensioni fanno saltare la pagina quando si caricano.
Come migliorare il CLS:
- Imposta sempre width e height:
<img width="800" height="600"> - Usa la proprietà CSS aspect-ratio:
aspect-ratio: 16/9;come alternativa moderna - Evita il caricamento differito sopra la piega: non aggiungere
loading="lazy"all'immagine hero
La checklist delle correzioni rapide
- Applica la Compressione intelligente a tutte le immagini (qualità ottimale automatica)
- Ridimensiona alle dimensioni reali di visualizzazione
- Aggiungi gli attributi width/height a tutti i tag
<img> - Precarica l'immagine LCP
- Carica in modo differito tutto ciò che sta sotto la piega
- Ripeti il test su PageSpeed Insights
Domande frequenti
Qual è un buon punteggio LCP?
Sotto i 2,5 secondi è "Buono" (verde). Da 2,5 a 4 secondi è "Da migliorare" (giallo). Oltre i 4 secondi è "Scarso" (rosso). Spesso basta ottimizzare le immagini per passare dal rosso al verde.
Devo caricare in modo differito tutte le immagini?
No! Non caricare in modo differito le immagini sopra la piega (soprattutto l'immagine hero/LCP). Usa il caricamento differito solo per le immagini inizialmente fuori schermo. Esagerare peggiora proprio l'LCP.
Pronto? 100% gratis, funziona nel browser.
Comprimi le immagini in modo intelligente →