SEO e realizzazione siti web Udine a misura di PMI

menu x
menu x

Largest Contentful Paint: che cos’è, perché è importante e come migliorarlo.

  • 6 Novembre 2023
Laura Musig Siti web Udine » Blog SEO » Largest Contentful Paint: che cos’è, perché è importante e come migliorarlo.
Si parla di:
largest-content-paint

Il Largest Contentful Paint è la metrica che ti consente di misurare il tempo di caricamento dell’elemento visivo più grande di un sito. Ha lo scopo di fornire una buona esperienza utente ed è considerato uno dei parametri più significativi dei Core Web Vitals. Si è sentito nominare per prima volta quando è stato rilasciato l’algoritmo Page Experience Update, insieme a First Input Delay (FID e Cumulative Layout Shift (CLS).

La velocità di caricamento di una pagina web è un fattore che ogni sito web deve considerare, soprattutto quando si parla di ottimizzazione per i motori di ricerca (SEO). Google richiede aggiustamenti relativi all’esperienza dell’utente, che influiscono anche sul ranking dei siti.

Con questo in mente, l’azienda ha creato una nuova metrica: Largest Contentful Paint (LCP). L’obiettivo di questo parametro è garantire che gli utenti che visitano i siti siano soddisfatti di ciò che trovano. Ciò riguarda non solo il contenuto, ma anche la performance e la presentazione. Se il sito impiega molto tempo per presentare ciò che ha da offrire, ci sono ottime possibilità che il visitatore lasci la pagina. Per Google, questo significa che l’esperienza non è stata delle più appropriate.

Che cos’è il Largest Contentful Paint?

Largest Contentful Paint è la metrica che misura il tempo impiegato da un sito Web per mostrare all’utente il contenuto più grande sullo schermo, completo e pronto per l’interazione. Google definisce che questa metrica considera solo il contenuto above the page fold, ovvero tutto ciò che appare senza scorrere la pagina. C’è un altro punto rilevante, che è legato al tipo di contenuto considerato. La metrica conta solo il tempo di caricamento di ciò che è rilevante per l’esperienza dell’utente, ovvero:

  • Immagini.
  • Tag immagine.
  • Miniature video.
  • Immagini di sfondo con CSS.
  • Elementi di testo, come paragrafi, titoli (heading) ed elenchi.

LCP è uno dei Core Web Vitals, un insieme di tre metriche che Google utilizza per misurare le prestazioni di un sito Web nel contesto della UX. Gli altri due sono:

  • First Input Delay (FID): quanto tempo impiega la pagina per rispondere quando un utente tenta di interagire con essa. Il FID sarà sostituito da Interaction to Next Paint (INP) nel marzo 2024.
  • Cumulative Layout Shift (CLS): una misura di quanto il layout della pagina cambia inaspettatamente mentre la pagina viene caricata

LCP, FID e CLS sono interconnessi e ciascuno ha un impatto sugli altri due. Ad esempio, avere un LCP elevato potrebbe anche portare a un FID elevato poiché il browser Web non è in grado di rispondere all’input di un utente finché non carica l’elemento LCP.

Perché è importante il LCP?

Le persone si aspettano che i siti web si carichino velocemente. Migliorare il tuo punteggio LCP significa che il tuo sito web verrà caricato più velocemente e sarà pronto per consentire agli utenti di interagire più rapidamente. Un punteggio LCP più alto può aiutarti a ottenere:

  • Ranking più elevati: come parte dei Core Web Vitals, LCP ha un effetto sul modo in cui Google classifica il tuo sito web. Migliorando LCP, aumenti la probabilità che il tuo sito ottenga un posizionamento più elevato e, di conseguenza, generi più traffico ed entrate.
  • Frequenze di rimbalzo più basse: il caricamento del tuo sito web più velocemente riduce la possibilità che i visitatori impazienti abbandonino il tuo sito web troppo presto
  • Tassi di conversione migliori: LCP migliorato significa un sito web più veloce. E i siti web veloci tendono ad ottenere tassi di conversione più elevati.

Nota: migliorare il tuo punteggio LCP non porta automaticamente ai vantaggi di cui sopra. Ci sono molti fattori coinvolti nel miglioramento del ranking, nella riduzione della frequenza di rimbalzo e nell’aumento del tasso di conversione. Il tuo punteggio LCP è solo uno di questi. Se ti interessa l’ottimizzazione dei tassi di conversione leggi questo libro.

Largest Contentful Paint vs. First Contentful Paint

Non confondere LCP con First Contentful Paint (FCP). Sono due parametri molto diversi.

Mentre LCP misura il tempo di caricamento dell’elemento più grande sulla pagina, FCP misura il tempo che intercorre tra l’inizio del caricamento della pagina e il rendering del primo elemento visivo (non necessariamente il più grande) sullo schermo.

LCP è un indicatore migliore di quando una pagina web è pronta per interagire. FCP può essere un po’ fuorviante, dal momento che il primo elemento caricato potrebbe essere qualcosa di molto piccolo, come un tag immagine vuoto, invece del contenuto principale della pagina.

Qual è un buon punteggio LCP?

LCP viene misurato in secondi.

  • Un buon punteggio LCP è pari o inferiore a 2,5 secondi. Dovrai raggiungere questo punteggio per superare il controllo Core Web Vitals di Google.
  • Un punteggio LCP compreso tra 2,5 e 4 secondi significa che la velocità del tuo sito web deve essere migliorata.
  • Un LCP superiore a 4 secondi significa che la velocità del tuo sito web è scarsa e necessita di miglioramenti significativi.

Che cosa causa un punteggio LCP basso?

Quattro fattori possono abbassare un punteggio LCP:

  • Tempi di risposta lenti del server: quando il server di un sito Web è lento nel rispondere a una richiesta del browser, il rendering degli elementi di contenuto più grandi può richiedere più tempo.
  • JavaScript e CSS con blocco del rendering: alcuni elementi della pagina (script, fogli di stile, banner di cookie, blocchi per la creazione di pagine su siti WordPress, ecc.) possono bloccare il processo di visualizzazione di una pagina HTML. Ciò causa un ritardo nel caricamento del contenuto del sito web.
  • Tempi di caricamento delle risorse lenti: le immagini ad alta definizione richiedono più tempo per essere caricate rispetto al testo. Posizionare le immagini above the fold (la parte superiore di una pagina web visibile senza scorrimento) può avere un effetto negativo su LCP
  • Rendering lato client: l’utilizzo del rendering lato client può comportare tempi di caricamento più lenti, soprattutto quando coinvolge una grande quantità di JavaScript o quando il contenuto viene caricato per la prima volta nel browser di un utente

Come misurare il Largest Contentful Paint

Ci sono vari modi per misurare il LCP. Qui di seguito ti elencherà i test che puoi eseguire sia con suite SEO a pagamento sia con SEO Tool gratuiti.

  • Con SemRush dovrai andare alla sezione Site Audit Tool ed avviare una nuova audit cliccando su Start Audit
  • Google PageSpeed Insights è un validissimo strumento gratuito che puoi trovare qui https://pagespeed.web.dev/. Dovrai fornire il tuo sito quindi cliccare su Analizza. Lo strumento genererà quindi un rapporto dettagliato che descrive le prestazioni della tua pagina web. Potrai vedere il tuo punteggio LCP nella sezione “Valutazione Core Web Vitals”. C’è anche la possibilità di alternare tra i report mobile e desktop per capire come si comportano le versioni mobile e desktop del tuo sito web in termini di punteggio LCP. Riceverai diversi consigli per miglioramenti, a seconda del tipo di rapporto che scegli.
page-speed-google

Come risolvere i problemi di un elevato LPC: 12 strategie

Un report del passaggio precedente indica che il tuo sito web presenta problemi con il LCP? Ecco come risolverli.

1. Identificare l’elemento LCP

Prima di poter migliorare il tuo punteggio LCP, devi identificare l’elemento che stai cercando di ottimizzare. Puoi trovare l’elemento LCP su qualsiasi pagina con lo strumento PageSpeed Insights di Google. Basta digitare l’URL della pagina e fare clic su “Analizza”.

Una volta che lo strumento ha generato il rapporto, scorri verso il basso fino alla sezione “Diagnostica” e fai clic su “Elemento LPC”. Ti mostrerà l’elemento LCP per quella pagina. Gli elementi LCP varieranno da una pagina all’altra. In alcuni casi, potrebbe trattarsi di un’intestazione o di un paragrafo di testo. In altri casi, potrebbe trattarsi di un’immagine o dell’immagine del poster di un video. Sapere qual è l’elemento LCP di una pagina ti consentirà di implementare le giuste tattiche di ottimizzazione per migliorare il tuo punteggio LCP.

2. Ottimizza le immagini

Il caricamento delle immagini, soprattutto quelle di grandi dimensioni e ad alta definizione, può richiedere del tempo. Ciò può influire negativamente sul tuo punteggio LCP.

Per consentire alle immagini sul tuo sito web di caricarsi più velocemente, valuta la possibilità di ridimensionarle a dimensioni più piccole e quindi di comprimerle utilizzando strumenti come Kraken o Optimizilla.

Oltre a ridimensionare e comprimere le immagini PNG e JPG, valuta la possibilità di optare per un formato immagine più performante, come WebP.

Le immagini WebP possono essere fino al 34% più piccole delle immagini PNG e JPG, con una perdita di qualità minima o nulla.

3. Ottimizza i font

Prima che qualsiasi testo su una pagina possa essere visualizzato, è necessario caricare i caratteri utilizzati nella pagina. Quali caratteri utilizzi e come li fornisci al dispositivo dell’utente possono avere un effetto sul tuo punteggio LCP se l’elemento più grande di contenuto nella tua pagina è il testo.

  Se ritieni che i caratteri causino problemi LCP, prova questi suggerimenti:

  • Attenersi ai caratteri di sistema. I caratteri di sistema, detti anche web safe fonts, sono i caratteri predefiniti sul dispositivo di un utente. Se utilizzi un carattere di sistema sulla tua pagina, non è necessario scaricare altri caratteri.
  • Utilizza font self-hosted. A volte, vuoi avere più varietà invece di usare solo il carattere di sistema. In questo caso, scegli di ospitare sul tuo stesso spazio web i caratteri. Ciò eliminerà la necessità di connettersi a un sito Web di terze parti per scaricare i caratteri

Nota: i caratteri self-hosting non sempre portano a prestazioni migliori. In alcuni casi, l’utilizzo di caratteri esterni può portare a prestazioni migliori. Pertanto, dovrai testare e vedere quale opzione si traduce in prestazioni migliori per il tuo sito web.

  • Crea sottoinsiemi di caratteri. La maggior parte dei font supporta un’ampia varietà di caratteri, alcuni dei quali potrebbero non essere necessari. Creando un sottoinsieme di un font, ovvero un file contenente un numero limitato di caratteri disponibili da un font, puoi ritrovarti con un set di font più piccolo che si carica più velocemente.
  • Utilizza “font-display:optional“. Impostando l’attributo “font-display” su “opzionale”, fai sapere al browser web dell’utente che l’utilizzo di un carattere web è facoltativo. Se il carattere web non viene caricato nel momento in cui la pagina ne ha bisogno, il testo verrà visualizzato utilizzando un carattere di riserva (solitamente il carattere di sistema).

Nota: sebbene i suggerimenti sopra riportati siano utili per le pagine in cui l’elemento LCP è testo, sono anche buone pratiche per le prestazioni del sito Web in generale.

4. Minimizza i file JavaScript, CSS e HTML

La minimizzazione è il processo di ottimizzazione del codice per renderlo più compatto. Quando minimizzi il codice, rimuovi elementi come interruzioni di riga, spazi vuoti non necessari e commenti fatti dagli sviluppatori.

Ciò si traduce in script e file più piccoli che vengono caricati più rapidamente.

Puoi utilizzare uno strumento come Minifier per minimizzare i tuoi file JavaScript, CSS e HTML. Se il tuo sito web è basato su WordPress, ci sono plugin di WP che possono farlo per te.

5. Rimuovere il codice JavaScript e CSS che blocca il rendering

Risorse come determinati codici JavaScript e fogli di stile CSS devono essere scaricati dal browser dell’utente prima che il contenuto della pagina possa essere visualizzato.

Ecco come funziona:

Un browser Web inizia ad analizzare un file HTML e deve interrompersi quando incontra un file CSS o JavaScript. Quindi, recupera il file prima di continuare ad analizzare il codice HTML.

Ciò può rallentare il tuo sito web e comportare un punteggio LCP basso.

Per ridurre l’effetto delle risorse che bloccano il rendering, inizia identificando quali risorse stanno effettivamente bloccando il rendering.

Quindi, controlla se queste risorse sono necessarie.

A volte i siti web possono caricare inutilmente grandi quantità di file JavaScript e CSS. Ad esempio, potrebbe esserci del codice residuo che non viene più utilizzato.

Se una specifica funzione JavaScript non è necessaria su una pagina, o il CSS può essere scaricato in un secondo momento (perché non è necessario eseguire il rendering del contenuto della pagina), non è necessario forzare il browser dell’utente a scaricarlo.

6. Rinviare CSS non critici

Dovresti dividere il tuo CSS in critico (critical CSS) e non critico.

I CSS critici sono necessari per visualizzare contenuti visibili non appena la pagina viene caricata (ad esempio, contenuti sopra la above).

Il CSS non critico è qualsiasi CSS necessario per visualizzare il contenuto posizionato below the fold

Poiché i contenuti sotto il fold non devono essere visibili immediatamente, puoi posticipare il CSS necessario per visualizzarli e caricarli dopo aver caricato tutto ciò che è necessario per visualizzare i contenuti sopra la piega.

7. Utilizzare il precaricamento per le risorse critiche

Il precaricamento è una tecnica in cui risorse specifiche hanno la priorità e vengono caricate in background durante il rendering della pagina. Queste risorse precaricate vengono quindi archiviate nella cache del browser, pronte per essere utilizzate quando richiesto.

Utilizzando il precaricamento per risorse critiche (come CSS, caratteri e immagini Above-the-fold), puoi evitare ritardi e migliorare il tuo punteggio LCP.

8. Aggiorna il tuo hosting web

L’aggiornamento del tuo hosting web può aiutare a migliorare i tempi di risposta del server, che, a sua volta, può migliorare il tuo punteggio LCP.

In molti casi, i tempi di risposta lenti del server sono il risultato di siti web che utilizzano hosting condiviso.

L’hosting condiviso avviene quando più siti web sono ospitati sullo stesso server, spesso per risparmiare sui costi. Ciò significa che le prestazioni del tuo sito web potrebbero essere influenzate negativamente se altri siti web sullo stesso server riscontrano grandi picchi di traffico.

Per ottenere le migliori prestazioni, opta per l’hosting di un server dedicato da un provider di hosting affidabile.

9. Abilita la memorizzazione nella cache delle pagine

La memorizzazione nella cache è il processo di archiviazione dei dati in un archivio temporaneo (chiamato “cache”) in modo che possano essere recuperati più rapidamente nelle richieste successive. Esistono diversi tipi di memorizzazione nella cache, tra cui pagina, browser e server.

Il page caching è un tipo di caching in cui una pagina del sito web viene archiviata sul server come file HTML statico dopo essere stata caricata per la prima volta. Ciò evita che vengano effettuate più query al database del tuo sito web ogni volta che la pagina viene caricata.

Tieni presente che questo tipo di memorizzazione nella cache non è adatto a tutti i tipi di siti Web. Ma se le pagine del tuo sito web non si basano su informazioni dinamiche (ad esempio, il fuso orario dell’utente, la lingua, ecc.) o non vengono aggiornate molto spesso, probabilmente trarrai vantaggio dalla memorizzazione nella cache delle pagine.

10. Utilizzare una rete per la distribuzione di contenuti

Una rete per la distribuzione di contenuti (CDN) velocizza il caricamento del tuo sito web memorizzando nella cache i contenuti del tuo sito web su server diversi e quindi offrendoli agli utenti da server fisicamente più vicini alla posizione dell’utente.

Ciò riduce la latenza, ovvero il tempo che intercorre tra la richiesta dell’utente e la risposta del server.

Le soluzioni CDN più diffuse includono:

  • Cloudflare
  • Akamai
  • KeyCDN

11. Limita il rendering lato client

Il rendering lato client è una tecnica in cui il contenuto di una pagina viene visualizzato nel browser utilizzando JavaScript.

Sebbene il rendering lato client possa migliorare le prestazioni del sito Web in alcuni casi, diventa un problema quando si aggiunge una grande quantità di JavaScript al mix.

Ciò è particolarmente vero se non comprimi e minimizzi il tuo codice JavaScript.

Per migliorare le prestazioni del sito web e il punteggio LCP, prova a limitare il rendering lato client.

Puoi anche provare a combinarlo con il rendering lato server. Con questo approccio, generi dinamicamente la pagina sul server invece di renderla sul lato client.

12. Evitare l’uso del lazy load per le immagini Above-the-Fold

Il lazy load è una tecnica in cui il caricamento delle risorse (più comunemente immagini) viene rinviato finché non sono necessarie (ovvero finché un utente non scorre verso quella parte della pagina). I siti web spesso lo utilizzano per migliorare la velocità della pagina.

Sebbene il lazy load possa migliorare il tempo di caricamento della pagina, può peggiorare il tuo punteggio LCP.

Perché?

Perché se l’elemento Largest Content Paint della pagina è un’immagine, l’utilizzo del caricamento lento ritarderà il caricamento di quell’immagine rispetto ad altre risorse. Ciò può avere un impatto negativo sul tuo punteggio LCP.

Nota: questo si applica solo agli elementi above the fold. Il caricamento lento degli elementi Below the Fold non influisce su LCP.

Laura Musig SEO UdineLaura Musig

Web Designer e SEO Freelance a Udine o se preferite web designer SEO. Nel 2001 decisi di sezionare un sito web per vedere cosa c’era dentro, da allora creo e gestisco siti web. Lettrice onnivora, con un fisiologico bisogno di scrivere e di ballare.

Come diventare SEO:


Corso SEO

Ho inoltre raccolto le risorse più utili di questo blog per aiutare chi sta cercando di capire come si diventa SEO Specialist:

SEOZoom

Blog SEO e ultime news

In questa sezione propongo periodicamente approfondimenti a tema SEO e web marketing. Segnalo anche gli ultimi lavori di creazione siti web ad Udine e di posizionamento sui motori di ricerca. 

Perchè non leggi anche questi post?

Leggi tutti i post dal mio blog seo