LCP Immagine Hero WordPress: Ottimizzazione Completa

Juan Camilo Auriti

Perché l’immagine hero rallenta il LCP

L’immagine hero è nella maggior parte dei casi l’elemento Largest Contentful Paint (LCP) su siti WordPress. Google considera il LCP uno dei Core Web Vitals più importanti: il target è sotto 2.5 secondi per il 75° percentile delle visite.

Il problema principale è che WordPress, per default, applica lazy loading anche alle immagini above-the-fold. Inoltre, i theme builder come Elementor o Divi aggiungono spesso livelli di complessità che ritardano il rendering dell’immagine hero.

Secondo i dati di HTTPArchive (maggio 2026), il 63% dei siti WordPress presenta un LCP superiore a 2.5 secondi, e nel 48% dei casi l’elemento LCP è proprio un’immagine hero.

Diagnosi: identificare l’elemento LCP

Prima di ottimizzare, devi confermare che l’immagine hero sia effettivamente il tuo elemento LCP.

Strumenti per l’analisi

Chrome DevTools: apri la tab Performance, registra il caricamento pagina e cerca la riga “LCP” nella timeline
PageSpeed Insights: nella sezione “Diagnostics” trovi l’elemento LCP evidenziato con screenshot
WebPageTest: il filmstrip mostra esattamente quando appare l’elemento LCP
Core Web Vitals Chrome Extension: overlay in real-time sull’elemento LCP durante la navigazione

Verifica anche i Field Data (dati reali utenti) tramite Google Search Console nella sezione Core Web Vitals. I Lab Data di PSI sono utili per il debug, ma i Field Data determinano il ranking.

Step 1: Rimuovere lazy loading dall’immagine hero

WordPress 5.5+ aggiunge automaticamente loading="lazy" a tutte le immagini. Per l’immagine hero questo è controproducente.

Soluzione via filtro WordPress

add_filter('wp_lazy_loading_enabled', function($default, $tag_name, $context) {
    if ('img' === $tag_name && is_front_page()) {
        // Disabilita lazy loading per la prima immagine
        global $wp_query;
        if (!isset($wp_query->lazy_loading_disabled)) {
            $wp_query->lazy_loading_disabled = true;
            return false;
        }
    }
    return $default;
}, 10, 3);

Questo approccio disabilita il lazy loading solo per la prima immagine della homepage. Per pagine specifiche, modifica la condizione is_front_page().

Alternativa per theme builder

Se usi Elementor, Divi o Bricks, spesso l’immagine hero non passa attraverso i filtri standard WordPress. In questo caso:

Elementor: vai in Elementor > Settings > Features > Lazy Load e escludi l’ID specifico del widget
Divi: nelle impostazioni del modulo immagine, tab Advanced > Attributes > aggiungi loading|eager
Bricks: nelle impostazioni immagine, disabilita manualmente “Lazy Load”

Step 2: Implementare preload per l’immagine hero

Il preload hint dice al browser di scaricare l’immagine hero con massima priorità, prima ancora di parsare il CSS.

Codice per functions.php

add_action('wp_head', function() {
    if (is_front_page()) {
        // Recupera l'URL dell'immagine hero
        $hero_image_id = get_theme_mod('hero_image_id');
        if ($hero_image_id) {
            $hero_url = wp_get_attachment_image_url($hero_image_id, 'full');
            $hero_srcset = wp_get_attachment_image_srcset($hero_image_id, 'full');
            
            echo '';
        }
    }
}, 1);

La priorità 1 assicura che il preload venga iniettato prima di altri script che potrebbero aggiungere preload non necessari.

Attenzione al responsive

Se usi immagini diverse per mobile/desktop, implementa preload condizionale via media query:

<link rel="preload" as="image" 
      href="hero-mobile.jpg" 
      media="(max-width: 768px)">
<link rel="preload" as="image" 
      href="hero-desktop.jpg" 
      media="(min-width: 769px)">

Evita di fare preload di entrambe le versioni: sprecheresti banda e potresti peggiorare il LCP su connessioni lente.

Step 3: Ottimizzare formato e compressione

Il formato immagine impatta drasticamente sui tempi di download.

Benchmark formati (immagine hero 1920×1080)

JPEG qualità 85: ~180KB – compatibilità universale
WebP qualità 85: ~95KB – supporto browser 97%+ (maggio 2026)
AVIF qualità 75: ~65KB – supporto browser 89%, encoding più lento

Per WordPress, il plugin consigliato è Imagify o ShortPixel, entrambi con supporto AVIF e ottimizzazione automatica. Configurazione ideale:

Attiva conversione WebP e AVIF
Imposta qualità 82-85 per immagini hero (bilancio qualità/peso)
Abilita <picture> tag per fallback automatico
Disabilita la conversione per immagini sotto 10KB (overhead inutile)

Implementazione manuale con picture tag

<picture>
    <source srcset="hero.avif" type="image/avif">
    <source srcset="hero.webp" type="image/webp">
    <img src="hero.jpg" 
         alt="Descrizione hero" 
         fetchpriority="high" 
         width="1920" 
         height="1080">
</picture>

Specifica sempre width e height per prevenire layout shift (CLS).

Step 4: Ottimizzare il Critical Path CSS

Anche con preload, se il CSS che definisce le dimensioni dell’immagine hero arriva tardi, il browser ritarda il rendering.

Inline CSS per l’hero

Estrai il CSS minimo necessario per renderizzare l’hero e iniettalo inline nell’<head>:

<style>
.hero-section {
    width: 100%;
    height: 80vh;
    position: relative;
}
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>

Plugin come WP Rocket (v3.16+) o FlyingPress automatizzano questo processo con l’opzione “Critical CSS”.

Defer non-critical CSS

Carica il CSS completo del theme in modo asincrono:

<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

Step 5: CDN e ottimizzazione server

Il server response time (TTFB) impatta direttamente il LCP. Target: sotto 200ms.

Checklist server

CDN immagini: usa Cloudflare (gratuito) o BunnyCDN (€1/TB) con Polish/Optimizer attivo
HTTP/2 o HTTP/3: verifica su KeyCDN HTTP/2 Test che il tuo hosting supporti multiplexing
PHP 8.2+: circa 15-20% più veloce di PHP 7.4 per WordPress
Object cache: Redis o Memcached per ridurre query database

Per agenzie che gestiscono molti siti client, questo confronto CDN può aiutare nella scelta.

Configurazione Cloudflare per LCP immagini

Nelle impostazioni Cloudflare del dominio:

Speed > Optimization > Early Hints: ON (invia preload prima del server response)
Speed > Optimization > Mirage: OFF per l’hero (può ritardare render)
Caching > Configuration > Browser Cache TTL: 1 anno per immagini

Validazione e monitoraggio

Dopo l’implementazione, verifica i miglioramenti su più tool per almeno 5-10 test.

Metriche target

LCP: sotto 2.5s (idealmente sotto 2.0s)
TTFB: sotto 200ms
FCP: sotto 1.5s
CLS: sotto 0.1 (specifica width/height previene shift)

Usa Lighthouse CI integrato nel workflow di deploy per prevenire regressioni. Per monitoraggio continuo Field Data, strumenti come SpeedVitals o DebugBear offrono alert automatici.

Test su connessioni reali

PageSpeed Insights usa una connessione throttled 4G. Testa anche su:

WebPageTest: location Italia, connessione 3G Fast/Slow, device mobile reali
Chrome DevTools: Network throttling “Slow 3G” per simulare worst case

Il 75° percentile degli utenti WordPress italiani (dati CrUX maggio 2026) naviga su 4G con latenza media 85ms. Ottimizza per questo scenario.

FAQ

Quale plugin di ottimizzazione immagini è il migliore per il LCP?

ShortPixel e Imagify sono i più affidabili per LCP. Entrambi supportano AVIF, WebP, hanno CDN integrato opzionale e non rallentano l’admin. Imagify ha pricing leggermente migliore per agenzie (€9.99/mese unlimited sites). Evita Smush Pro: non supporta ancora AVIF e ha problemi con preload di immagini hero in alcuni theme.

Il preload dell’immagine hero funziona con Elementor?

Sì, ma devi recuperare l’URL corretto. Elementor salva le immagini in post meta con chiavi specifiche. Usa questo snippet per estrarre l’hero dalla sezione Elementor: get_post_meta($post_id, '_elementor_data', true) e parsifica il JSON per trovare l’URL immagine del primo widget immagine/background. Alternativa più semplice: hardcoda l’URL nel preload per pagine statiche come la homepage.

Devo usare AVIF o WebP per l’immagine hero nel 2026?

Usa entrambi con picture tag e fallback JPEG. AVIF offre ~30% risparmio rispetto a WebP ma il supporto browser è all’89% (manca ancora Safari versioni vecchie su iOS 15). WebP è sicuro al 97%. Il picture tag garantisce che ogni browser riceva il formato ottimale supportato. Il costo di serving 3 formati è minimo con un buon CDN.

Come ottimizzare il LCP su mobile se l’hero è un video?

I video hero sono problematici per LCP. Soluzione: usa un’immagine poster ottimizzata come placeholder (attributo poster del video tag) e applica le stesse tecniche (preload, fetchpriority, no lazy load). Considera di disabilitare l’autoplay video su mobile e mostrare solo l’immagine poster: risparmia banda e migliora drasticamente LCP. Usa media query per caricare il video solo su desktop.

Il LCP peggiora dopo aver attivato un plugin di cache, perché?

Alcuni plugin di cache (es. WP Super Cache, W3 Total Cache versioni vecchie) generano HTML cached senza rispettare i preload hint dinamici o rimuovono fetchpriority. Usa WP Rocket 3.16+ o FlyingPress che preservano gli optimization hint nel cached HTML. Verifica anche che il plugin non forzi lazy loading su tutte le immagini: controlla le impostazioni e disabilita “Lazy load above the fold images” se presente.