LCP su WordPress: Dalla Diagnosi alla Soluzione in 20 Minuti
Il Largest Contentful Paint è la metrica Core Web Vitals che fallisce più spesso su WordPress. La soglia è 2.5 secondi. Il sito WordPress medio su hosting condiviso? 3.5-5 secondi. Ecco come scendere sotto 2.5s senza cambiare hosting.
Trova il Tuo Elemento LCP
Prima di ottimizzare, devi sapere COSA è lento. L’elemento LCP cambia per ogni pagina.
// Incolla questo nella console di Chrome DevTools
new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
console.log('LCP Element:', lastEntry.element);
console.log('LCP Time:', lastEntry.startTime + 'ms');
}).observe({type: 'largest-contentful-paint', buffered: true});Nella maggior parte dei siti WordPress, l’elemento LCP è un’immagine. Nel 60% dei casi è l’immagine hero. Nel 25% è la featured image del post. Nel 15% è un blocco di testo H1.
5 Fix per LCP Immagine
1. fetchpriority=”high” sull’immagine LCP
Dice al browser: scarica questa immagine prima di tutto il resto.
<img src="hero.webp" fetchpriority="high" width="1200" height="600" alt="...">WordPress 6.3+ aggiunge automaticamente fetchpriority=”high” alla prima immagine del contenuto. Ma se l’immagine hero è nel template del tema (non nel contenuto), devi aggiungerlo manualmente.
2. Preload dell’immagine LCP
<!-- Nel <head> del template -->
<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high">Il preload inizia il download dell’immagine prima che il browser analizzi l’HTML. Guadagno tipico: 200-500ms.
3. NON usare lazy loading sull’LCP
WordPress 5.5+ aggiunge loading="lazy" a tutte le immagini. Ma l’immagine LCP NON deve avere lazy loading (ritarda il caricamento). WordPress 6.3+ dovrebbe escluderla automaticamente, ma verifica:
// Rimuovi lazy loading dalla prima immagine
add_filter('wp_img_tag_add_loading_optimization_attrs', function($value, $image, $context) {
// Skip lazy loading per la prima immagine nel contenuto
static $first = true;
if ($first && $context === 'the_content') {
$first = false;
$value['loading'] = false; // Rimuovi lazy
}
return $value;
}, 10, 3);4. Formato WebP/AVIF
Una JPEG da 500KB diventa 200KB in WebP e 150KB in AVIF. Meno bytes = download più veloce = LCP migliore.
# Conversione batch con cwebp
find wp-content/uploads -name "*.jpg" -exec sh -c 'cwebp -q 80 "$1" -o "${1%.jpg}.webp"' _ {} \;
# O usa un plugin: ShortPixel, Imagify, o EWWW Image Optimizer5. Dimensioni responsive con srcset
WordPress genera automaticamente srcset per le immagini nel contenuto. Ma i temi custom spesso li ignorano. Un’immagine da 2400px servita su mobile da 375px è spreco di banda.
<img srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
src="hero-1200.webp" width="1200" height="600" alt="...">3 Fix per LCP Server-Side
6. Cache di pagina
TTFB alto = LCP alto. La cache di pagina riduce il TTFB dell’80%. Usa FastCGI cache Nginx (il migliore) o un plugin come WP Super Cache.
7. Riduci il render-blocking
Ogni file CSS nel <head> ritarda il primo render. Il browser non mostra nulla finché non ha scaricato tutti i CSS. Critical CSS (inline il CSS above-the-fold, defer il resto) riduce il render-blocking di 200-400ms.
8. CDN per immagini
Servire le immagini da un CDN edge vicino all’utente riduce la latenza di download. Cloudflare (free) + Polish (ottimizzazione automatica immagini) è la combinazione più semplice.
Misura il Risultato
# PageSpeed Insights da CLI
npx psi https://tuosito.com --strategy=mobile | grep "Largest Contentful Paint"
# O usa l'API
curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://tuosito.com&strategy=mobile" | \
jq '.lighthouseResult.audits["largest-contentful-paint"].numericValue'FAQ
Il lazy loading peggiora l’LCP?
Solo se è applicato all’immagine LCP. Per tutte le altre immagini (below the fold), il lazy loading migliora le performance complessive riducendo il payload iniziale. La regola: niente lazy loading above the fold, lazy loading su tutto il resto.
WebP o AVIF?
WebP ha il 97% di supporto browser. AVIF ha l’87% ma comprime meglio (20-30% in meno di WebP). Usa AVIF con fallback WebP, oppure solo WebP se vuoi massima compatibilità. In ogni caso, non servire JPEG nel 2026.
Il mio LCP è un video background. Come lo ottimizzo?
Non farlo. Un video background come elemento LCP è la scelta peggiore per le performance. Sostituiscilo con un’immagine statica o un CSS gradient. Se il video è essenziale, caricalo lazy dopo il first paint e usa un poster image come LCP.