Largest Contentful Paint: cos’è e perché oggi è ancora più importante?

Postato in data 1 Giugno 2020 da Riccardo Esposito - Aggiornato il 21 Aprile 2022

La notizia più interessante: Google ha deciso di inserire una combinazione di metriche, note come Core Web Vitals, all’interno dei segnali di ranking. Tra queste troviamo anche il Largest Contentful Paint. Che si guadagna un posto d’eccellenza tra gli elementi decisivi per migliorare l’user experience insieme a Cumulative Layout Shift (CLS) e First Input Delay (FID).

Largest Contentful Paint

Lavorando sul questo parametro puoi rendere più veloce il contenuto principale, quello più importante e che si trova sotto l’occhio attento di chi sta navigando sul tuo sito web.

Ma per avere dei buoni risultati, anche in termini di ottimizzazione di questi elementi decisivi per UX e SEO, bisogna approfondire l’argomento. Io inizierei da una definizione.

Cos’è Largest Contentful Paint?

Il tempo necessario per caricare il contenuto più impegnativo della finestra presa in considerazione dal dispositivo, indica l’attesa necessaria per avere un rendering dell’elemento più grande e visibile dall’utente.

Il First Contentful Paint (FCP) offre una metrica più generica: il tempo che passa da quando la pagina inizia a caricarsi fino alla presenza del contenuto visualizzato sullo schermo. Quindi cattura solo l’inizio dell’esperienza di caricamento. Con il valore LCP, invece, andiamo a indagare sull’elemento più impegnativo della sezione, quello che darà maggiori problemi per il caricamento della risorsa. Ci sono delle metriche da rispettare? Continua a leggere per approfondire questo tema.

Da leggere: la velocità è tutto per un ecommerce

Hosting WordPress preinstallato e gestito

  • WordPress installato
  • Cache configurata
  • Aggiornamenti automatici
  • Assistenza H24/365

Qual è il valore ideale del LCP?

Circa 2.5 secondi. Secondo Google, per fornire una buona esperienza utente i siti dovrebbero presentare un Largest Contentful Paint che resti sotto questa soglia. Ovviamente per avere un contributo chiaro su questo punto devi valutare gli elementi che influenzano il parametro in questione come, ad esempio, immagini e video. Per fortuna puoi misurare tutto questo.

Tool per monitorare il parametro

Esistono diversi tool per monitorare la velocità di caricamento delle pagine web, questo dato può essere ripreso da strumenti interni ed esterni alla scuderia di Mountain View. Ma per misurare e monitorare il Largest Contentful Paint puoi contare sugli strumenti di Google.

tool per monitorare Largest Contentful Paint

Nella lista dei tool che consentono di tenere sotto controllo i Core Web Vitals troviamo vecchie conoscenze per ogni webmaster che si rispetti, e in primo luogo citiamo il Pagespeed Insights di Google che consente osservare le prestazioni raccolte in laboratorio e sul campo di una pagina, sia su dispositivi mobile e che desktop. L’aspetto interessante di Pagespeed?

La capacità di unire le forze: questo strumento mostra come gli utenti usano la pagina grazie al Chrome UX) Report mentre Lighthouse mette a disposizione una serie di consigli.

Obiettivo: migliorare l’esperienza utente. Questo vale per analizzare la singola pagina, ma non è sufficiente. C’è bisogno di un’analisi comparativa e sintetica che raggruppi vari URL.

Largest Contentful Paint su search console

La Search Console offre una valutazione d’insieme, una visione ampia dedicata a risorse catalogate in base alle performance dei Core Web Vitals. E quindi del Largest Contentful Paint. Vuoi avere una valutazione rapida della pagina? Scarica l’estensione Chrome.

Migliora il Largest Contentful Paint

Chiaramente adesso c’è bisogno di una guida per ottenere dei risultati degni di nota su questo punto. Bene, quali sono i consigli per migliorare il Largest Contentful Paint di una pagina web? Come suggerisce la guida ufficiale di Google ci sono una serie di fattori da ottimizzare:

  • Problemi di server.
  • JavaScript e CSS.
  • Risorse pesanti.
  • Client-side rendering.

Grande attenzione bisogna avere nei confronti di una risorsa che decidiamo in prima persona, vale a dire l’hosting di qualità. Ci sono diversi elementi che consentono di valutare la bontà di questo elemento, così importante per il successo dell’intero progetto pubblicato sul web.

Possiamo iniziare proprio dalla CPU: un utilizzo costantemente superiore all’80% deve essere monitorato e corretto. Perché le prestazioni possono svilirsi, minando la velocità delle pagine.

Migliora il Largest Contentful Paint

C’è da valutare anche i periodi di traffico intenso, in questi casi la velocità di rete richiesta per soddisfare le richieste degli utenti può andare oltre le possibilità. Alcuni siti web, in base al provider e all’hosting che hai acquistato, possono superare i limiti relativi al trasferimento dati.

Ridurre le dimensioni e la quantità da e verso il server può aiutarti a superare questo collo di bottiglia. Ma è anche vero che in questi casi è indispensabile lavorare con un hosting valido.

Quindi capace di risolvere al meglio situazioni del genere. Ciò avviene offrendo risorse come dischi SSD, HTTP Keep Alive e HTTP/2 che consentono di ottimizzare il contributo che il server può dare alla velocità con cui si presentano le pagine web.

Risorse per Largest Contentful Paint

Clicca per votare questo articolo!
[Voti totali: 10 Media: 3.6]
Riccardo Esposito

Discussione

4 commenti presenti
  • francesco filipponi ha commentato il 2021-11-05 09:20:50

    Buongiorno, gestisco un blog di blogger, quindi privo di qualsiasi piano di hosting che sono riuscito a portare a velocità ultrasoniche. Però posso anche migliorare la velocità di caricamento da mobile. Puoi darmi qualche indicazione con codici disponibili, ovvero ai fini del miglioramento dell’LCP, direttamente da dentro il Template?


  • Antonietta ha commentato il 2024-05-23 23:03:15

    Buonasera, ho un sito web sul vostro server, non riesco ad abbassare LCP sulle pagine dei prodotti, ho un FCP di 1,7 s, ma LCP è di 6 s, potrei avere qualche indicazione per migliorare tale metrica, direttamente dal pannello di controllo di Prestashop. Grazie


    • Riccardo Esposito ha commentato il 2024-05-27 04:03:37

      Ciao, lato desktop il risultato di Pagespeed non è male. Su mobile la situazione peggiora e la colpa, secondo pagespeed e almeno della home, è di una serie di passaggi tecnici come il formato di compressione delle immagini, diversi problemi relativi alla compressione di Javascript e CSS, alcuni aspetti che riguardano i tempi di reazione dell’elemento inteso come LCP che potrebbe essere relativo a numero e tipo di plugin, PHP, cache e altri aspetti che possono essere definiti solo da un’analisi tecnica approfondita.


    Lascia un commento

    Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *