Spiegazione della pittura più grande e ricca di contenuti: come migliorare il tuo tempo

Lottando con come migliorare la più grande vernice contenta sul tuo sito web? O non sei sicuro di cosa significhi la più grande pittura contenta e perché devi preoccupartene in primo luogo?

Non importa da dove inizi, questo post è per te perché imparerai tutto ciò che devi sapere su Largest Contentful Paint.

Ciò include cosa significa Largest Contentful Paint, perché è importante, come misurarlo e come migliorarlo.

Puoi utilizzare il sommario qui sotto per passare a una sezione specifica in base al tuo attuale livello di conoscenza. Oppure continua a leggere per iniziare dall'inizio.

Qual è la più grande vernice contenta (LCP)? Spiegare il più grande significato della pittura contenta

Largest Contentful Paint è una metrica delle prestazioni che misura il tempo necessario per caricare il contenuto principale di una pagina web.

Largest Contentful Paint fa parte delle metriche Core Web Vitals di Google, insieme a Cumulative Layout Shift (CLS) e First Input Delay (FID).

A un livello più tecnico, Largest Contentful Paint misura quanto tempo impiega l'utente ad avviare il caricamento della pagina prima che il blocco di testo, l'immagine o il video più grande venga visualizzato all'interno del viewport.

Cosa significa "contenuto principale" in termini di LCP?

Bene, il contenuto principale dipenderà dalla pagina effettiva in questione, ma potrebbe essere uno dei seguenti:

• Testo : più specificamente, qualsiasi elemento a livello di blocco contenente nodi di testo o altri elementi di testo a livello di riga.
• Immagine : elementi all'interno di un elemento <img> o elementi <image> all'interno di un elemento <svg>.
• Video – qualsiasi elemento <video> (usa l'immagine poster).
• Un elemento con un'immagine di sfondo – solo se caricato tramite la funzione CSS url() (non si applica ai gradienti CSS).

Più avanti in questo post, imparerai come trovare l'esatto elemento Paint Contentful più grande per qualsiasi pagina del tuo sito.

La più grande pittura contenta vs la prima pittura contenta

Una domanda comune che potresti avere è qual è la differenza tra Largest Contentful Paint e First Contentful Paint, un'altra metrica di prestazioni comune.

Sebbene i due termini siano simili, la differenza fondamentale è che Largest Contentful Paint misura quanto tempo impiega il "contenuto principale" della pagina per caricarsi, mentre First Contentful Paint misura quanto tempo impiega il "primo oggetto" a caricarsi ( indipendentemente dal fatto che è il contenuto principale ).

Fondamentalmente:

• LCP = solo contenuto principale
• FCP = primo pezzo di contenuto, indipendentemente da cosa sia quel contenuto

Pertanto, il tuo tempo LCP sarà quasi sempre leggermente superiore al tuo tempo FCP perché l'elemento "contenuto principale" non è solitamente il primo a caricarsi.

Perché è importante il tempo di verniciatura più ricco del tuo sito?

Ci sono due motivi principali per cui i tempi di visualizzazione più grandi e contenuti del tuo sito contano:

1. Esperienza utente
2. Ottimizzazione del motore di ricerca

Esperienza utente

Il motivo principale per cui dovresti preoccuparti dei tempi di Paint più grandi e contenuti del tuo sito è che questa metrica è un buon proxy per comprendere le esperienze dei tuoi utenti quando si tratta delle prestazioni del tuo sito.

Alla maggior parte degli utenti non importa quanto tempo impiega il tuo sito web per caricare completamente ogni singolo script ed elemento. Invece, si preoccupano di quanto tempo impiegano per iniziare a ottenere valore dal tuo sito web.

Largest Contentful Paint fa un buon lavoro nel cercare di misurare quel momento di "valore" vedendo quanto tempo impiega il contenuto principale a caricarsi.

Se ottimizzi il tuo sito per ottenere un tempo di Paint più grande e contenuto veloce, puoi essere abbastanza sicuro di offrire agli utenti un'esperienza solida sul tuo sito, almeno quando si tratta di prestazioni (vorrai anche un design a misura di cliente e buona usabilità).

Naturalmente, ciò non significa che dovresti ignorare altre metriche sulle prestazioni. Consigliamo sempre di dare uno sguardo olistico alle prestazioni e ai colli di bottiglia del vostro sito, motivo per cui abbiamo creato il nostro strumento di monitoraggio delle prestazioni delle applicazioni (APM) che è disponibile gratuitamente se utilizzate l'hosting Kinsta – Kinsta APM.

Ottimizzazione per i motori di ricerca (SEO)

Sul fronte dell'ottimizzazione dei motori di ricerca, Largest Contentful Paint fa parte del trio di metriche Core Web Vitals di Google, che Google ha iniziato a utilizzare come fattore di ranking SEO nel suo aggiornamento dell'algoritmo Page Experience del 2022.

Ciò significa che avere tempi di Paint contenuti più grandi scadenti può essere un freno alle prestazioni del tuo sito nei risultati di ricerca di Google.

Sebbene altri fattori come la qualità/rilevanza dei contenuti e i backlink svolgano ancora un ruolo molto più importante nel posizionamento del tuo sito web, è importante ottimizzare i tempi di visualizzazione del contenuto più grande del tuo sito per assicurarti di ottenere il massimo dai tuoi sforzi SEO.

Cosa può influenzare i punteggi di pittura contenuti più grandi?

Due tipi "principali" di problemi possono influire sui tempi di Paint con contenuto più grande di una pagina:

1. Quanto tempo impiega il tuo server a rispondere con il documento HTML iniziale.
2. Tempo necessario per caricare la risorsa LCP effettiva.

Il primo tipo di problema riguarda il tempo di risposta del server, noto anche come time to first byte (TTFB). Prima che il browser di un utente possa anche solo pensare di caricare il contenuto principale, deve prima ottenere una risposta dal server.

Ecco alcuni dei problemi comuni che incidono su questo:

• Non utilizzare la cache delle pagine : il mancato utilizzo della cache delle pagine costringe il server a fare più "lavoro" prima che possa rispondere con il documento HTML.
• Hosting lento : un provider di hosting lento avrà sempre un TTFB lento, indipendentemente da ciò che fai.
• Non utilizzare una CDN : una rete per la distribuzione di contenuti (CDN) può velocizzare il TTFB servendo le pagine dalla sua rete globale invece di richiedere agli utenti di scaricarle dal server di origine del tuo sito.

Dopo che il server del tuo sito ha consegnato il documento HTML iniziale, potrebbero esserci ulteriori colli di bottiglia quando si tratta di caricare l'effettivo elemento di contenuto principale.

Ecco alcuni dei problemi comuni che incidono su questo:

• JavaScript o CSS che bloccano il rendering (o codice non ottimizzato/non necessario in generale) : se il browser dell'utente deve scaricare e/o elaborare JavaScript o CSS non necessari prima di poter caricare l'elemento principale, ciò rallenterà il tuo LCP.
• Immagini non ottimizzate : se l'elemento LCP è un'immagine, l'utilizzo di immagini non ottimizzate rallenterà il tuo tempo perché le immagini più grandi richiedono più tempo per il download.
• Caricamento di caratteri non ottimizzati : se l'elemento LCP è testo, il caricamento di caratteri personalizzati in modo non ottimizzato può richiedere più tempo per la visualizzazione del testo.
• File non compressi : se non utilizzi tecnologie di compressione come Gzip o Brotli, il browser dell'utente impiegherà più tempo a scaricare i file del tuo sito.

A seconda del tuo sito, potresti riscontrare colli di bottiglia in entrambe le aree o solo in una delle aree. Imparerai come risolvere tutti questi problemi un po' più avanti in questo post.

Che cos'è un buon tempo di pittura contenuto più grande?

Google definisce un tempo di Paint Contentful più grande "buono" inferiore a 2,5 secondi.

Se il tempo di disegno più grande e contenuto della tua pagina è compreso tra 2,5 e 4,0 secondi, Google lo classifica come "Miglioramento necessario". E se il tempo della tua pagina supera i 4,0 secondi, Google lo definisce "Scarso".

Ecco un grafico di Google che lo mostra visivamente:

Come misurare la vernice con contenuto più grande: i migliori strumenti di test LCP

Ci sono una serie di strumenti che puoi utilizzare per testare le prestazioni del tuo sito per la più grande pittura di contenuti: esaminiamo alcuni dei più utili...

Informazioni sulla velocità della pagina

PageSpeed ​​Insights è uno dei migliori strumenti per valutare il più grande dipinto di contenuto perché offre quattro utili informazioni:

1. Puoi vedere i tempi di Paint più grandi e contenuti del tuo sito con utenti reali dal rapporto Chrome UX ( se il tuo sito ha traffico sufficiente per essere incluso nel rapporto ).
2. Puoi eseguire test simulati per vedere come si comporta il tuo sito.
3. Google ti dirà l'effettivo elemento LCP che sta utilizzando per il test, che ti consente di sapere quale elemento ottimizzare.
4. Google fornirà suggerimenti su come migliorare il tuo tempo LCP.

Ecco come usarlo:

1. Vai al sito web di PageSpeed ​​Insights.
2. Inserisci l'URL della pagina che desideri testare.
3. Fare clic su Analizza .

Google ti mostrerà quindi i risultati sia per dispositivi mobili che per desktop: assicurati di controllare entrambi.

Per trovare l'elemento principale utilizzato da Google per calcolare l'LCP, puoi scorrere verso il basso fino alla sezione Diagnostica ed espandere la sezione Elemento di disegno più grande con contenuto :

Ancora una volta, assicurati di controllare sia il dispositivo mobile che il desktop perché l'elemento LCP potrebbe essere diverso per ciascuno.

Strumenti per sviluppatori di Chrome

Puoi anche testare il tempo di Paint più grande e contenuto direttamente dagli Strumenti per sviluppatori di Chrome utilizzando la scheda Prestazioni o la sua funzione di controllo Lighthouse. Ti consigliamo di utilizzare la scheda Prestazioni perché ti fornisce maggiori informazioni.

Ecco come iniziare:

1. Apri la pagina che desideri testare.
2. Apri gli Strumenti per sviluppatori di Chrome.
3. Vai alla scheda Prestazioni .
4. Assicurati che la casella Web Vitals sia selezionata.
5. Fare clic sul pulsante Ricarica ( indicato di seguito ).

Ora dovresti vedere un'analisi completa del tuo sito.

Se passi il mouse su LCP nella scheda Rete , puoi vedere l'ora:

Se passi con il mouse sopra LCP nella scheda Tempi , puoi vedere l'elemento LCP effettivo:

Console di ricerca di Google

Sebbene Google Search Console non ti consenta di testare una singola pagina per il suo tempo di Paint con contenuto più grande, è davvero utile per valutare le prestazioni a livello di sito.

Ogni pagina del tuo sito avrà un tempo LCP diverso, quindi non puoi semplicemente testare la tua home page e chiamarla un giorno.

Con Google Search Console, sarai in grado di vedere dove ogni pagina del tuo sito rientra nelle categorizzazioni di Google "Buono", "Da migliorare" e "Scarso". I dati sulle prestazioni provengono dal rapporto Chrome UX, quindi si basano su dati utente reali.

Se non lo hai già fatto, devi prima verificare il tuo sito con Google Search Console.

Dopo averlo fatto, ecco come accedere al rapporto LCP:

1. Apri Google Search Console per il tuo sito.
2. Vai a Core Web Vitals nella scheda Esperienza .
3. Fai clic su Apri rapporto accanto al grafico Mobile o Desktop.
4. Cerca eventuali problemi nella sezione Perché gli URL non sono considerati validi . Se fai clic sul problema, puoi visualizzare ulteriori informazioni su quali URL stanno causando problemi.

*Assicurati di controllare sia i risultati desktop che quelli mobili, poiché i dati potrebbero essere diversi in ciascuno.

WebPageTest

WebPageTest è un'altra utile opzione per l'esecuzione di test delle prestazioni simulati.

A differenza di PageSpeed ​​Insights, WebPageTest ti consente di personalizzare completamente varie metriche di test come la posizione del test, la velocità di connessione, il dispositivo e altro ancora. Questo è il vantaggio principale dell'utilizzo rispetto ad altri strumenti: ti offre più opzioni per configurare il test.

Ecco come eseguire un test:

1. Vai a WebPageTest.
2. Aggiungi l'URL della pagina che vuoi testare.
3. Espandi le opzioni di configurazione avanzata per configurare completamente il tuo test.

Nella pagina dei risultati, vedrai i dati LCP, insieme a tonnellate di altre metriche sulle prestazioni (inclusa un'analisi a cascata).

Come trovare l'elemento di pittura più grande e contenuto

Se vuoi migliorare Largest Contentful Paint, può essere davvero utile sapere esattamente quale elemento sta utilizzando Google per calcolare il tuo tempo LCP.

Ad esempio, se sai che Google sta utilizzando la tua immagine hero come elemento LCP sulla tua home page, sai che devi trovare modi per pubblicare quell'immagine hero il più rapidamente possibile se desideri migliorare i tempi LCP della tua home page.

Come accennato in precedenza, puoi trovare il tuo elemento Paint contentful più grande utilizzando PageSpeed ​​Insights o Chrome Developer Tools.

Assicurati di controllare i risultati sia su dispositivi mobili che su desktop, poiché il tuo elemento LCP potrebbe essere diverso su dispositivi diversi.

Come migliorare la più grande pittura di contenuto in WordPress (o altre piattaforme)

Ora che sai tutto su Largest Contentful Paint, entriamo in alcuni suggerimenti pratici su come migliorare Largest Contentful Paint in WordPress.

Mentre ci concentreremo su WordPress per questi suggerimenti, tutti i suggerimenti sono universali e si applicano ad altri tipi di siti web.

Imposta la memorizzazione nella cache per migliorare i tempi di risposta del server

La memorizzazione nella cache può migliorare i tempi di risposta del server riducendo il lavoro di elaborazione che il tuo server deve eseguire prima di poter consegnare il documento HTML finito ai browser dei visitatori.

Se state ospitando il vostro sito WordPress con Kinsta, non dovete preoccuparvi di configurare il caching perché Kinsta implementa automaticamente il caching ottimizzato per voi.

Se ospiti altrove, puoi abilitare la memorizzazione nella cache sul tuo sito utilizzando un plug-in gratuito come WP Super Cache o un plug-in a pagamento come WP Rocket.

Per ulteriori opzioni, dai un'occhiata al nostro post con i migliori plugin per la memorizzazione nella cache di WordPress.

Passa a un hosting WordPress più veloce

Mentre tutte le tattiche in questo elenco possono aiutarti a migliorare il tuo tempo LCP, non c'è niente da fare:

Se utilizzi un hosting WordPress lento e non ottimizzato, i tuoi tempi LCP saranno sempre limitati dalla qualità del tuo host.

Potresti essere in grado di migliorare un po' le cose, ma farai sempre fatica a raggiungere tempi LCP inferiori a 2,5 secondi se il tuo host è lento.

Se volete il modo più semplice per migliorare i vostri tempi di Largest Contentful Paint, potete migrare il vostro sito su Kinsta. Non solo Kinsta offre un'infrastruttura di hosting ottimizzata per le prestazioni, ma abbiamo anche funzionalità integrate per gestire molte delle altre ottimizzazioni in questo elenco.

Ciò significa che puoi concentrarti sulla crescita del tuo sito invece di perdere tempo con l'ottimizzazione dei tempi di Paint con contenuto più grande.

Se siete interessati, Kinsta migrerà gratuitamente un numero illimitato di siti web da qualsiasi host – scoprite di più sulla migrazione gratuita qui.

Se sei ancora indeciso, prova prima il resto dei suggerimenti in questo elenco. Ma se stai ancora lottando dopo aver fatto tutto in questo elenco, potresti aver bisogno solo di un hosting migliore.

Utilizzare una rete per la distribuzione di contenuti (CDN)

Senza un CDN, tutti i visitatori del tuo sito devono scaricare l'HTML di una pagina e le risorse statiche dal tuo server di hosting.

Se i tuoi visitatori si trovano vicino al tuo server, di solito non è un problema. Ma se i tuoi visitatori sono sparsi in tutto il mondo, questo può rallentare il tuo sito a causa della distanza fisica tra un visitatore e il server del tuo sito.

Con un CDN, puoi distribuire le risorse statiche del tuo sito (o anche le pagine HTML finite del tuo sito) alla rete globale del CDN. In questo modo, i visitatori possono scaricare i file dalla posizione più vicina del CDN, che è molto più veloce.

Se stai ospitando con Kinsta, ti consigliamo di utilizzare la funzione Edge Caching di Kinsta per ottenere i migliori risultati.

La funzionalità di edge caching di Kinsta funziona memorizzando nella cache le pagine HTML complete e le risorse statiche del tuo sito nella rete globale di Cloudflare ( piuttosto che memorizzare nella cache le risorse statiche come la maggior parte delle soluzioni CDN ).

Ciò significa che i visitatori del tuo sito possono scaricare la pagina completa dalla edge location più vicina, il che accelera sia i tempi di risposta del server sia il tempo necessario per caricare la tua risorsa LCP.

Per abilitare l'Edge Caching di Kinsta, andate alla scheda Edge Caching nella dashboard del vostro sito in MyKinsta.

Se stai ospitando da qualche altra parte, puoi configurare un CDN per le risorse statiche del tuo sito utilizzando servizi CDN popolari come KeyCDN, Bunny, StackPath e altri.

Evita JavaScript che blocca il rendering (rinvia o rimuovi)

JavaScript che blocca il rendering è JavaScript che viene caricato prima dell'elemento LCP principale anche se non è necessario in quel momento.

Ritardando il caricamento dell'elemento LCP, rallenterà i tempi di caricamento LCP.

Per risolvere questo problema, ci sono alcune strategie che puoi implementare:

• Rimuovi JavaScript non necessario, se possibile.
• Rinvia il codice JavaScript in modo che non blocchi il caricamento dell'elemento principale del tuo sito.
• Ritarda il codice JavaScript finché un utente non interagisce con il tuo sito.

Per la maggior parte delle persone, il modo più semplice per implementare questa funzionalità è tramite plugin come Autoptimize o WP Rocket.

Per una guida completa su come farlo, abbiamo due post molto dettagliati:

• Come eliminare le risorse che bloccano il rendering su WordPress
• Come rinviare l'analisi di JavaScript

Evita i CSS che bloccano il rendering e ottimizza la consegna dei CSS

Proprio come JavaScript non ottimizzato può rallentare il tuo sito, anche i CSS non ottimizzati possono fare lo stesso.

In sostanza, vuoi caricare il meno CSS possibile. E per il CSS che devi caricare, vuoi caricarlo in modo ottimale. In genere, ciò significa che si desidera caricare CSS importanti in anticipo, ritardando i CSS non critici fino a una fase successiva del processo di caricamento.

Se non sei uno sviluppatore, il modo più semplice per raggiungere questo obiettivo è utilizzare plug-in di ottimizzazione delle prestazioni come Perfmatters, WP Rocket o FlyingPress.

Ad esempio, WP Rocket offre funzionalità integrate per rimuovere i CSS inutilizzati pagina per pagina e servire i CSS in modo ottimale.

Se vuoi uno sguardo molto più approfondito su come fare tutto questo, dai un'occhiata alla nostra guida completa su come ottimizzare i CSS.

Minimizza HTML, CSS e JavaScript

Oltre alle tecniche di ottimizzazione del codice di cui sopra, ti consigliamo anche di minimizzare HTML, CSS e JavaScript del tuo sito.

In sostanza, questo rimuove i caratteri e gli spazi bianchi non necessari dal codice del tuo sito per ridurne le dimensioni.

Se stai ospitando con Kinsta, Kinsta può gestire automaticamente la minificazione tramite la nostra integrazione Cloudflare. Ecco come controllare questa funzione:

1. Aprite il cruscotto del vostro sito in MyKinsta.
2. Vai alla scheda CDN .
3. Fai clic su Impostazioni accanto a Ottimizzazione immagine.
4. Seleziona le caselle per CSS e JS e salva le impostazioni.

Se stai ospitando il tuo sito altrove, puoi utilizzare un plug-in gratuito come Autoptimize per minimizzare il tuo codice o uno dei plug-in completi premium come Perfmatters, WP Rocket o FlyingPress.

Oppure, dai un'occhiata al nostro tutorial completo sulla minimizzazione del codice per saperne di più. Sebbene il tutorial si concentri su JavaScript, puoi utilizzare gli stessi metodi e plug-in anche per minimizzare altro codice.

Usa la compressione a livello di server (Gzip o Brotli)

La compressione a livello di server ti consente di ridurre le dimensioni dei file del tuo sito utilizzando tecnologie come Gzip o Brotli.

Ad esempio, la compressione che utilizziamo per il sito Web di Kinsta ha ridotto le dimensioni del file della home page di Kinsta dell'85,82%.

Se stai ospitando il tuo sito Web WordPress con Kinsta, non devi preoccuparti di questo perché Kinsta abilita automaticamente la compressione Brotli per tutti i siti.

Se stai ospitando il tuo sito altrove, puoi utilizzare questo strumento gratuito di GiftOfSpeed ​​per verificare se il tuo sito ha abilitato Gzip o Brotli.

Se il tuo sito non utilizza la compressione, puoi seguire la nostra guida su come abilitare la compressione Gzip per configurarla.

Se utilizzi Cloudflare per servire i contenuti del tuo sito, Cloudflare ha anche un'impostazione integrata per abilitare la compressione Brotli:

1. Apri il tuo sito nella dashboard di Cloudflare.
2. Vai a Velocità → Ottimizzazione nel menu della barra laterale.
3. Abilita l'interruttore Brotli .

Comprimi e ridimensiona le immagini

Se il tuo elemento LCP è un'immagine, trovare modi per ridurre le dimensioni di quel file immagine ridurrà il tempo impiegato dal browser di un utente per scaricare l'immagine (e quindi velocizzare il tempo LCP).

Per ridurre le dimensioni dell'immagine, dovresti ridimensionare l'immagine alle dimensioni in cui la stai effettivamente utilizzando, comprimerla utilizzando una compressione con perdita o senza perdita e servirla in un formato ottimizzato come WebP.

Questo approccio è solo generalmente una best practice per l'ottimizzazione delle prestazioni , non è specifico per Largest Contentful Paint.

Per uno sguardo più completo, consulta la nostra guida dettagliata all'ottimizzazione delle immagini per i siti web.

E oh sì, se stai ospitando il tuo sito WordPress con Kinsta, non devi preoccuparti di questo perché Kinsta offre una funzionalità integrata per ottimizzare automaticamente le immagini del tuo sito senza la necessità di strumenti di terze parti.

Ecco come abilitare questa funzione:

1. Aprite il cruscotto del vostro sito in MyKinsta.
2. Vai alla scheda CDN .
3. Fai clic su Impostazioni accanto a Ottimizzazione immagine.
4. Scegli il tuo livello preferito di ottimizzazione dell'immagine e salva le impostazioni: l'utilizzo di Lossy offrirà i maggiori miglioramenti di velocità, anche se potrebbe avere un piccolo effetto sulla qualità dell'immagine.

Precarica l'immagine Paint più grande e ricca di contenuti

Se il tuo elemento LCP è un'immagine, un'altra strategia per migliorare LCP è precaricare l'immagine più grande e ricca di contenuti. Questo è il motivo per cui potresti vedere una raccomandazione come "Precarica l'immagine Paint contentful più grande" in PageSpeed ​​​​Insights.

Con il precaricamento, puoi dire al browser di un utente di dare la priorità al download di determinate risorse, come l'immagine specifica che è l'elemento LCP del tuo sito.

Il modo più non tecnico per precaricare le immagini LCP è utilizzare un plug-in come Perfmatters, che offre una funzione dedicata Precarica immagini critiche . Tutto quello che devi fare è specificare quante immagini precaricare: ti consigliamo di iniziare solo con una, poiché il precaricamento di troppe risorse può avere un effetto negativo.

Ci sono anche alcuni plugin gratuiti su WordPress.org per raggiungere questo obiettivo, come il plugin Preload Featured Images di WPZOOM, così come altri plugin premium, come FlyingPress.

Verificare la presenza di problemi di caricamento lento

Un altro problema che può attivare il messaggio "Precarica l'immagine più grande e ricca di contenuti" in PageSpeed ​​Insights sono i problemi con il modo in cui il tuo sito WordPress sta caricando le immagini in modo pigro.

Oppure, questo può anche attivare un avviso "La più grande immagine Contentful Paint è stata caricata in modo lento" in PageSpeed ​​​​Insights.

Il caricamento lento ti consente di velocizzare i tempi di caricamento iniziale del tuo sito attendendo il caricamento di determinate risorse (come le immagini) finché un utente non inizia a interagire con il tuo sito.

Anche se normalmente è una buona cosa, può rallentare i tempi LCP se il tuo sito sta tentando di caricare in modo pigro l'immagine che è il tuo elemento LCP. Per questo motivo, ti consigliamo di assicurarti che il tuo sito non stia caricando in modo pigro le immagini visibili nel viewport iniziale.

Se stai utilizzando la funzione di caricamento lento del browser nativo che WordPress ha introdotto in WordPress 5.5, non dovresti riscontrare questo problema perché WordPress esclude già automaticamente la prima immagine nel contenuto a partire da WordPress 5.9.

Se vuoi escludere più della prima immagine, puoi usare la funzione wp_omit_loading_attr_threshold (ma la maggior parte delle persone non dovrà fare nulla qui).

Tuttavia, se utilizzi un plug-in di caricamento lento basato su JavaScript, potrebbe essere necessario impostare manualmente questa esclusione nelle impostazioni del plug-in. Ad esempio, il plug-in Perfmatters include un'opzione che consente di escludere le prime "X" immagini dal caricamento lento.

Se il tuo plug-in di caricamento lento non ti consente di impostare questo tipo di esclusione, puoi passare a un plug-in diverso che lo consente.

Ottimizza il caricamento dei caratteri con la visualizzazione dei caratteri: facoltativo

Se il tuo elemento LCP è testo, il processo di caricamento dei caratteri del tuo sito potrebbe ritardare l'aspetto del testo, il che rallenterà il tempo LCP.

In genere, ciò accade quando si utilizzano caratteri personalizzati. Se il tuo sito è configurato per attendere il rendering del testo fino a dopo il caricamento del carattere personalizzato, ciò rallenterà le cose se il file del carattere personalizzato impiega molto tempo a caricarsi.

Per risolvere questo problema, puoi utilizzare Font-Display: descrittore CSS opzionale.

Questo indica al browser di utilizzare un carattere di fallback se il carattere personalizzato non viene caricato in una piccola finestra (di solito circa 100 ms o meno).

In parole povere, questo significa sostanzialmente che il browser dovrebbe dare la possibilità di caricare il carattere personalizzato. Ma se il carattere personalizzato non si carica abbastanza velocemente, il browser dovrebbe semplicemente utilizzare un carattere di sistema di fallback per evitare di ritardare ulteriormente il contenuto.

In alternativa, puoi anche utilizzare Font-Display: Swap, che carica immediatamente il carattere di fallback e quindi "scambia" il carattere personalizzato una volta caricato il carattere personalizzato. Tuttavia, questo approccio può causare problemi con Cumulative Layout Shift se i caratteri hanno dimensioni diverse, quindi ti consigliamo di fare attenzione.

A meno che il tuo font personalizzato non sia assolutamente necessario per il design del tuo sito web, l'utilizzo di Font-Display: Optional è di solito l'opzione migliore dal punto di vista di Core Web Vitals.

Se hai dimestichezza con l'utilizzo diretto dei CSS, puoi modificare manualmente la proprietà Font-Display nel foglio di stile del tema child.

Se non vuoi utilizzare i CSS, puoi anche trovare plugin che ti aiutano a farlo, anche se la maggior parte di essi è focalizzata sull'ottimizzazione per Google Fonts:

• Asset CleanUp: supporta Google Fonts gratuitamente e font locali personalizzati con la versione Pro.
• Perfmatters: offre una funzionalità per Google Fonts.

Se stai utilizzando Elementor per progettare il tuo sito, Elementor include anche un'opzione integrata che ti consente di utilizzarlo per le pagine che crei con Elementor:

1. Vai a Elementor → Impostazioni .
2. Apri la scheda Avanzate .
3. Imposta l'elenco a discesa Carica caratteri Google uguale a Facoltativo .

Riepilogo

Imparare a migliorare Largest Contentful Paint è importante per migliorare l'esperienza utente del tuo sito e massimizzare il posizionamento nei motori di ricerca.

Ci sono generalmente due parti per migliorare il Largest Contentful Paint: accelerare i tempi di risposta del server e quindi ottimizzare il codice del tuo sito per rendere l'elemento LCP il più rapidamente possibile.

Se non volete preoccuparvi dei tempi di risposta lenti del server, potete spostare il vostro sito WordPress su Kinsta. L'architettura ottimizzata per le prestazioni di Kinsta è specificamente progettata per fornire il tuo sito il più rapidamente possibile.

Inoltre, con la funzione Edge Caching di Kinsta, potete memorizzare nella cache le pagine del vostro sito sulla rete globale di Cloudflare, il che significa che i visitatori di tutto il mondo godranno di tempi di risposta del server fulminei (e, di conseguenza, tempi LCP fulminei).

Se volete saperne di più, potete dare un'occhiata a queste pagine per ulteriori informazioni sull'hosting WordPress gestito da Kinsta o sull'hosting WooCommerce gestito da Kinsta.

Se desiderate che un professionista vi aiuti con alcune ottimizzazioni personalizzate delle prestazioni LCP, potete anche trovare un fornitore nella Kinsta Agency Directory.