La privacy è importante per noi, quindi hai la possibilità di disabilitare alcuni tipi di archiviazione che potrebbero non essere necessari per il funzionamento di base del sito web. Il blocco delle categorie può influire sulla tua esperienza sul sito web. Ulteriori informazioni
Ottimizzazione Largest Contentful Paint (LCP): riduci LCP sotto 2,5 secondi. Guida all'ottimizzazione immagini, miglioramenti TTFB e JavaScript differito.
.webp){kind=small}
.webp){kind=small}
LCP è una metrica critica di esperienza utente e un fattore di ranking di Google. Quando un utente naviga verso la tua pagina, non si preoccupa del tempo di caricamento totale della pagina. Si preoccupa quando può vedere il contenuto principale e iniziare a leggere o interagire. LCP misura esattamente quel momento: quando l'elemento di contenuto più grande diventa visibile. Ottimizza il LCP correttamente, e la tua pagina si sente veloce. Fallo male, e la tua pagina si sente lenta, anche se altre metriche vanno bene.
Ottimizzare il LCP richiede un approccio a tre prong: migliorare il tempo di risposta del server (TTFB), eliminare le risorse render-blocking, e ottimizzare le immagini. Ogni approccio affronta diversi colli di bottiglia LCP. La combinazione fornisce miglioramenti drammatici.
Largest Contentful Paint (LCP) è il tempo di rendering dell'elemento di contenuto visibile più grande sulla tua pagina. Questo potrebbe essere una grande immagine, video, headline, o blocco di testo. LCP misura da quando l'utente naviga verso la tua pagina fino a quando quell'elemento diventa visibile. La documentazione LCP di Google fornisce informazioni tecniche dettagliate e strategie di ottimizzazione.
LCP non è una metrica binaria pass/fail. È un punteggio continuo. Google ha determinato che LCP sotto 2,5 secondi è "buono", LCP tra 2,5-4 secondi necessita di miglioramento, e LCP sopra 4 secondi è scadente. Gli utenti percepiscono le pagine con LCP sotto 2 secondi come molto veloci. Le pagine con LCP di 3-4 secondi si sentono notevolmente più lente. Le pagine con LCP sopra i 5 secondi sono spesso abbandonate.
LCP cambia durante il page load man mano che appaiono elementi di contenuto più grandi. Se un'enorme immagine si carica al mark di 3 secondi, LCP salta da 1 secondo a 3 secondi. Questo è importante: non puoi semplicemente ottimizzare il tempo di paint iniziale. Devi assicurare che tutti gli elementi di contenuto grandi si carichino velocemente.
Il Time to First Byte (TTFB) è il tempo dall'inizio della navigazione fino a quando il server restituisce il primo byte del documento HTML. TTFB determina il floor per il LCP. Se TTFB è 2 secondi, LCP non può essere meglio di 2 secondi perché il browser non ha neanche ricevuto l'HTML ancora. Ridurre il TTFB è prerequisito per ridurre il LCP.
Buon TTFB è sotto 600 millisecondi. TTFB tra 600-1800ms necessita di miglioramento. TTFB sopra 1800ms è scadente. Se il tuo TTFB è lento, concentrati sull'ottimizzazione del server per primo. Nessuna quantità di ottimizzazione frontend può compensare un server lento.
Cause comuni di TTFB lento: codice backend inefficiente, query database, o sovraccarico del server. L'hosting lento causa anche alto TTFB. L'hosting condiviso è spesso estremamente lento. Aggiorna a hosting VPS o cloud per migliori prestazioni. Usa una CDN per ridurre il TTFB servendo il contenuto da server vicini ai tuoi utenti.
PageSpeed Insights mostra il tuo TTFB nella sezione "Tempo di risposta del server". Se TTFB è un collo di bottiglia, sarà evidenziato come priorità.
LCP dipende da quale elemento di contenuto è il più grande sulla tua pagina. Su un post blog, l'elemento più grande potrebbe essere una grande immagine hero. Su una pagina di prodotto, potrebbe essere una foto del prodotto. Su un sito di notizie, potrebbe essere un headline articolo. Identificare l'elemento LCP è il primo passo per ottimizzarlo.
Usa Chrome DevTools per identificare l'elemento LCP. Apri DevTools, vai al tab Performance, inizia la registrazione, e ricarica la pagina. Nella registrazione Performance, cerca il mark "Largest Contentful Paint". Passa il mouse su di esso per vedere quale elemento ha attivato il LCP. Una volta che conosci l'elemento, ottimizzalo.
L'elemento LCP è spesso un'immagine. Le immagini sono grandi e si caricano dopo che l'HTML è analizzato. Ottimizzare il caricamento delle immagini ha il più grande impatto sul LCP per la maggior parte dei siti. Le immagini che sono sotto la piega possono essere lazy-loaded, velocizzando il LCP per il contenuto above-the-fold.
Il preloading dice al browser di iniziare a scaricare una risorsa presto, prima che sia necessaria per il rendering. Preload la tua immagine LCP o altre risorse critiche usando tag <link rel="preload"> nel head HTML. Questo dice al browser "inizia a scaricare questa risorsa immediatamente".
Esempio: <link rel="preload" as="image" href="hero-image.jpg"> dice al browser di iniziare a scaricare l'immagine hero immediatamente, non aspettando che il CSS sia analizzato. Questo può ridurre il LCP di 100-500ms a seconda della dimensione della risorsa.
Sii cauto con il preloading. Preloadare troppe risorse spreca larghezza di banda. Preload solo le risorse più critiche (immagine hero, font critici, CSS essenziale). La guida all'ottimizzazione Core Web Vitals di Google spiega le best practice del preloading.
Se il tuo elemento LCP è un'immagine, ottimizza la dimensione del file immagine e la strategia di caricamento. Tre tattiche:
Comprimi l'immagine. Usa strumenti come TinyPNG, ImageOptim, o Squoosh per comprimere senza perdere qualità. La compressione JPEG può ridurre la dimensione del file 10-40 volte. Ogni 100KB di dimensione immagine aggiunge 100-200ms al LCP su reti 4G. La compressione è alto-ROI.
Usa formati moderni. WebP è il 25-35% più piccolo di JPEG. AVIF è ancora più piccolo. Usa l'elemento HTML <picture> per servire WebP ai browser moderni e JPEG ai browser più vecchi per compatibilità all'indietro. La selezione del formato da sola può migliorare il LCP di 200-400ms.
Specifica le dimensioni immagine. Includere attributi width e height previene il layout shift e consente al browser di riservare spazio prima che l'immagine si carichi. Questo non migliora direttamente il LCP, ma migliora Cumulative Layout Shift (CLS), un'altra metrica Core Web Vitals.
Il CSS render-blocking previene al browser di rendere la pagina fino a quando il CSS è scaricato e analizzato. I file CSS grandi ritardano il rendering. Minimizza il CSS render-blocking mettendo inline il CSS critico e rimandando il resto.
CSS critico è CSS necessario per il contenuto above-the-fold. Metti inline questo CSS in tag <style> nel <head> HTML. Questo elimina la richiesta per CSS critico e consente al browser di rendere immediatamente. Rimanda il resto del CSS usando tag <link> nel body o con media="print" e JavaScript per caricarlo asincronamente.
Il JavaScript render-blocking inoltre ritarda il rendering. Rimuovi o rimanda JavaScript non critico. Usa <script async> per script che non influenzano il rendering pagina. Usa <script defer> per script che dovrebbero eseguire dopo il page load. Non bloccare mai il rendering su JavaScript pesante.
I web font possono bloccare il rendering o causare layout shift. Se usi font personalizzati, il browser deve scaricare il file font prima di renderizzare il testo. I file font grandi ritardano il rendering e aumentano il LCP.
Usa font-display: swap nelle tue regole @font-face. Questo dice al browser: visualizza i font di sistema immediatamente, poi scambia al font personalizzato quando si carica. Gli utenti vedono il testo immediatamente invece di aspettare il font personalizzato. Questo migliora il LCP e la perceived performance.
Minimizza i font personalizzati. Ogni font aggiuntivo aumenta le richieste e ritarda il rendering. Usa massimo 1-2 font personalizzati. Attieniti ai font di sistema per il resto del tuo sito. I font di sistema si caricano istantaneamente.
Gli script terzi (analytics, annunci, chat widget) spesso ritardano il LCP. Questi script si eseguono presto e bloccano il rendering. Rimanda script terzi o caricali asincronamente.
Carica script terzi dopo l'interazione pagina. Analytics e tracking pixel non devono caricarsi immediatamente. Caricali dopo che l'utente interagisce con la pagina. I chat widget possono caricarsi dopo il LCP. Le reti pubblicitarie devono caricarsi presto, ma possono essere ottimizzate per non bloccare il rendering.
Usa <script async> per script terzi. Questo previene loro di bloccare il main thread. Alcuni servizi terzi offrono versioni async del loro script. Usa quelle invece delle versioni sincrone di default.
Traccia il LCP in Google Search Console sotto il rapporto Core Web Vitals. Monitora le tendenze settimanalmente. Se il LCP aumenta, investiga immediatamente. I nuovi deployment di codice, le nuove immagini, o i nuovi script terzi spesso causano degrado di LCP. Identifica e correggi la causa velocemente.
Configura Real User Monitoring (RUM) per tracciare il LCP dagli utenti effettivi. Strumenti come DataBox, New Relic, e Segment raccolgono dati RUM. Questo mostra come gli utenti reali esperienza il tuo sito, non solo misurazioni di lab. Concentra l'ottimizzazione su metriche che influenzano gli utenti reali.
Testa dopo ogni ottimizzazione. Esegui PageSpeed Insights prima e dopo i cambiamenti. Misura il miglioramento di LCP. Se un cambiamento non migliora significativamente il LCP, ripristinalo. Alcune ottimizzazioni hanno impatto negligente. Concentrati sui cambiamenti alto-impatto.
Ottimizza il TTFB (tempo di risposta del server). Riduci di 50-200ms attraverso l'ottimizzazione del server, l'ottimizzazione del codice backend, o la CDN. Identifica l'elemento LCP. Usa Chrome DevTools per vedere quale elemento determina il LCP. Ottimizza l'elemento LCP: comprimi le immagini, usa formati moderni, preload se necessario. Rimuovi CSS e JavaScript render-blocking. Metti inline il CSS critico, rimanda CSS e JavaScript non critici. Lazy-load immagini sotto la piega. Rimanda il caricamento dei font usando font-display: swap. Rimanda script terzi o caricali asincronamente. Monitora il progresso usando PageSpeed Insights e Google Search Console.
Per ottimizzare il LCP, concentrati sul tempo di risposta del server per primo. Se il tuo Time to First Byte (TTFB) è lento, nessuna ottimizzazione frontend lo risolverà. La guida all'ottimizzazione LCP di Web.dev fornisce tecniche dettagliate per ridurre il TTFB e migliorare il LCP.
Preload risorse critiche usando il tag <link rel="preload">. Preload font, stylesheet, e immagini che sono critiche per il contenuto above-the-fold. Questo dice al browser di iniziare a scaricare queste risorse immediatamente, riducendo la latenza.
Comprimi le risorse testuali (HTML, CSS, JavaScript) usando gzip o brotli. La documentazione di ottimizzazione risorse di Google spiega come minimizzare e comprimere le risorse efficacemente.
Rimanda CSS e JavaScript non critici. Renderizza solo CSS e JavaScript necessari per il contenuto above-the-fold immediatamente. Rimanda il resto a caricarsi dopo che la pagina diviene interattiva.
Largest Contentful Paint (LCP) è una delle metriche più impattanti per l'esperienza utente e i ranking SEO. Ottimizzare il LCP richiede migliorare il tempo di risposta del server, eliminare le risorse render-blocking, e ottimizzare le immagini. La combinazione di queste ottimizzazioni tipicamente riduce il LCP da 4-5 secondi a sotto i 2,5 secondi, fornendo miglioramenti drammatici in esperienza utente e ranking di ricerca.
Inizia identificando il tuo elemento LCP e ottimizzandolo. Poi affronta il tempo di risposta del server e le risorse render-blocking. Monitora il progresso settimanalmente usando Google Search Console e PageSpeed Insights. Usa il nostro strumento GEO SEO audit per identificare i colli di bottiglia LCP nel tuo intero sito e tracciare i miglioramenti nel tempo.
No. LCP misura quando il contenuto principale diventa visibile agli utenti. Il page load time misura quando tutte le risorse finiscono di scaricarsi. Una pagina può avere buon LCP ma caricamento complessivo lento se ha risorse di background pesanti. LCP è più importante del page load time totale per l'esperienza utente perché gli utenti percepiscono la pagina come caricata quando il contenuto principale appare.
Tre cause principali: lento Time to First Byte (TTFB), CSS render-blocking o JavaScript, e immagini non ottimizzate. Correggi il TTFB migliorando le prestazioni del server o usando una CDN. Correggi le risorse render-blocking rimandando CSS e JavaScript non critici. Correggi le immagini comprimendole, usando formati moderni (WebP), e lazy-loading delle immagini sotto la piega.
Le immagini sono spesso l'elemento di contenuto più grande su una pagina, quindi determinano il LCP. Ottimizzare la dimensione del file immagine e la strategia di caricamento ha l'impatto più grande su LCP. Il lazy-loading delle immagini sotto la piega rimanda il loro caricamento, migliorando il LCP iniziale. Comprimere le immagini riduce il tempo di download, migliorando ulteriormente il LCP.
.svg)
.svg)
