Sito web

Come ridurre il tempo LCP sotto i 2 secondi

Come ridurre il tempo LCP sotto i 2 secondi

Per ridurre il tempo LCP sotto i 2 secondi, le attività davvero decisive sono: ottenere una risposta del server rapida, individuare correttamente l’elemento visibile più grande della pagina, comprimere e dare priorità all’immagine hero, ridurre CSS e JavaScript non necessari, usare cache e CDN, ottimizzare i font e misurare ogni intervento con dati reali degli utenti. Largest Contentful Paint misura in quanto tempo viene caricato l’elemento principale più grande visibile nello schermo dell’utente: può essere un blocco di testo, un’immagine, il poster di un video o un’immagine di sfondo. Per Google un buon valore LCP è inferiore a 2,5 secondi; tuttavia, per una SEO competitiva, tassi di conversione più alti e un’esperienza di navigazione più fluida, scendere sotto i 2 secondi è un obiettivo concreto e raggiungibile.

In questa guida affronteremo l’ottimizzazione LCP non come un semplice miglioramento di punteggio tecnico, ma come un vero progetto di performance che incide sull’esperienza utente. Ci concentreremo soprattutto sugli interventi che, nella pratica, portano più risultati: infrastruttura hosting, TTFB, ottimizzazione delle immagini, risorse che bloccano il rendering, plugin WordPress, CDN e livelli di cache. Se il tuo sito si apre lentamente, se PageSpeed Insights segnala problemi di LCP o se noti perdite di posizionamento e conversioni da traffico mobile, puoi seguire la checklist qui sotto in ordine di priorità per ottenere miglioramenti misurabili.

Che cos’è LCP e perché puntare a meno di 2 secondi?

LCP è una delle metriche dei Core Web Vitals e misura quanto rapidamente il contenuto principale della pagina diventa visibile all’utente. FCP, cioè First Contentful Paint, indica il momento in cui appare il primo contenuto; INP monitora la reattività alle interazioni; CLS misura la stabilità visiva del layout. LCP, invece, si concentra sul momento in cui viene caricato il contenuto più importante che l’utente si aspetta di vedere. In una scheda prodotto può essere la foto principale, in un articolo di blog l’immagine di copertina o l’area del titolo, in una homepage un grande banner o una sezione hero.

Google definisce come “buono” un LCP inferiore a 2,5 secondi. Ma questa soglia indica soprattutto un’esperienza non problematica, non necessariamente eccellente. Negli standard SEO del 2026, considerando indicizzazione mobile-first, risultati di ricerca sempre più arricchiti dall’intelligenza artificiale, SERP molto competitive e utenti sempre meno pazienti, un obiettivo sotto i 2 secondi è più sicuro. Nei siti e-commerce, SaaS, corporate e nei portali editoriali, anche un solo secondo di ritardo può aumentare la frequenza di rimbalzo e ridurre azioni come compilare un modulo, aggiungere al carrello o richiedere un preventivo.

Migliorare LCP non serve solo ai motori di ricerca: influisce anche sulla percezione del brand. Se l’utente apre una pagina e vede uno schermo vuoto, un’immagine che arriva in ritardo o un layout che si sposta, può percepire il sito come poco affidabile. Per questo la scelta di un hosting veloce Web hosting Hostragons, una connessione moderna e sicura tramite SSL certificati SSL e un dominio coerente con il brand Query di dominio fanno parte della base di qualunque lavoro serio sulle performance.

Misura correttamente il tuo LCP: dati di laboratorio e dati reali

Prima di ottimizzare, è fondamentale misurare la situazione di partenza nel modo giusto. Gli strumenti più utilizzati sono PageSpeed Insights, Lighthouse, Chrome DevTools, WebPageTest e il report Core Web Vitals di Google Search Console. Tuttavia, non tutti i dati devono essere interpretati allo stesso modo. Lighthouse produce dati di laboratorio: esegue test in condizioni simulate di dispositivo, rete e potenza di calcolo. CrUX e Search Console, invece, mostrano dati raccolti da utenti reali. Nel percorso per ridurre LCP sotto i 2 secondi è importante usare entrambe le prospettive.

Valori principali da monitorare durante la misurazione

  • Elemento LCP: quale immagine, testo o blocco viene identificato come LCP nella pagina?
  • TTFB: quanto tempo impiega il server a inviare il primo byte? Per molte pagine, un target realistico è tra 200 e 500 ms.
  • Render delay: perché il browser disegna l’elemento in ritardo anche se la risorsa è già arrivata?
  • Resource load delay: quanto tardi inizia la richiesta della risorsa LCP?
  • Resource load duration: durante il download della risorsa LCP, dimensione del file o latenza di rete stanno creando problemi?

Per esempio, in un articolo WordPress, se l’elemento LCP è un’immagine di copertina WebP da 320 KB, il problema è spesso gestibile. Se invece la stessa immagine pesa 2,8 MB in formato JPEG e non viene mostrata finché non sono stati caricati i CSS, LCP può facilmente salire a 4-5 secondi. In un altro caso, il file può essere leggero, ma se il TTFB è di 1,4 secondi il problema non è tanto l’immagine quanto l’hosting, le query al database o l’assenza di cache.

Le cause più comuni dei problemi LCP

Un LCP elevato raramente dipende da un solo fattore: di solito è il risultato di una catena di ritardi. Il server risponde lentamente, l’HTML arriva tardi, i CSS critici bloccano il rendering, l’immagine LCP viene scoperta in ritardo, JavaScript occupa il main thread e i font rallentano la visualizzazione del testo. Per questo installare un plugin o comprimere un’immagine, da solo, non sempre basta.

Le cause più comuni dei problemi LCP
Area del problemaSintomoSoluzione prioritariaImpatto atteso
Hosting lento o TTFB altoPrima risposta oltre 800 msLiteSpeed, NVMe, aggiornamento PHP, cache serverAlto
Immagine hero pesanteElemento LCP oltre 1 MBWebP/AVIF, dimensioni corrette, preloadAlto
CSS che blocca il renderingIl contenuto non appare prima del CSSCritical CSS, rimozione CSS inutilizzatoAlto
JavaScript eccessivoMain thread occupato, rendering tardivoDefer, delay, code splittingMedio-alto
Font non ottimizzatiIl testo appare in ritardoFont-display swap, preload, font localiMedio
Assenza di CDN e cacheApertura lenta da località lontaneCDN, cache browser, edge cacheMedio-alto

Puoi considerare questa tabella come una mappa delle priorità. Il primo obiettivo è individuare l’anello della catena LCP che genera il ritardo maggiore. Se il TTFB è alto, ha senso risolvere prima server e cache, ancora prima di lavorare sulle immagini. Se invece il TTFB è buono ma l’immagine LCP viene caricata tardi, bisogna intervenire su formato, dimensioni e priorità di caricamento.

1. Riduci il tempo di risposta del server

La base dell’ottimizzazione LCP è una risposta del server rapida. Se il documento HTML arriva tardi, anche il browser scoprirà tardi CSS, JavaScript e immagini. Per questo, nei siti con TTFB elevato, il primo passo per migliorare LCP è analizzare l’infrastruttura hosting. Se le risorse dell’hosting condiviso sono insufficienti, i limiti CPU vengono raggiunti spesso o le risposte del database sono lente, l’ottimizzazione della pagina avrà un impatto limitato.

Controlli pratici lato hosting

  • Porta la versione PHP a una release aggiornata e stabile. Versioni PHP obsolete possono rallentare molto WordPress e i CMS moderni.
  • Verifica la presenza di dischi NVMe, architettura LiteSpeed o NGINX, supporto HTTP/2 o HTTP/3 e altre funzioni orientate alle performance.
  • Scegli una localizzazione del server vicina al tuo pubblico principale. Per un sito rivolto all’Italia, un data center in Italia o in Europa centrale riduce la latenza.
  • Pulisci le tabelle del database, elimina revisioni inutili, transient scaduti e dati temporanei non necessari.
  • Per siti con traffico elevato, valuta un VPS, un cloud server o un piano hosting scalabile VPS Server.

Come obiettivo pratico, prova a portare il TTFB a 200-400 ms su desktop e, per quanto possibile, sotto i 500 ms su mobile. Naturalmente, pagine dinamiche, personalizzate o basate su molte query al database possono richiedere valutazioni diverse. Tuttavia, per blog, pagine aziendali e categorie, questi valori sono raggiungibili con una cache ben configurata.

2. Identifica e dai priorità all’elemento LCP

Ottimizzare senza sapere quale sia l’elemento LCP significa procedere a tentativi. Puoi individuarlo nel pannello Performance di Chrome DevTools o nel report di PageSpeed Insights. Nella maggior parte dei casi si tratta dell’immagine di copertina nella parte alta della pagina, di uno slider, di un grande blocco titolo o del poster di un video. Una volta identificato l’elemento LCP, bisogna comunicare al browser che quella risorsa è importante.

Approccio consigliato per l’immagine hero

  • Escludi l’immagine LCP dal lazy load. L’immagine principale above the fold non dovrebbe essere caricata in modo pigro.
  • Dichiara l’immagine il prima possibile nell’HTML. Le immagini hero impostate come sfondo CSS possono essere scoperte più tardi.
  • Quando ha senso, usa preload e una fetch priority elevata.
  • Servi dimensioni diverse per mobile e desktop. Non inviare un’immagine da 1920 px a uno schermo mobile largo 390 px.
  • Specifica larghezza e altezza con width e height. Questo riduce anche il rischio di CLS.

Per esempio, se l’elemento LCP della homepage è un banner da 1600x900 pixel, offrire su mobile una versione WebP larga 720 px può fare una grande differenza. Dopo la compressione, l’immagine può passare da 1,5 MB a 180-250 KB. Questa singola modifica può migliorare il valore LCP mobile anche di oltre un secondo.

3. Ottimizza le immagini con WebP o AVIF

Le immagini sono tra le cause più frequenti dei problemi LCP. Soprattutto nei siti WordPress, l’immagine caricata può avere una risoluzione originale molto alta e, anche se il tema la visualizza in piccolo, il browser può essere costretto a scaricare il file grande. Per questo non basta comprimere: bisogna servire immagini nella dimensione corretta.

Checklist di ottimizzazione delle immagini

  • Converti, quando possibile, file JPEG e PNG in WebP o AVIF.
  • Comprimi le immagini di copertina mantenendo una qualità accettabile. In genere un livello di qualità tra 70 e 85 offre un buon equilibrio.
  • Usa immagini responsive. Con srcset puoi inviare dimensioni diverse a schermi diversi.
  • Rimuovi informazioni EXIF e metadati non necessari.
  • Per le icone usa SVG quando possibile, ma semplifica anche gli SVG troppo complessi.

In uno scenario tipico per un sito editoriale, le immagini di copertina degli articoli possono pesare in media 1,2 MB. Con conversione WebP e ridimensionamento corretto, spesso scendono intorno a 180 KB. Se l’immagine LCP è proprio quella copertina, il guadagno su connessioni mobili 4G può essere notevole. Il beneficio non riguarda solo il punteggio PageSpeed, ma anche la prima impressione dell’utente.

4. Riduci i file CSS che bloccano il rendering

Quando il browser riceve il file HTML, ha bisogno delle regole CSS per disegnare la pagina. File CSS grandi, monolitici e pieni di codice inutilizzato possono ritardare la visualizzazione dell’elemento LCP. Questo accade spesso con temi preconfezionati e page builder, che caricano in una singola pagina molti fogli di stile non necessari.

Interventi da fare lato CSS

  • Genera Critical CSS e carica prima gli stili necessari alla parte above the fold.
  • Rimuovi il CSS inutilizzato o caricalo solo nelle pagine in cui serve.
  • Minifica i file CSS, ma non fermarti alla minificazione: il vero guadagno arriva riducendo il codice superfluo.
  • Impedisci ai CSS dei plugin di terze parti di caricarsi su tutte le pagine quando non servono.
  • Usa solo i componenti necessari del tema; valuta se slider avanzati, animazioni e pacchetti di icone siano davvero indispensabili.

Il punto da non sottovalutare è che, creando Critical CSS, non bisogna compromettere la coerenza visiva della pagina. Una configurazione errata può mostrare per un istante un layout “rotto” o aumentare il CLS. Per questo, dopo ogni modifica, è necessario testare separatamente mobile e desktop.

5. Tieni sotto controllo il peso di JavaScript

JavaScript può influire su LCP in due modi. Primo: i file JS possono bloccare o rallentare il processo di rendering. Secondo: possono tenere occupato il main thread così a lungo da ritardare il disegno dell’elemento LCP. Script di tracciamento, strumenti di live chat, annunci pubblicitari, tool di A/B testing e widget social possono peggiorare le performance in modo evidente.

Tattiche pratiche per JavaScript

  • Rimanda gli script non critici con defer o async.
  • Sposta gli script di terze parti non necessari alla prima schermata dopo la prima interazione dell’utente.
  • Disattiva per pagina i file JS non necessari dei page builder o dei plugin.
  • Usa code splitting e caricamento modulare per ridurre i long task.
  • Testa singolarmente analytics, pixel e script di chat per misurarne l’impatto reale.

Per esempio, in un sito aziendale in cui in homepage girano contemporaneamente slider, libreria di animazioni, mappa incorporata, chat live e tre codici di tracciamento diversi, raggiungere un LCP sotto i 2 secondi diventa difficile. Alcuni strumenti possono essere indispensabili per le conversioni, ma non è detto che debbano partire tutti al primo caricamento. Ottimizzare le performance significa stabilire priorità senza danneggiare gli obiettivi di business.

6. Velocizza i font e mantieni visibile il testo

6. Velocizza i font e mantieni visibile il testo

In molte pagine l’elemento LCP non è un’immagine, ma un grande titolo o un blocco di testo. In questo caso, il caricamento tardivo dei web font può incidere direttamente sul valore LCP. Richiamare da provider esterni molti pesi e stili, soprattutto su mobile, può creare ritardi percepibili.

Consigli per ottimizzare i font

  • Carica solo i pesi realmente usati. Hai davvero bisogno di 300, 400, 500, 600, 700 e relative varianti italic?
  • Usa font-display swap per evitare che il testo resti invisibile.
  • Applica preload ai font critici, ma evita preload inutili o eccessivi.
  • Quando possibile, servi i font dal tuo server.
  • In alcuni progetti, scegliere font di sistema è la soluzione più veloce, semplice e stabile.

Ridurre i file font può sembrare un dettaglio, ma se LCP è un elemento testuale l’impatto è importante. Inoltre i font influenzano anche CLS: quando viene caricato un font diverso, la larghezza del testo può cambiare e il layout può spostarsi. Per questo performance e design visivo vanno valutati insieme.

7. Configura correttamente cache e CDN

La cache migliora in modo significativo le performance LCP nelle visite ripetute e nella distribuzione dei contenuti statici. Cache di pagina, object cache, cache del browser e cache CDN sono livelli diversi. L’obiettivo è sempre lo stesso: evitare di generare o trasferire ogni volta lo stesso contenuto da zero, servendolo invece nel modo più rapido possibile.

Nei siti WordPress, combinare LiteSpeed Cache, Redis object cache, cache del browser e integrazione CDN accelera sia la generazione dell’HTML sia la consegna dei file statici. Nei progetti aziendali o sviluppati su misura, invece, è necessario pianificare cache applicativa, ottimizzazione delle query al database e una strategia di edge cache. Se il traffico arriva da città o Paesi diversi, l’uso di una CDN diventa ancora più rilevante Guida alla velocità del sito e CDN.

Aspetti da controllare nella configurazione della cache

  • Imposta una durata lunga della cache per i file statici e usa il versionamento dei file.
  • Configura con attenzione la cache HTML nelle aree dinamiche come account utente, carrello o pannelli personali.
  • Valuta ottimizzazione immagini, compressione Brotli e supporto HTTP/3 sul CDN.
  • Pianifica lo svuotamento della cache in base al tuo flusso editoriale.
  • Se usi cache diverse per mobile e desktop, testa che non venga servito il contenuto sbagliato.

8. Piano specifico di ottimizzazione LCP per siti WordPress

WordPress può essere molto veloce se configurato correttamente; tuttavia, l’uso incontrollato di temi e plugin fa salire facilmente il valore LCP. L’errore più comune nei siti WordPress è provare a risolvere tutto con un solo plugin di cache. In realtà, tema, numero di plugin, gestione delle immagini e qualità dell’hosting devono essere affrontati insieme Hosting WordPress.

Checklist WordPress passo dopo passo

  • Usa un tema leggero e aggiornato. Preferisci temi orientati alle esigenze reali invece di template pieni di funzioni inutilizzate.
  • Rimuovi i plugin non necessari. Anche i plugin disattivati possono creare rischi di sicurezza e gestione.
  • Se usi un page builder, riduci widget globali, animazioni e componenti caricati ovunque.
  • Ridimensiona le immagini di copertina prima di caricarle.
  • Configura con attenzione, in LiteSpeed o plugin simili, cache di pagina, ottimizzazione CSS/JS e ottimizzazione immagini.
  • Pulisci periodicamente revisioni del database, commenti spam, transient e bozze inutili.

In un esempio tipico di pagina blog, la prima misurazione può mostrare un LCP di 4,1 secondi. Se il TTFB è 900 ms, l’immagine di copertina pesa 1,8 MB e il CSS del tema arriva a 450 KB, l’ordine degli interventi è chiaro: prima si riduce il TTFB con hosting e cache, poi si trasforma la copertina in WebP responsive, infine si elimina il CSS inutilizzato. Al termine, portare LCP nella fascia 1,7-2,1 secondi è un obiettivo realistico.

9. Ottimizza separatamente LCP su mobile

Gli utenti mobile hanno spesso dispositivi meno potenti e connessioni più variabili. Per questo un LCP buono su desktop può risultare scarso su mobile. Poiché nelle valutazioni di Google l’esperienza mobile ha un peso elevato, i test devono includere sempre scenari mobili.

Nell’ottimizzazione mobile, immagini pesanti e JavaScript eccessivo causano problemi ancora maggiori. Se above the fold usi video in autoplay, slider pesanti, animazioni intense o contenuti incorporati esterni, scendere sotto i 2 secondi diventa più complesso. Su mobile, una hero section essenziale, un titolo chiaro, un’immagine ottimizzata e una risposta server rapida di solito producono risultati migliori.

Vittorie rapide per il mobile

  • Usa una singola immagine hero ottimizzata invece di uno slider.
  • Mostra un poster compresso al posto di avviare un video nella prima schermata.
  • Non limitarti a nascondere con CSS componenti desktop non necessari: evita proprio di caricarli su mobile.
  • Definisci srcset adatti ai breakpoint mobile per le immagini.
  • Avvia gli script di terze parti dopo il primo caricamento o dopo l’interazione dell’utente.

10. Testa e monitora le modifiche una alla volta

Uno degli errori più grandi nell’ottimizzazione LCP è modificare troppe cose insieme, rendendo impossibile capire quale intervento abbia funzionato. Per ottenere progressi misurabili, registra i valori prima e dopo ogni modifica. PageSpeed Insights, la vista filmstrip di WebPageTest e la registrazione Performance di Chrome DevTools sono strumenti molto utili in questa fase.

Un flusso di test efficace può essere questo: scegli prima 3-5 URL critici, come homepage, articolo più visitato, pagina categoria e pagina di conversione. Per ogni URL annota LCP attuale, TTFB, elemento LCP, peso totale della pagina e numero di richieste. Poi procedi in ordine: server/cache, immagini, CSS/JS, font. Dopo ogni fase, testa di nuovo gli stessi URL. Infine attendi l’aggiornamento del report Core Web Vitals in Google Search Console: i dati reali degli utenti diventano più significativi nell’arco di alcune settimane.

Checklist per portare LCP sotto i 2 secondi

  • Riduci il TTFB il più possibile sotto i 500 ms.
  • Identifica con certezza l’elemento LCP e assicurati che venga caricato presto nella pagina.
  • Servi l’immagine hero in WebP o AVIF e nella dimensione corretta.
  • Escludi dal lazy load le immagini nella prima schermata.
  • Usa Critical CSS e riduci CSS e JS inutilizzati.
  • Ritarda gli script di terze parti non indispensabili.
  • Riduci numero e pesi dei font, usando font-display swap.
  • Configura cache di pagina, cache browser, object cache e CDN.
  • Esegui test mobile separati e monitora i dati reali degli utenti.
  • Misura ogni modifica singolarmente per costruire uno standard di performance stabile.

Conclusione

Ridurre il tempo LCP sotto i 2 secondi non è un’impostazione da attivare una volta in un plugin: è un lavoro integrato che include hosting, priorità delle risorse, disciplina nella gestione delle immagini, controllo di CSS/JS, cache e misurazione continua. I risultati più rapidi arrivano di solito dalla riduzione del TTFB, dall’ottimizzazione dell’immagine LCP e dalla diminuzione delle risorse che bloccano il rendering. Per mantenere il risultato nel tempo, le performance devono diventare parte del processo di pubblicazione.

Se l’infrastruttura del tuo sito limita i tuoi obiettivi di performance, puoi iniziare da un hosting più veloce, dalla corretta localizzazione del server e da una configurazione SSL sicura. Su Hostragons puoi valutare soluzioni di hosting adatte al tuo sito e costruire una base più solida per LCP e per l’esperienza utente complessiva Pacchetti Hosting Hostragons.

Domande frequenti

Quale dovrebbe essere un buon valore LCP?

Google considera buono un LCP inferiore a 2,5 secondi. Tuttavia, per una SEO più competitiva e una migliore esperienza utente, puntare sotto i 2 secondi è un obiettivo più forte. Soprattutto nel traffico mobile, questo target può influire positivamente sui tassi di conversione.

Cosa incide di più sul tempo LCP?

I fattori più comuni sono risposta lenta del server, immagine hero pesante, CSS che blocca il rendering, JavaScript troppo carico, font caricati in ritardo e assenza di cache. Per capire quale elemento pesa di più nel tuo caso, è necessario analizzare l’elemento LCP con PageSpeed Insights e DevTools.

Usare una CDN riduce il valore LCP?

Sì, soprattutto quando gli utenti si trovano lontano dal server di origine. Una CDN può servire i file statici da nodi più vicini, riducendo i tempi di caricamento. Tuttavia, se TTFB, dimensione delle immagini e risorse bloccanti sono già problematici, la CDN da sola potrebbe non bastare.

Qual è il primo passo per ottimizzare LCP su WordPress?

Il primo passo è identificare l’elemento LCP e misurare il TTFB. Poi bisogna controllare hosting e cache, ottimizzare immagine di copertina o hero e ridurre il peso di temi e plugin non necessari.

Il lazy load fa bene a LCP?

Il lazy load è utile per le immagini sotto la prima schermata. Tuttavia, applicarlo all’immagine above the fold che rappresenta l’elemento LCP è generalmente dannoso, perché il browser carica in ritardo una risorsa importante. L’immagine LCP dovrebbe essere caricata con priorità.

Condividi questo articolo:
Rina Zhang

Stratega SEO e di Contenuti

Lavora da oltre 8 anni nella gestione internazionale di SEO e contenuti. Specializzata nel migliorare le performance organiche dei siti web.

Tutti gli articoli →