Volete migliorare il Largest Contentful Paint sul vostro sito web? Oppure non siete sicuri di cosa significhi Largest Contentful Paint e per quale motivo dovreste preoccuparvene?
Indipendentemente da quale sia il vostro punto di partenza, questo post è per voi: qui troverete tutto ciò che c’è da sapere sul Largest Contentful Paint.
Vedremo cosa significa Largest Contentful Paint, perché è importante, come misurarlo e come migliorarlo.
Seguite l’indice sottostante per passare a una sezione specifica in base alle vostre conoscenze attuali. Oppure, continuate a leggere dall’inizio.
Cos’è il Largest Contentful Paint (LCP)?
Il Largest Contentful Paint è un indicatore delle prestazioni che misura il tempo di caricamento del contenuto principale di una pagina web.
Largest Contentful Paint fa parte delle metriche Core Web Vitals di Google, insieme a Cumulative Layout Shift (CLS).
A livello tecnico, il Largest Contentful Paint misura il tempo che intercorre tra l’inizio del caricamento della pagina da parte dell’utente e il rendering del blocco di testo, dell’immagine o del video più grande all’interno della viewport.
Cosa significa “contenuto principale” in termini di LCP?
Il contenuto principale dipende dalla pagina in questione, ma potrebbe essere uno dei seguenti:
- Testo – più precisamente, qualsiasi elemento a livello di blocco contenente nodi di testo o altri elementi di testo in linea.
- Immagine – elementi all’interno di un elemento <img> o elementi <image> all’interno di un elemento <svg>.
- Video – qualsiasi elemento <video> (utilizza l’immagine del 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, scoprirete come trovare l’esatto elemento Largest Contentful Paint per qualsiasi pagina del vostro sito.
Largest Contentful Paint vs First Contentful Paint
Una domanda delle domande che potreste avere è qual è la differenza tra Largest Contentful Paint e First Contentful Paint, un’altra metrica di performance comune.
Sebbene i due termini siano simili, la differenza fondamentale è che Largest Contentful Paint misura il tempo di caricamento del “contenuto principale” della pagina, mentre First Contentful Paint misura il tempo di caricamento del “primo oggetto”(che sia o meno il contenuto principale).
In pratica:
- LCP = solo il contenuto principale
- FCP = primo contenuto, a prescindere da quale sia il contenuto principale
Di conseguenza, il tempo di LCP sarà quasi sempre leggermente superiore a quello di FCP perché l’elemento “contenuto principale” di solito non è il primo a caricarsi.
Perché il Largest Contentful Paint del Sito è Importante?
Ci sono due motivi principali per cui i tempi del Largest Contentful Paint del vostro sito sono importanti:
- Esperienza dell’utente
- Ottimizzazione per i motori di ricerca
Esperienza dell’Utente
Il motivo più importante per cui dovreste preoccuparvi dei tempi del Largest Contentful Paint del vostro sito è che questa metrica è un buon indicatore per capire l’esperienza degli utenti quando si tratta delle prestazioni del vostro sito.
La maggior parte degli utenti non si preoccupa del tempo che il sito impiega per caricare completamente ogni singolo script ed elemento. Si preoccupa invece di quanto tempo impiega per iniziare a trarre valore dal vostro sito web.
Largest Contentful Paint fa un buon lavoro nel cercare di misurare questo momento di “valore” vedendo quanto tempo impiega il contenuto principale a caricarsi.
Se ottimizzate il vostro sito per ottenere un tempo di caricamento veloce, potete essere certi di offrire agli utenti un’esperienza solida sul vostro sito, almeno per quanto riguarda le prestazioni (ma dovete anche avere un design che sia di gradimento per il cliente e una buona usabilità).
Naturalmente, questo non significa che dobbiate ignorare le altre metriche di performance. Vi consigliamo sempre di dare un’occhiata olistica alle prestazioni e ai colli di bottiglia del vostro sito, per questo abbiamo creato il nostro strumento di monitoraggio delle prestazioni delle applicazioni (APM), disponibile gratuitamente se si utilizza l’hosting Kinsta: Kinsta APM.
Ottimizzazione dei Motori di Ricerca (SEO)
Sul fronte dell’ottimizzazione per i 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 nell’aggiornamento dell’algoritmo Page Experience 2022.
Ciò significa che avere tempi di Largest Contentful Paint scadenti può influire negativamente sulle prestazioni del sito nei risultati di ricerca di Google.
Anche se altri fattori come la qualità/rilevanza dei contenuti e i backlink giocano comunque un ruolo molto più importante nel posizionamento del sito web, è importante ottimizzare i tempi di Largest Contentful Paint del vostro sito per assicurarvi di ottenere il massimo dai vostri sforzi SEO.
Cosa può Influire sui Punteggi di Largest Contentful Paint?
Due tipi di problemi principali possono influenzare i tempi di Largest Contentful Paint di una pagina:
- Quanto tempo impiega il vostro server a rispondere con il documento HTML iniziale.
- Quanto tempo impiega la risorsa LCP a caricarsi.
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 pensare di caricare il contenuto principale, deve ricevere una risposta dal server.
Ecco alcuni dei problemi più comuni che influiscono su questo aspetto:
- Non utilizzare la cache della pagina – il mancato utilizzo della cache della pagina costringe il server a fare più “lavoro” prima di poter rispondere con il documento HTML.
- Hosting lento – un provider di hosting lento avrà sempre un TTFB lento, indipendentemente da ciò che fate.
- Non utilizzare una CDN – una rete di distribuzione dei contenuti (CDN) può accelerare il TTFB servendo le pagine dalla sua rete globale invece di richiedere agli utenti di scaricarle dal server di origine del vostro sito.
Dopo che il server del vostro sito consegna il documento HTML iniziale, potrebbero esserci ulteriori colli di bottiglia quando si tratta di caricare l’elemento principale del contenuto.
Ecco alcuni dei problemi più comuni che riguardano questo aspetto:
- JavaScript o CSS che bloccano il rendering (o codice non ottimizzato/inutile in generale) – se il browser dell’utente deve scaricare e/o elaborare JavaScript o CSS non necessari prima di poter caricare l’elemento principale, questo rallenterà il vostro LCP.
- Immagini non ottimizzate – se l’elemento dell’LCP è un’immagine, l’utilizzo di immagini non ottimizzate rallenterà i tempi perché le immagini più grandi richiedono più tempo per essere scaricate.
- Caricamento di font non ottimizzato – se l’elemento LCP è un testo, il caricamento di font personalizzati in modo non ottimizzato può richiedere più tempo per la visualizzazione del testo.
- File non compressi – se non utilizzate tecnologie di compressione come Gzip o Brotli, il browser dell’utente impiegherà più tempo per scaricare i file del vostro sito.
A seconda del sito, potreste riscontrare dei colli di bottiglia in entrambe le aree o solo in una di esse. Scoprirete come risolvere tutti questi problemi più avanti in questo post.
Che cos’è un Buon Tempo di Largest Contentful Paint?
Google definisce “buono” un tempo di Largest Contentful Paint inferiore a 2,5 secondi.
Se il tempo di Largest Contentful Paint della vostra pagina è compreso tra 2,5 e 4,0 secondi, Google lo classifica come “Da migliorare”. Se il tempo della pagina è superiore a 4,0 secondi, Google lo definisce “Scarso”.
Ecco un grafico di Google che lo mostra visivamente:
Come Misurare il Largest Contentful Paint: i Migliori Strumenti di Test LCP
Esistono diversi strumenti da utilizzare per verificare le prestazioni del vostro sito per Largest Contentful Paint: vediamo alcuni dei più utili…
PageSpeed Insights
PageSpeed Insights è uno dei migliori strumenti per valutare Largest Contentful Paint perché offre quattro utili informazioni:
- Potete verificare i tempi di Largest Contentful Paint del vostro sito con utenti reali dal report Chrome UX(se il vostro sito ha un traffico sufficiente per essere incluso nel report).
- Potete eseguire dei test simulati per vedere come si comporta il sito.
- Google vi indicherà l’elemento LCP effettivamente utilizzato per il test, consentendovi di sapere quale elemento ottimizzare.
- Google vi fornirà suggerimenti su come migliorare il tempo di LCP.
Ecco come usarlo:
- Andate sul sito web di PageSpeed Insights.
- Inserite l’URL della pagina che volete testare.
- Cliccate su Analizza.
Google vi mostrerà i risultati sia per i dispositivi mobili che per quelli desktop: assicuratevi di controllarli entrambi.
Per trovare l’elemento principale che Google utilizza per calcolare l’LCP, potete scorrere la sezione Diagnostica ed espandere la sezione Largest Contentful Paint:
Anche in questo caso, assicuratevi di controllare sia il mobile che il desktop perché l’elemento LCP potrebbe essere diverso per dispositivi diversi.
Strumenti per Sviluppatori di Chrome
Potete anche testare il tempo di Largest Contentful Paint direttamente dagli Strumenti per sviluppatori di Chrome utilizzando la scheda Prestazioni o la funzione di verifica di Lighthouse. Vi consigliamo di utilizzare la scheda Prestazioni perché fornisce maggiori informazioni.
Ecco come iniziare:
- Aprite la pagina che desiderate testare.
- Aprite gli Strumenti per gli sviluppatori di Chrome.
- Andate alla scheda Performance.
- Assicuratevi che la casella Web Vitals sia selezionata.
- Cliccate sul pulsante Reload (come qui sotto).
Ora dovreste vedere un’analisi completa del sito.
Se passate il mouse su LCP nella scheda Network, potete verificare i tempi:
Se passate il mouse su LCP nella scheda Timings, potrete visualizzare l’effettivo elemento LCP:
Google Search Console
Sebbene Google Search Console non permetta di testare una singola pagina per il suo tempo di Largest Contentful Paint, è molto utile per valutare le prestazioni dell’intero sito.
Ogni pagina del sito avrà un tempo LCP diverso, quindi non potete limitarvi a testare l’homepage e chiudere il discorso.
Con Google Search Console, potrete vedere in che posizione ogni pagina del vostro sito rientra nelle categorie “Buono”, “Da migliorare” e “Scarso” di Google. I dati sulle prestazioni provengono dal rapporto Chrome UX, quindi si basano su dati reali degli utenti.
Se non l’avete ancora fatto, dovrete prima verificare il vostro sito con Google Search Console.
Una volta fatto, ecco come accedere al rapporto LCP:
- Aprite Google Search Console per il vostro sito.
- Andate su Core Web Vitals nella scheda Experience.
- Cliccate su Open Report accanto al grafico Mobile o Desktop.
- Cercate i problemi nella sezione Why URLs aren’t considered good. Se fate clic sul problema, potrete visualizzare ulteriori informazioni sugli URL che causano problemi.
*Assicuratevi di controllare i risultati sia per desktop che per mobile, in quanto i dati potrebbero essere diversi in ciascuno di essi.
WebPageTest
WebPageTest è un’altra opzione utile per eseguire test di performance simulati.
A differenza di PageSpeed Insights, WebPageTest vi permette di personalizzare completamente varie metriche di test come il luogo del test, la velocità di connessione, il dispositivo e altro ancora. Questo è il principale vantaggio di utilizzarlo rispetto ad altri strumenti: offre più opzioni per configurare il test.
Ecco come eseguire un test:
- Andate su WebPageTest.
- Aggiungete l’URL della pagina che volete testare.
- Espandete le opzioni di configurazione avanzata per configurare completamente il test.
Nella pagina dei risultati, vedrete i dati relativi all’LCP, insieme a molte altre metriche sulle prestazioni (compresa un’analisi a cascata).
Come Trovare l’Elemento Largest Contentful Paint
Se desiderate migliorare Largest Contentful Paint, può essere molto utile sapere esattamente quale elemento Google utilizza per calcolare il tempo LCP.
Ad esempio, se sapete che Google utilizza l’immagine hero come elemento LCP della vostra homepage, dovete trovare il modo di servire quell’immagine il più velocemente possibile per migliorare i tempi LCP dell’homepage.
Come abbiamo già detto, potete trovare l’elemento Largest Contentful Paint utilizzando PageSpeed Insights o Chrome Developer Tools.
Assicuratevi di controllare i risultati sia da mobile che da desktop, perché l’elemento LCP potrebbe essere diverso su dispositivi diversi.
Come migliorare il Largest Contentful Paint in WordPress (o in Altre Piattaforme)
Ora che sapete tutto su Largest Contentful Paint, passiamo ad alcuni consigli pratici su come migliorare Largest Contentful Paint in WordPress.
Anche se per questi consigli ci concentreremo su WordPress, tutti i suggerimenti sono universali e si applicano ad altri tipi di siti web.
Impostare la Cache per Migliorare il Tempo di Risposta del Server
La cache può migliorare i tempi di risposta del server riducendo il lavoro di elaborazione che il server deve fare prima di consegnare il documento HTML finito ai browser dei visitatori.
Se il vostro sito WordPress è su Kinsta, non dovrete preoccuparvi di configurare la cache perché Kinsta implementa automaticamente la cache ottimizzata per voi.
Se il vostro host è un altro, potete attivare il caching sul vostro sito utilizzando un plugin gratuito come WP Super Cache o un plugin a pagamento come WP Rocket.
Per ulteriori opzioni, date un’occhiata al nostro post con i migliori plugin per il caching di WordPress.
Passare a un Hosting WordPress più Veloce
Anche se tutte le tattiche di questo elenco possono aiutarvi a migliorare i tempi di LCP, non è il caso di girarci intorno:
Se utilizzate un hosting WordPress lento e non ottimizzato, i tempi di LCP saranno sempre limitati dalla qualità del vostro host.
Potreste migliorare un po’ le cose, ma se il vostro host è lento farete sempre fatica a raggiungere tempi di LCP inferiori ai 2,5 secondi.
Se volete trovare il modo più semplice per migliorare i tempi del vostro Largest Contentful Paint, potete migrare il sito su Kinsta. Kinsta non solo offre un’infrastruttura di hosting ottimizzata per le prestazioni, ma dispone anche di funzioni integrate per gestire molte delle altre ottimizzazioni presenti in questo elenco.
Ciò significa che potete concentrarvi sulla crescita del sito invece di occuparvi dell’ottimizzazione dei tempi del Largest Contentful Paint.
Se siete interessati, Kinsta migra gratuitamente un numero illimitato di siti web da qualsiasi host – scoprite di più sulla migrazione gratuita qui.
Se siete ancora indecisi, provate prima gli altri consigli di questo elenco. Ma se avete ancora problemi dopo aver fatto tutto quello che c’è scritto in questo elenco, forse avete bisogno di un hosting migliore.
Usare un Content Delivery Network (CDN)
Senza un CDN, tutti i visitatori del vostro sito devono scaricare l’HTML e le risorse statiche di una pagina dal vostro server di hosting.
Se i visitatori si trovano vicino al vostro server, questo non è un problema. Ma se sono sparsi in tutto il mondo, il sito può essere rallentato a causa della distanza fisica tra un visitatore e il server del vostro sito.
Con un CDN, potete distribuire le risorse statiche del sito (o anche le pagine HTML finite del sito) alla rete globale del CDN. In questo modo, i visitatori possono scaricare i file dalla posizione più vicina del CDN, il che è molto più veloce.
Se avete un hosting con Kinsta, vi consigliamo di utilizzare la funzione Edge Caching di Kinsta per ottenere i migliori risultati.
La funzione Edge Caching di Kinsta funziona mettendo in cache le pagine HTML complete e le risorse statiche del vostro sito sulla rete globale di Cloudflare (invece di mettere in cache solo le risorse statiche come la maggior parte delle soluzioni CDN).
Ciò significa che i visitatori del sito possono scaricare la pagina completa dalla posizione edge più vicina, il che accelera i tempi di risposta del server e il tempo di caricamento della risorsa LCP.
Per attivare l’Edge Caching di Kinsta, andate alla scheda Edge Caching nel cruscotto del vostro sito in MyKinsta.
Se il vostro sito è ospitato da un’altra parte, potete impostare un CDN per le risorse statiche del sito utilizzando i servizi CDN più diffusi come KeyCDN, Bunny, e altri.
Evitare i JavaScript che Bloccano il Rendering (Differire o Rimuovere)
Il JavaScript che blocca il rendering è un JavaScript che viene caricato prima dell’elemento LCP principale anche se non è necessario in quel momento.
Ritardando il caricamento dell’elemento LCP, rallenta i tempi di caricamento del vostro LCP.
Per risolvere questo problema, potete adottare alcune strategie:
- Rimuovete il JavaScript non necessario, se possibile.
- Rimandate il JavaScript in modo che non blocchi il caricamento dell’elemento principale del sito.
- Ritardate il JavaScript fino a quando l’utente non interagisce con il sito.
Per la maggior parte delle persone, il modo più semplice per implementare questa funzionalità è tramite un plugin come Autoptimize o WP Rocket.
Per una guida completa su come farlo, abbiamo due post molto dettagliati:
- Come Eliminare le Risorse di Blocco della Visualizzazione su WordPress
- Come Differire il Parsing di Javascript in WordPress
Evitare i CSS che Bloccano il Rendering e Ottimizzare la Distribuzione dei CSS
Così come un JavaScript non ottimizzato può rallentare il vostro sito, anche un CSS non ottimizzato può fare lo stesso.
In sostanza, dovete caricare il minor numero possibile di CSS. E per il CSS che dovete caricare, dovrete caricarlo in modo ottimale. In genere, questo significa caricare il CSS importante all’inizio e ritardare il CSS non critico a una fase successiva del processo di caricamento.
Se non siete degli sviluppatori, il modo più semplice per ottenere questo risultato è utilizzare plugin di ottimizzazione delle prestazioni come Perfmatters, WP Rocket o FlyingPress.
Ad esempio, WP Rocket offre funzioni integrate per rimuovere il CSS inutilizzato pagina per pagina e servire il CSS in modo ottimale.
Se volete un approfondimento su come fare tutto questo, consultate la nostra guida completa su come ottimizzare i CSS.
Ridurre al minimo HTML, CSS e JavaScript
Oltre alle tecniche di ottimizzazione del codice descritte sopra, dovrete anche minificare il codice HTML, CSS e JavaScript del vostro sito. In sostanza, si tratta di rimuovere i caratteri non necessari e gli spazi bianchi dal codice del sito per ridurne le dimensioni.
Potete utilizzare un plugin gratuito come Autoptimize per minificare il codice o uno dei plugin premium completi come Perfmatters, WP Rocket o FlyingPress.
Oppure, date un’occhiata al nostro tutorial completo sulla minificazione del codice per saperne di più. Anche se il tutorial si concentra su JavaScript, potete utilizzare gli stessi metodi e plugin per minificare anche altro codice.
Usare la Compressione a Livello di Server (Gzip o Brotli)
La compressione a livello di server permette di ridurre le dimensioni dei file del 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 homepage di Kinsta dell’85,82%.
Se il vostro sito web WordPress è su Kinsta, non dovete preoccuparvene perché Kinsta abilita automaticamente la compressione Brotli per tutti i siti.
Se il vostro sito è ospitato altrove, potete utilizzare questo strumento gratuito di GiftOfSpeed per verificare se il vostro sito ha attivato Gzip o Brotli.
Se il vostro sito non utilizza la compressione, potete seguire la nostra guida su come abilitare la compressione Gzip per impostarla.
Se utilizzate Cloudflare per servire i contenuti del vostro sito, Cloudflare ha anche un’impostazione integrata per abilitare la compressione Brotli:
- Aprite il vostro sito nella dashboard di Cloudflare.
- Andate su Velocità → Ottimizzazione nel menu laterale.
- Attivate il toggle Brotli.
Comprimere e Ridimensionare le Immagini
Se il vostro elemento LCP è un’immagine, trovare il modo di ridurne le dimensioni ridurrà il tempo necessario al browser dell’utente per scaricare l’immagine (e quindi accelererà i tempi del vostro LCP).
Per ridurre le dimensioni dell’immagine, dovreste ridimensionare l’immagine alle dimensioni in cui la utilizzerete effettivamente, comprimerla con una compressione lossy o lossless e servirla in un formato ottimizzato come WebP.
Questo approccio è un’ ottimizzazione delle prestazioni generale – non è specifico per Largest Contentful Paint.
Per uno sguardo più completo, consultate la nostra guida dettagliata all’ottimizzazione delle immagini per i siti web.
E se il vostro sito WordPress è su Kinsta, non dovete preoccuparvi di questo perché Kinsta offre una funzione integrata per ottimizzare automaticamente le immagini del sito senza dover ricorrere a strumenti di terze parti.
Ecco come attivare questa funzione:
- Aprite il cruscotto del vostro sito in MyKinsta.
- Andate alla scheda CDN.
- Cliccate su Impostazioni accanto a Ottimizzazione immagine.
- Scegliete il livello di ottimizzazione delle immagini che preferite e salvate le impostazioni: l’utilizzo di Lossy offre i maggiori miglioramenti in termini di velocità, anche se potrebbe avere un piccolo effetto sulla qualità delle immagini.
Precaricare l’Immagine Largest Contentful Paint
Se il vostro elemento LCP è un’immagine, un’altra strategia per migliorare l’LCP è quella di precaricare l’immagine Largest Contentful Paint. Per questo motivo potreste vedere una raccomandazione del tipo “Preload Largest Contentful Paint image” in PageSpeed Insights.
Con il precaricamento, si può dire al browser dell’utente di dare priorità al download di determinate risorse, come l’immagine specifica che costituisce l’elemento LCP del vostro sito.
Il modo più semplice per precaricare le immagini LCP è utilizzare un plugin come Perfmatters, che offre una funzione dedicata al precaricamento delle immagini critiche. Tutto ciò che dovete fare è specificare il numero di immagini da precaricare – vi consigliamo di iniziare con una sola, perché il precaricamento di troppe risorse può avere un effetto negativo.
Ci sono anche alcuni plugin gratuiti su WordPress.org che permettono di ottenere questo risultato, come il plugin Preload Featured Images di WPZOOM, oltre ad altri plugin premium, come FlyingPress.
Controllare i Problemi di Lazy Loading
Un altro problema che può scatenare il messaggio “Preload Largest Contentful Paint image” in PageSpeed Insights è il Lazy Loading delle immagini sul vostro sito WordPress.
In alternativa, questo può anche far scattare l’avviso “Largest Contentful Paint image was lazily loaded” in PageSpeed Insights.
Il lazy loading permette di accelerare i tempi di caricamento iniziale del sito aspettando a caricare determinate risorse (come le immagini) fino a quando un utente non inizia a interagire con il sito.
Sebbene questo sia normalmente positivo, può rallentare i tempi del vostro LCP se il sito cerca di caricare in lazy loading la vostra immagine elemento LCP. Per questo motivo, dovrete assicurarvi che il vostro sito non carichi in lazy loading le immagini visibili nel viewport iniziale.
Se state utilizzando la funzione di lazy loading del browser nativo introdotta da WordPress in WordPress 5.5, non dovreste riscontrare questo problema perché WordPress esclude già automaticamente la prima immagine nel contenuto a partire da WordPress 5.9.
Se volete escludere più della prima immagine, potete utilizzare la funzione wp_omit_loading_attr_threshold (ma la maggior parte delle persone non avrà bisogno di fare nulla in questo caso).
Tuttavia, se utilizzate un plugin per il lazy loading basato su JavaScript, potreste dover impostare manualmente questa esclusione nelle impostazioni del plugin. Ad esempio, il plugin Perfmatters include un’opzione che ti permette di escludere le prime “X” immagini dal lazy loading.
Se il vostro plugin per il lazy loading non vi permette di impostare questo tipo di esclusione, potete passare a un altro plugin che lo faccia.
Ad esempio, WP Rocket esclude automaticamente tutte le immagini above the fold, compresa quella LCP, dal lazy loading, aiutandovi a risparmiare tempo, oltre al fastidio di farlo manualmente. Il plugin esegue l’ottimizzazione per impostazione predefinita subito dopo l’attivazione, quindi non è necessario selezionare alcuna opzione.
Ottimizzare il Caricamento dei Font con Font-Display: Opzionale
Se il vostro elemento LCP è un testo, il processo di caricamento dei font del sito potrebbe ritardare la comparsa del testo, rallentando così il tempo di LCP.
In genere questo accade quando si utilizzano font personalizzati. Se il vostro sito è configurato in modo da attendere il rendering del testo solo dopo il caricamento del font personalizzato, questo rallenterà il processo se il file del font personalizzato richiede molto tempo per essere caricato.
Per risolvere questo problema, potete utilizzare il descrittore Font-Display: Descrittore CSS opzionale.
Questo indica al browser di utilizzare un font di riserva se il font personalizzato non viene caricato entro una piccola finestra (di solito circa 100ms o meno).
In parole povere, questo significa che il browser deve dare al font personalizzato la possibilità di caricarsi. Ma se il font personalizzato non si carica abbastanza velocemente, il browser dovrebbe utilizzare un font di fallback per evitare di ritardare ulteriormente il contenuto.
In alternativa, è possibile anche utilizzare Font-Display: Swap, che carica subito il font di fallback e poi “scambia” il font personalizzato una volta che questo è stato caricato. Tuttavia, questo approccio può causare problemi con lo spostamento del layout cumulativo se i font sono di dimensioni diverse, quindi è meglio fare attenzione.
A meno che il font personalizzato non sia assolutamente necessario per il design del sito web, utilizzare Font-Display: Optional è di solito l’opzione migliore dal punto di vista di Core Web Vitals.
Se vi sentite a vostro agio nell’utilizzare direttamente i CSS, potete modificare manualmente la proprietà Font-Display nel foglio di stile del vostro child theme.
Se non volete usare i CSS, potete anche cercare dei plugin che vi aiutino a farlo, anche se la maggior parte di essi è incentrata sull’ottimizzazione dei Google Fonts:
- Asset CleanUp – supporta Google Fonts gratuitamente e font locali personalizzati con la versione Pro.
- Perfmatters – offre una funzione per Google Fonts.
Se utilizzate Elementor per progettare il sito, questo include anche un’opzione integrata che permette di utilizzare questi font per le pagine create con Elementor:
- Andate su Elementor → Impostazioni.
- Aprite la scheda Avanzate.
- Impostate il menu a tendina Carica Google Fonts su Opzionale.
Riepilogo
Migliorare Largest Contentful Paint è importante per l’esperienza utente del sito e massimizzare il posizionamento sui motori di ricerca.
Il miglioramento di Largest Contentful Paint è generalmente diviso in due parti: la riduzione dei tempi di risposta del server e l’ottimizzazione del codice del sito per rendere l’elemento LCP il più velocemente possibile.
Se non volete preoccuparvi dei tempi di risposta del server, potete spostare il sito WordPress su Kinsta. L’architettura di Kinsta, ottimizzata per le prestazioni, è progettata appositamente per rendere il vostro sito il più veloce possibile.
Inoltre, grazie alla funzione Edge Caching di Kinsta, potete memorizzare le pagine del vostro sito nella cache della rete globale di Cloudflare, il che significa che i visitatori di tutto il mondo potranno godere di tempi di risposta del server fulminei (e, di conseguenza, di tempi LCP fulminei).
Se volete saperne di più, potete consultare queste pagine per maggiori informazioni sull’hosting WordPress gestito di Kinsta o sull’hosting WooCommerce gestito di Kinsta.
Se volete che un professionista vi aiuti a ottimizzare le prestazioni dell’LCP, potete trovarne uno nella Kinsta Agency Directory.
Lascia un commento