Chiunque gestisca un sito web WordPress non può fare a meno di guardare i Core Web Vitals di Google. Una delle tre metriche in particolare merita un'occhiata più approfondita: Il Largest Contentful Paint gioca un ruolo importante non solo per il tempo di caricamento, ma anche per il tuo posizionamento su Google. Se vuoi sapere cosa c'è dietro questa metrica e come puoi migliorare il tuo Largest Contentful Paint , sei nel posto giusto. In questo articolo chiariamo tutte le questioni importanti e sveliamo le misure che i gestori dei siti web possono adottare per ottenere buoni valori.

Qual è il più grande Contentful Paint? 

Quando si richiama un sito web, di solito ci vogliono solo pochi secondi perché venga completamente configurato nel browser. In questo lasso di tempo, in modo invisibile per il visitatore, avvengono numerosi processi. Il Largest Contentful Paint (LCP) si riferisce a uno degli ultimi eventi prima del caricamento completo del sito web: descrive il tempo necessario affinché l' elemento più grande della pagina sia completamente caricato e visibile . Di solito si tratta di un blocco di testo, un'immagine o un video.

Questo rende il Largest Contentful Paint una delle metriche più importanti per il tempo di caricamento di un sito web. Insieme al First Input Delay (FID) e al Cumulative Layout Shift (CLS), è anche uno dei parametri più importanti per il caricamento di un sito web. Core Web Vitalsche Google utilizza per valutare l'esperienza dell'utente (esperienza della pagina).

La vernice più grande e ricca di contenuti contro la prima vernice ricca di contenuti

Un termine che viene spesso utilizzato in relazione ai tempi di caricamento e alle prestazioni di un sito web e che può essere facilmente confuso è First Contentful Paint (FCP). Pertanto, per una migliore comprensione, distinguiamo ancora una volta in modo esplicito le due metriche:

• Il Largest Contentful Paint misura quanto tempo impiega l'elemento più grande, cioè il contenuto principale di una pagina, a caricarsi completamente.
• Il First Contentful Paint si riferisce al tempo che trascorre prima che venga visualizzato il primo elemento della pagina, indipendentemente dal contenuto.

Il tuo LCP sarà quasi sempre leggermente più alto del tuo FCP perché il contenuto principale di solito non è il primo elemento ad essere caricato.

Perché è importante la vernice Contentful più grande?

Probabilmente ti starai chiedendo perché dovresti dare un'occhiata più da vicino alla più grande vernice Contentful? Abbiamo due buone ragioni per te. Entrambi aiutano il tuo sito web (e la tua attività) a guadagnare visibilità e ad aumentare il tasso di conversione.

1. migliorare l'esperienza dell'utente

Il Paint più grande di Contentful è un indicatore importante del modo in cui gli altri utenti percepiscono il tuo sito web. Sebbene i tuoi visitatori non si preoccupino di quanto tempo impieghi ogni script ed elemento della pagina per caricarsi completamente, si preoccupano del tempo necessario per utilizzare il sito e visualizzare i contenuti più importanti. Tuttavia, si preoccupano del tempo che impiegano per dare un senso al sito e visualizzare i contenuti più importanti.

Se ottimizzi il tuo sito web in modo tale che il tuo LCP sia il migliore possibile (per saperne di più), offrirai ai tuoi visitatori una solida esperienza d'uso. Se li costringi ad aspettare cinque secondi o più per il contenuto principale del tuo sito web, rimbalzeranno e cercheranno altrove. In questo modo saranno ben lontani dallo scaricare contenuti, iscriversi, iscriversi ai tuoi canali, contattarti o acquistare i tuoi prodotti.

2. ottimizzazione del posizionamento su Google

Il contenuto è e rimane il fattore di ranking più importante per Google. Tuttavia, se due siti web si comportano ugualmente bene in termini di contenuti, quello con il Core Web Vitals migliore sale in classifica. Questo perché le metriche sono considerate fattori di ranking ufficiali da Google. L'LCP influenza maggiormente il punteggio: Nella valutazione delle prestazioni di Google Lighthouse, il valore rappresenta circa il 25%.

Quindi un Core Web Vitals solido, e soprattutto un LCP solido, possono aiutarti a ottenere un miglior posizionamento sui motori di ricerca.

Come misurare il più grande Contentful Paint

Puoi misurare il tuo LCP in diversi modi. Un buon punto di partenza sono gli strumenti di Google: Google Search Console, Google PageSpeed Insights e Lighthouse. Inoltre, WebPageTest offre buone opzioni di analisi avanzate.

Google Search Console

La Google Search Console ti offre una panoramica delle prestazioni dell'intero sito web. Puoi trovare informazioni sui Core Web Vitals nella barra di navigazione sinistra. Se apri la scheda, otterrai una panoramica grafica dei tuoi URL e potrai vedere in modo relativamente rapido quali sono gli URL problematici. Potrai quindi esaminarli più da vicino nella fase successiva.

Se non hai impostato Google Search Console per il tuo sito web, puoi ottenere tutte le informazioni anche tramite Lighthouse o PageSpeed Insights.

Google PageSpeed Insights

Oltre ai valori puri di LCP, Google PageSpeed Insights ti fornisce anche utili suggerimenti e consigli su come migliorare il Largest Contentful Paint. Google ti dice anche quale elemento specifico è stato utilizzato per il test. In questo modo puoi capire subito dove puoi iniziare a ottimizzare.

Puoi utilizzare lo strumento in tre semplici passi:

1. Chiamata PageSpeed Insights su.
2. Inserisci l'URL della pagina che vuoi controllare.
3. Avvia il test cliccando su Analizza.

Google ti mostra quindi tutti i Core Web Vitals in un colpo d'occhio, sia per i dispositivi desktop che per quelli mobili. Dovresti assolutamente dare un'occhiata a entrambe le versioni.

Per trovare l'elemento Paint più grande e ricco di contenuti, scorri la pagina dei risultati fino alla sezione Diagnostica. Lì, nella sezione Elemento di Paint con contenuto maggiore, viene elencato l'elemento più grande della viewport.

Attenzione: l'elemento può essere diverso per i dispositivi mobili e per quelli desktop. Per questo motivo devi sempre controllare entrambi i casi.

Faro

Con Lighthouse puoi testare e analizzare l'LCP nel tuo browser. Lo strumento è già integrato negli strumenti per sviluppatori di Google Chrome.

Ecco come procedere nel browser:

1. Apri l'URL che vuoi controllare (preferibilmente in una finestra in incognito).
2. Apri gli Strumenti per gli sviluppatori di Chrome (DevTools). Il modo più rapido per farlo è cliccare con il tasto destro del mouse su un punto qualsiasi della pagina e poi cliccare su Esplora nel menu che si apre.
3. Poi vai agli Strumenti per gli sviluppatori e seleziona la scheda Lighthouse.
4. Seleziona se l'LCP deve essere testato per la visualizzazione desktop o mobile. Alla voce Categorie, è sufficiente un segno di spunta per Prestazioni.
5. Avvia l'analisi con un clic su Genera rapporto.

Il test dura dai 15 ai 20 secondi, a seconda del sito web. In seguito, potrai visualizzare e valutare tutti i valori e, ad esempio, confrontarli con i risultati di Search Console (se l'hai impostata).

WebPageTest

WebPageTest è particolarmente utile se vuoi configurare il test individualmente e approfondire l'analisi delle prestazioni. Qui puoi anche definire metriche come il luogo del test, la velocità di connessione o il dispositivo stesso nelle opzioni avanzate.

Con WebPageTest i risultati sono anche un po' più completi: lo strumento mostra esattamente come viene caricato il tuo sito web, quali elementi vengono caricati e la velocità di caricamento. Oltre ai valori LCP, il report contiene anche molte altre metriche, tra cui un diagramma a cascata. Puoi scoprire di cosa si tratta esattamente e come analizzarlo correttamente nel nostro articolo Ottimizzare WordPress: Come analizzare il tuo sito web in 7 secondi.

Qual è il valore di una LCP?

Google determina praticamente il modo in cui viene valutata la LCP:

• Una vernice più grande di 2,5 secondi è considerata buona e auspicabile.
• I valori compresi tra 2,5 e 4 secondi sono ancora soddisfacenti, ma possono essere ottimizzati.
• Se il valore LCP è superiore a 4 secondi, viene classificato come scarso e deve essere assolutamente migliorato.

Da dove viene una LCP debole? 

Il Largest Contentful Paint di ogni sito web può essere suddiviso in quattro sotto-elementi, che insieme danno l'intero tempo LCP:

• Time to First Byte (TTFB): è il tempo che intercorre tra la richiesta dell'utente e la prima risposta del server, cioè il primo byte di dati caricato. Idealmente, il TTFB dovrebbe rappresentare circa il 40% del tempo dell'LCP.
• Resource Load Delay: Hiermit ist die Verzögerung beim Laden der Ressourcen gemeint – also die Zeitspanne zwischen dem ersten Byte und dem Moment, in dem der Browser beginnt, das LCP-Element zu laden. Diese sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.
• Tempo di caricamento della risorsa: questo valore descrive il tempo necessario per caricare l'elemento LCP stesso. Poiché, come per il TTFB, si tratta di una richiesta di rete, questo processo può richiedere circa il 40% del tempo totale dell'LCP.
• Element Render Delay: Damit wird ausgedrückt, wie viel Zeit zwischen dem Ende des Ladevorgangs und dem vollständigen Rendern des LCP-Elements noch vergeht. Auch diese Verzögerung sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.

Ognuno di questi sottoelementi è influenzato da altri fattori: l'elenco delle possibili cause di un LCP debole è quindi praticamente infinito. Nella maggior parte dei casi, però, alla base c'è una (o più) delle quattro ragioni seguenti:

• Il tuo server risponde troppo lentamente (TTFB).
• JavaScript e CSS bloccano il caricamento della pagina (ritardo nel caricamento delle risorse).
• Hai molte risorse di grandi dimensioni o contenuti visivamente impegnativi sulla tua pagina che richiedono molto tempo per essere caricati (tempo di caricamento delle risorse).
• Il rendering lato client fa sì che l'elemento LCP impieghi più tempo per essere visualizzato completamente (Element Render Delay).

Come migliorare il più grande Contentful Paint

Ora sai da cosa è composto il Largest Contentful Paint e quali sono le cause che lo rendono scadente. Vediamo ora cosa puoi fare se vuoi migliorare il Largest Contentful Paint del tuo sito WordPress. Questi sono i consigli e gli accorgimenti più importanti:

Affidati a un hosting WordPress veloce

La base di un buon LCP è costituita da tempi di caricamento brevi, o più precisamente da un TTFB breve. Un hosting performante può fare la differenza. Pertanto, verifica se il tuo hosting attuale ti rallenta inutilmente. In tal caso, dovresti prendere in considerazione l'idea di passare a un hosting WordPress gestito specializzato e adatto alle tue esigenze.

Quando ospiterai il tuo sito web su Raidboxes , potrai contare su un'infrastruttura completa e adatta a WordPress che ti ripagherà: Dopo il passaggio ai nostri server, i siti web WordPress vengono solitamente caricati fino a quattro volte più velocemente, senza bisogno di ulteriori ottimizzazioni.

Abilita la cache

Se vuoi che il tuo sito web WordPress abbia un buon LCP e si carichi velocemente, non c'è quasi modo di evitare una buona cache di WordPress. Migliora il tempo di risposta del server mettendo in cache i file utilizzati più di frequente e recuperandoli più velocemente la volta successiva. Puoi utilizzare un plugin per questo scopo oppure scegliere un hosting con cache lato server, come quello offerto da Raidboxes .

Elimina i JavaScript e i CSS che bloccano il rendering

Ogni sito web è composto da elementi HTML, JavaScript e CSS. Quest'ultimo regola la presentazione del sito web, mentre JavaScript è responsabile degli elementi dinamici (ad esempio animazioni o moduli). Se JavaScript e/o CSS vengono caricati prima dell'elemento LCP, anche se non sono ancora necessari, complicano e rallentano il rendering.

Dovresti quindi rimuovere i JavaScript e i CSS non necessari e mantenere i file il più compatti possibile. Puoi anche spostare entrambi i file in fondo alla pagina o ritardare gli script in modo che non blocchino il contenuto principale. Il modo più semplice per farlo è utilizzare plugin come Autoptimize o WP Rocket.

Puoi trovare maggiori informazioni su JavaScript e CSS nel nostro articolo sulla riduzione di CSS, HTML e JavaScript.

Ottimizzare le immagini

Più grandi sono le immagini sul tuo sito web, più è probabile che abbiano un cattivo LCP. Per questo motivo dovresti sempre comprimere al meglio le tue immagini. Tuttavia, assicurati che la perdita di qualità non sia troppo elevata. Se riesci a determinare qual è l'elemento LCP e si tratta di un'immagine, puoi ridurne le dimensioni in modo specifico. In questo modo il browser impiegherà meno tempo per scaricarla e il tuo valore LCP si ridurrà.

Puoi scoprire quali sono le dimensioni perfette e in quale formato dovresti caricare le immagini nell'articolo Dimensioni delle immagini di WordPress: Come funzionano le immagini in WordPress e le migliori pratiche per il tuo sito web. Inoltre, nella nostra rivista puoi trovare una panoramica di 6 popolari plugin per la compressione delle immagini.

Dai priorità all'elemento più grande

L'elemento più grande di una pagina dovrebbe essere facile da trovare e da caricare il prima possibile. Per impostazione predefinita, tuttavia, questo non è il caso delle immagini, ad esempio. Tuttavia, puoi utilizzare l'attributo fetchpriority per indicare al browser che determinati elementi devono essere recuperati con una priorità maggiore.

Potrebbe essere così:

<img fetchpriority=“high“ src=“/path/to/hero-image.webp“>

(Nota: inserisci questo comando in WordPress come blocco "Codice" e seleziona HTML tra le opzioni del blocco per "occhio lungo"), quindi sarà formattato in modo appropriato

Ma attenzione: non dovresti dare priorità a più di una o due immagini in avanti, altrimenti il segnale perde il suo effetto. Al contrario, puoi anche abbassare la priorità delle immagini. Questo è utile, ad esempio, per le immagini dei caroselli che si trovano all'inizio della pagina ma non sono direttamente visibili all'inizio. Dando loro una priorità più bassa, si libera banda per le risorse essenziali.

Conclusione: migliorare i tempi di risposta e ottimizzare il codice

Il risultato finale è che il Largest Contentful Paint può essere un fattore cruciale per il tuo posizionamento su Google e per l'esperienza degli utenti. Vale quindi la pena dare un'occhiata più da vicino e capire questa metrica.

Più ci si addentra nel dettaglio del Largest Contentful Paint, più diventa chiaro che esiste un numero quasi infinito di viti più o meno grandi che si possono girare per ottimizzare l'LCP. Alcuni di essi possono essere trovati più rapidamente, altri richiedono un know-how tecnico più approfondito. Questo articolo fornisce quindi solo una prima panoramica e per iniziare puoi concentrarti su due aspetti:

1. Accelera i tempi di risposta del tuo server.
2. Ottimizza il codice del tuo sito web in modo che l'elemento LCP venga visualizzato il più rapidamente possibile.

Il fattore più importante per i tempi di risposta è il tuo hosting. Con un hosting WordPress ad alte prestazioni, come quello offerto da Raidboxes , non dovrai preoccuparti dei lunghi tempi di attesa per la risposta del server. Quindi potrebbe valere la pena cambiare.