Correggi l'errore LCP 'Più di' nei Core Web Vitals su GSC

Google ha rilasciato un nuovo rapporto nella console di ricerca chiamato Core Web Vitals. Questi hanno sostituito i rapporti sulla velocità e saranno considerati come un fattore di ranking nel 2021. I Core Web Vitals saranno considerati come un fattore di ranking insieme alla velocità della pagina, HTTPS, compatibilità mobile e altri fattori on-page.

Il Core Web Vital considera elementi UX e UI sulla pagina per determinare la media di una pagina per tre metriche fondamentali,

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

Non esiste una soluzione codificata particolare per risolvere i problemi, ma puoi ottimizzare il sito web per risolvere gli errori. Qui elencherò alcune delle pratiche che possono aiutarti a risolvere il problema del Largest Contentful Paint (LCP) ‘ Più di’ per le tue pagine web.

Cos’è LCP?

La metrica Largest Contentful Paint (LCP) riporta il tempo di rendering del più grande elemento di contenuto visibile all’interno della finestra di visualizzazione. In termini semplici, è il tempo necessario affinché un elemento principale venga caricato sullo schermo visibile dopo che la pagina inizia a caricarsi.

Per fornire una buona esperienza utente, i siti dovrebbero cercare di avere il Largest Contentful Paint che si verifica entro i primi 2,5 secondi dall’inizio del caricamento della pagina.

Quali elementi sono considerati per LCP?

I tipi di elementi considerati per il Largest Contentful Paint sono;

• elementi
• elementi all’interno di un elemento
• elementi
• Un elemento con un’immagine di sfondo caricata tramite la funzione url()
• Elementi di livello blocco contenenti nodi di testo o altri elementi di testo di livello inline.

Quali sono le cause di un alto LCP?

• Tempi di risposta del server lenti
• JavaScript e CSS che bloccano il rendering
• Tempi di caricamento delle risorse lenti
• Rendering lato client

Come ottimizzare il sito web per correggere un alto LCP?

Utilizza un buon hosting con buoni tempi di risposta e un basso tasso di latenza. Assicurati di ottimizzare i server, utilizza CDN di terze parti gratuiti come Cloudflare, jsDelivr, Statically per consegnare rapidamente le risorse statiche. Se stai lavorando su WordPress, ci sono diversi plugin che possono aiutarti a svolgere il lavoro per te.

Utilizza immagini compresse con formati di immagine di nuova generazione come JPEG XR, JPEG 2000 o WebP. Questi formati moderni aiutano a velocizzare il caricamento delle immagini del 50%. Ci sono alcuni plugin per WordPress che ti aiutano automaticamente a comprimere e convertire le immagini al volo. Inoltre, utilizza un CDN per immagini come WP-Photon per ridurre la larghezza di banda del server e aumentare la velocità del sito.

Puoi utilizzare servizi di cache per caricare una pagina HTML statica che non cambia ad ogni richiesta; la cache può prevenire la ricreazione non necessaria. I plugin di cache memorizzeranno una copia dell’HTML generato sul tuo server e quando una pagina viene richiesta, il server rilascia il caricamento della cache, il che può ridurre il Tempo fino al Primo Byte (TTFB) e minimizzare l’uso delle risorse.

Puoi anche utilizzare servizi come Cloudflare che eseguono i service worker in background nel browser e possono intercettare le richieste dal server. Prendono una cache HTML completa della pagina e servono le pagine HTML in cache prima, il che può ridurre significativamente il tempo di caricamento.

Altre cose importanti da considerare per ottimizzare il sito web per un buon LCP sono:

• Eliminare JavaScript e CSS che bloccano il rendering
• Rinviare il CSS non critico
• Minificare le risorse
• Precaricare risorse importanti

Puoi trovare una guida più dettagliata su come ottimizzare un sito web per ridurre LCP e rendere le tue pagine più veloci per una migliore UX sul sito ufficiale Web.Dev.

Conclusione: Con l’introduzione dei core web vitals in GSC e il loro essere considerati come un fattore di ranking. LCP è una metrica molto importante da correggere perché tiene conto del tempo necessario affinché il più grande elemento venga caricato nella finestra di visualizzazione del dispositivo. Ho fornito alcune soluzioni provvisorie e soluzioni per ottimizzare il sito per un basso LCP.

Se hai qualche pensiero su Correggi l’errore LCP ‘Più di’ nei Core Web Vitals su GSC, sentiti libero di lasciare un commento qui sotto. Inoltre, iscriviti al nostro canale YouTube DigitBin per video tutorial. Saluti!