Problemi con i tempi del First Contentful Paint (FCP) sul sito?

Se non sapete nemmeno cosa sia il First Contentful Paint o se state cercando consigli specifici su come accelerare i tempi del First Contentful Paint sul vostro sito, questo articolo fa proprio per voi.

Cominceremo spiegando cos’è il First Contentful Paint e come misurarlo sul proprio sito.

Poi condivideremo una serie di tattiche che potrete utilizzare per accelerare i tempi di FCP sul vostro sito. Inoltre, per rendere questo post il più accessibile possibile, cercheremo di mostrare strumenti non tecnici e plugin WordPress per aiutarvi a implementare il tutto.

Diamoci dentro!

Cos’è il First Contentful Paint (FCP)?

Il First Contentful Paint, spesso abbreviato in FCP, è una metrica di performance incentrata sull’esperienza utente che misura il tempo necessario affinché la prima parte della pagina sia visibile sullo schermo dell’utente.

L’FCP è una metrica importante perché influisce sulle prestazioni percepite. Quando un utente visita per la prima volta il vostro sito, il suo browser visualizza una schermata vuota, il che non rappresenta una buona esperienza per i visitatori.

Una volta che il contenuto inizia a caricarsi, il visitatore avrà almeno la sensazione che “qualcosa” stia accadendo e che il contenuto completo della pagina venga caricato presto. Per questo motivo, avere un tempo FCP veloce può dare all’utente la sensazione che il vostro sito sia veloce, anche se il caricamento del resto dei contenuti richiede un po’ più di tempo.

Al contrario, un tempo FCP lento è frustrante per gli utenti, in quanto implica che la pagina impiega molto tempo a caricarsi. Non c’è niente di peggio che avere dei visitatori che fissano il loro schermo vuoto e si chiedono se il vostro sito web stia funzionando.

First Contentful Paint vs Largest Contentful Paint

Il Largest Contentful Paint (LCP) è un’altra metrica popolare incentrata sull’esperienza utente che funziona in modo simile al First Contentful Paint.

Poiché le metriche sono così simili, può essere difficile capire le differenze tra First Contentful Paint e Largest Contentful Paint.

Ecco le differenze fondamentali:

  • FCP: misura il tempo necessario alla comparsa del primo oggetto. Può essere qualsiasi cosa, purché compaia un qualche tipo di contenuto nella pagina.
  • LCP: misura il tempo necessario alla comparsa del contenuto principale della pagina.

A causa di questa differenza, il tempo FCP di una pagina dovrebbe essere sempre un po’ più veloce del tempo LCP della pagina stessa. Secondo la definizione delle metriche, è impossibile che il tempo di LCP sia più veloce del tempo di FCP. Anche se tecnicamente potrebbero essere uguali se il “primo” elemento da caricare è lo stesso dell’elemento “principale”, questo non accade nella maggior parte delle pagine.

Per illustrare questo aspetto, ecco una timeline visiva di un’analisi WebPageTest che abbiamo eseguito sulla homepage di Kinsta.

  • L’FCP si verifica nel filmstrip di 1,0 secondi (.924 secondi, per l’esattezza). È la prima volta che si passa da una pagina bianca a un contenuto visivo.
  • L’LCP si verifica nel filmstrip di 1,3 secondi (1,217 secondi per l’esattezza). Questo è il momento in cui il contenuto “principale” della pagina è visibile.
Una linea temporale che mostra la differenza tra i tempi di FCP e LCP.
La differenza tra i tempi di FCP e LCP.

Qual è un buon tempo di First Contentful Paint?

Google consiglia di puntare a un tempo di First Contentful Paint di 1,8 secondi o meno sulle pagine del proprio sito.

Google considera i tempi FCP compresi tra 1,8 e 3,0 secondi come “Da migliorare”, mentre i tempi FCP superiori a 3,0 secondi sono “Scarsi”

Google raccomanda che i tempi di FCP siano inferiori a 1,8 secondi per essere considerati "Buoni".
Le linee guida di Google per i tempi FCP.

Come misurare il tempo di First Contentful Paint di una pagina

Il modo più semplice per misurare il tempo di First Contentful Paint di una pagina del proprio sito è utilizzare lo strumento PageSpeed Insights di Google, anche se esistono altri strumenti che si possono utilizzare.

L’aspetto positivo di PageSpeed Insights è che fornirà sia i risultati di test simulati che i dati FCP di utenti reali (se il vostro sito ha un traffico sufficiente per essere incluso nel report Chrome User Experience).

Inoltre, copre le prestazioni sia da desktop che da mobile, in quanto il tempo di FCP di una pagina varia a seconda del dispositivo e della velocità di connessione dell’utente.

Ecco come testare una pagina:

  1. Aprite la pagina PageSpeed Insights.
  2. Inserite l’URL della pagina del sito che volete testare.
  3. Cliccate sul pulsante Analyze.

Dopo una breve attesa, dovreste vedere i risultati.

Se il vostro sito ha un traffico sufficiente per essere incluso nel report Chrome User Experience, vedrete due diversi tempi FCP:

  • Il tempo nella sezione “Discover what your real users are experiencing” è il tempo FCP medio dei visitatori reali del vostro sito.
  • Il tempo nella sezione “Diagnose performance issues” si basa su un test simulato. Potete vedere le condizioni della simulazione nel riquadro grigio sotto i numeri.

Si può anche passare dai risultati per mobile a quelli per desktop utilizzando le schede in alto.

Dove trovare i tempi FCP nella pagina dei risultati di PageSpeed Insights di Google.
I tempi di FCP nello strumento PageSpeed Insights di Google.

Per testare altre pagine del vostro sito, potete ripetere lo stesso procedimento.

I tempi di FCP variano a seconda della pagina, quindi vi consigliamo di testare più pagine per avere un’idea delle prestazioni del vostro sito.

Ad esempio, potreste testare la homepage, la pagina degli annunci del blog, un singolo post del blog e così via. Inoltre, assicuratevi di esaminare i dati sia da mobile che da desktop.

Altri modi per misurare i primi tempi di Paint di Contentful

Sebbene PageSpeed Insights offra uno dei modi più semplici per vedere i tempi di FCP reali e simulati per il vostro sito, esistono anche altri strumenti di verifica delle prestazioni da utilizzare come integrazione o sostituzione di PageSpeed Insights.

Ecco alcuni buoni punti di partenza:

Cosa può influenzare i tempi di FCP di un sito?

In generale, ci sono due “gruppi” di problemi che possono rallentare l’FCP:

  • Tempi di risposta lenti del server: se il vostro server impiega troppo tempo per fornire i dati del vostro sito ai browser degli utenti, la pagina avrà un tempo FCP lento. Questo può essere dovuto a problemi come l’hosting o il DNS lenti, il mancato utilizzo del caching (che richiede al server di fare più lavoro prima di poter servire una pagina), il mancato utilizzo di una rete di distribuzione dei contenuti (CDN) e così via.
  • Codice del sito web mal ottimizzato: anche se il vostro server risponde velocemente, potreste comunque avere un tempo di FCP lento se il codice del vostro sito è mal ottimizzato. Ad esempio, la pagina potrebbe avere tonnellate di JavaScript che bloccano il caricamento dei contenuti visibili. Potrebbero esserci anche problemi con i CSS, le immagini o altre aree del codice del vostro sito.

A seconda del sito, potreste avere problemi in una sola area o in entrambe.

Come accelerare il First Contentful Paint: 10 consigli che funzionano

Ora che abbiamo capito meglio cos’è First Contentful Paint e perché è importante, passiamo ad alcuni consigli pratici da mettere in pratica per migliorare i tempi del vostro sito.

L’aspetto positivo dell’implementazione di questi consigli è che miglioreranno tutte le metriche di performance del vostro sito, non solo l’FCP.

Ecco un rapido riepilogo, di seguito li analizzeremo nel dettaglio:

1. Passare a un hosting più veloce

C’è un fatto inevitabile quando si parla di FCP:

Se l’hosting sottostante al vostro sito è lento, il vostro FCP sarà lento anche se avete un sito perfettamente ottimizzato.

L’implementazione degli altri consigli di questo elenco migliorerà i tempi di FCP del sito, ma le prestazioni del vostro sito saranno sempre ostacolate dalla qualità del vostro hosting.

Quindi, potete procedere con l’implementazione degli altri consigli di questo elenco. Ma se, dopo aver fatto tutto il resto, i tempi di FCP sono ancora lenti, forse è il caso di passare a un hosting più veloce.

Se non sapete da dove cominciare, l’hosting WordPress gestito di Kinsta è un’ottima scelta.

Non solo l’infrastruttura sottostante è ottimizzata per le prestazioni, ma Kinsta può anche aiutarvi a implementare automaticamente molte altre strategie di questo elenco, tra cui il caching, la rete di distribuzione dei contenuti (CDN), i DNS ottimizzati, le immagini ottimizzate e altro ancora.

2. Utilizzare il caching delle pagine (idealmente a livello di server)

Se avete costruito il vostro sito web con WordPress, questo dovrà elaborare dinamicamente il codice lato server per ogni singolo visitatore (per impostazione predefinita).

Quando una persona visita la vostra pagina, il vostro server di hosting dovrà eseguire il PHP di WordPress e interrogare il database del vostro sito per generare il documento HTML finito da inviare al browser dell’utente.

Questo richiede tempo, soprattutto su un hosting poco potente, il che può influire notevolmente sui tempi di FCP del vostro sito.

Con il caching delle pagine, potete “mettere in cache” la versione HTML finita di ogni pagina. Invece di dover elaborare il codice lato server per ogni visita, il vostro server risponderà immediatamente con l’HTML finito nella sua cache.

Se utilizzate l’hosting di Kinsta, Kinsta implementerà automaticamente il caching delle pagine per voi tramite la funzionalità Edge Caching.

La particolarità dell’approccio Edge Caching di Kinsta è che può servire le pagine in cache dalla rete globale di Cloudflare. Parleremo di cosa sia una rete di distribuzione di contenuti nella prossima sezione, ma il vantaggio principale è che permette di ottenere tempi di caricamento molto veloci a livello globale.

L'interfaccia di Kinsta che consente di attivare la funzione Edge Caching di Kinsta.
La soluzione Edge Caching integrata di Kinsta.

Se il vostro sito è ospitato altrove, potete verificare se il vostro host dispone di una funzione di caching a livello di server o utilizzare uno dei tanti plugin di caching per WordPress, come WP Rocket e FlyingPress.

3. Implementare una rete di distribuzione dei contenuti (CDN)

Una rete di distribuzione dei contenuti (CDN) è una rete globale di server che memorizza una copia di alcuni o tutti i contenuti/file del vostro sito.

Quando una persona visita il vostro sito, il CDN servirà automaticamente i file del vostro sito dalla posizione fisicamente più vicina al visitatore.

Una rappresentazione visiva della rete di oltre 300 server edge di Cloudflare.
Cloudflare dispone di un’enorme rete globale di oltre 300 sedi.

Poiché la distanza fisica gioca ancora un ruolo nei tempi di caricamento (non abbiamo ancora battuto la velocità della luce!), il browser del visitatore riceverà i file del vostro sito più velocemente, migliorando i tempi di FCP.

Se utilizzate un hosting di Kinsta, Kinsta implementa automaticamente un CDN gratuito alimentato da Cloudflare per tutte le pagine del vostro sito, che offre le prestazioni globali più veloci.

Se il vostro hosting è di un altro tipo, potete implementare voi stessi un CDN utilizzando provider come Cloudflare, Amazon CloudFront, Fastly e altri.

4. Usare un provider DNS più veloce

Prima che il browser di un utente possa connettersi al server del vostro sito web, deve utilizzare il Domain Name System (DNS) per trovare il server web associato al nome di dominio del vostro sito.

Il provider DNS che avete configurato per l’utilizzo del vostro nome di dominio influisce sul tempo necessario per questo processo e, di conseguenza, sull’FCP del vostro sito.

Ad esempio, secondo DNSPerf, la differenza tra il provider più veloce e quello più lento è di oltre 130 ms, una differenza piuttosto significativa.

Se avete un hosting con Kinsta, potete già accedere a un DNS premium gestito da Amazon Route53 utilizzando i server dei nomi di Kinsta.

L'interfaccia di Kinsta che consente di gestire i record DNS del proprio dominio.
La gestione DNS gratuita di Kinsta è affidata ad Amazon Route53.

Se avete un hosting altrove, Cloudflare offre uno dei migliori servizi DNS gratuiti.

5. Ottimizzare il CSS del vostro sito

Ora che avete risolto i problemi di tempo di risposta del server, è il momento di ottimizzare il codice del vostro sito, a partire dal CSS.

Il CSS controlla il design e lo stile degli elementi della pagina. Sebbene sia una parte essenziale di qualsiasi sito web, il CSS potrebbe rallentare i tempi di FCP se viene caricato in modo non ottimizzato e/o se viene caricato CSS non necessario su pagine in cui non serve.

Abbiamo un intero post su come ottimizzare il CSS, ma vediamo le tattiche più importanti per velocizzare l’FCP.

Rimuovere il CSS inutilizzato

Per prima cosa, dovrete rimuovere il CSS inutilizzato dalle pagine in cui non è necessario.

Un modo per farlo è il metodo manuale. Uno strumento come PurifyCSS può scansionare le pagine alla ricerca di CSS inutilizzati e poi potete rimuovere manualmente il codice. Anche PageSpeed Insights segnala i CSS inutilizzati nella sezione “Reduce unused CSS” della sua diagnostica.

Tuttavia, se utilizzate WordPress, ci sono alcuni utili plugin che possono automatizzare l’intero processo, il che è molto più semplice (soprattutto per i non sviluppatori). Alcune buone opzioni da considerare sono WP Rocket, FlyingPress e Perfmatters.

Tutti questi plugin sono strumenti premium. Tuttavia, riteniamo che valgano l’investimento perché possono anche aiutarvi a implementare molti degli altri consigli di questo elenco.

L'interfaccia del plugin WP Rocket che consente di rimuovere automaticamente i CSS inutilizzati dalle pagine del sito.
Come rimuovere i CSS inutilizzati in WP Rocket.

Inserire il CSS critico in linea e ritardare quello non critico

Per impostazione predefinita, il vostro sito probabilmente aspetterà di aver caricato tutto il codice CSS prima di iniziare il rendering dei contenuti “above-the-fold”. Tuttavia, questo non è del tutto ottimale dal punto di vista dell’esperienza dell’utente, perché in realtà avete bisogno solo del CSS necessario per il contenuto above-the-fold – tutto il resto può aspettare un secondo momento.

Il CSS per il contenuto della pagina è chiamato CSS critico.

Per accelerare l’FCP della pagina e altri parametri di performance, potete inserire il CSS critico direttamente nella sezione <head> della pagina (ovvero metterlo in linea) invece di caricarlo come parte di un foglio di stile esterno.

Gli utenti più esperti possono generare manualmente il CSS critico di una pagina utilizzando uno strumento come questo.

Ma anche su WordPress è possibile automatizzare questo processo per ogni singola pagina di un sito utilizzando FlyingPress o WP Rocket.

Una volta inserito il CSS critico in una pagina, potete tranquillamente rimandare il caricamento del resto del CSS della pagina a una fase successiva del processo di caricamento della pagina (dopo che il contenuto above-the-fold è già stato renderizzato).

Sia WP Rocket che FlyingPress eseguono automaticamente questa operazione nell’ambito della loro funzionalità CSS critico, il che è un altro motivo per prendere in considerazione il loro utilizzo.

Come ottimizzare la consegna dei CSS e il percorso critico dei CSS utilizzando il plugin FlyingPress.
Come inlineare i CSS critici in FlyingPress.

Minificare il codice CSS

Infine, un altro modo per aumentare un pochino le prestazioni codice CSS del vostro sito è quello di minificarlo. Minificando il codice CSS, si rimuovono i caratteri e gli spazi bianchi non necessari, il che consente di ridurne ulteriormente le dimensioni.

Plugin come WP Rocket e FlyingPress possono fare questo per voi. Potete anche trovare plugin specifici per la minificazione come Fast Velocity Minify.

6. Ottimizzare il JavaScript del sito

Oltre al CSS, anche il JavaScript del vostro sito è un’altra area a cui dover dedicare un po’ di tempo all’ottimizzazione del codice del sito.

Come per i CSS, ci sono diverse strategie che potete implementare per ridurre l’impatto di JavaScript sui tempi di FCP del vostro sito.

Non usare elementi che dipendono da JavaScript above-the-fold

Se vi affidate a JavaScript per alimentare importanti funzionalità above-the-fold, come ad esempio il menu di navigazione del vostro sito (questo è particolarmente comune per la versione mobile di un sito, dato che molti menu mobili si affidano a JavaScript), questo può rallentare i tempi di FCP perché i browser degli utenti devono caricare il pesante JavaScript prima di poter iniziare il rendering della pagina.

Se utilizzate WordPress, la scelta di un tema ottimizzato per le prestazioni dovrebbe aiutarvi a evitare questo problema, poiché i bravi sviluppatori eviteranno di affidarsi a JavaScript per queste funzioni.

Potete anche cercare di evitare di utilizzare cursori e altri elementi alimentati da JavaScript nelle aree above-the-fold.

Rimuovere il JavaScript non necessario

Anche se dovrete porre particolare enfasi sulla riduzione dell’uso di JavaScript negli elementi above-the-fold, in generale è una buona idea rimuovere il più possibile il JavaScript non necessario da ogni pagina.

Per cominciare, dovrete eliminare tutti i plugin di WordPress che non apportano un miglioramento significativo al vostro sito, poiché molti plugin di WordPress si basano su JavaScript per le loro funzionalità.

Un’altra opzione è quella di utilizzare un plugin per la gestione degli script, come Asset CleanUp o Perfmatters, per disabilitare i JavaScript pagina per pagina; in questo modo potere disabilitare gli script nelle pagine in cui non sono necessari, lasciandoli comunque abilitati nelle altre pagine.

Abbiamo anche una guida più tecnica su come disabilitare i plugin pagina per pagina.

Eliminare i JavaScript che bloccano il rendering (defer o delay)

In ogni caso, probabilmente dovrete caricare almeno un po’ di JavaScript sulla pagina. Per assicurarvi che questo JavaScript non interferisca con il caricamento dei contenuti above-the-fold, ci sono due strategie comuni da implementare:

  • Rinviare il JavaScript che blocca il rendering: potete evitare di bloccare il caricamento di altri contenuti rinviando il caricamento di JavaScript a una fase successiva del processo di rendering della pagina. Potete usare defer o async e ci sono plugin per WordPress che automatizzano questo processo.
  • Ritardare il caricamento di JavaScript fino all’interazione con l’utente: potete attendere completamente il caricamento di alcuni o tutti i JavaScript del vostro sito fino a quando l’utente non interagisce con la pagina (ad esempio, cliccando o scorrendo). Questa soluzione offre la migliore ottimizzazione delle prestazioni, ma potrebbe essere necessario escludere manualmente alcuni script per evitare di causare problemi.

Potete implementare una di queste tattiche su WordPress tramite plugin come WP Rocket o FlyingPress.

L'interfaccia del plugin WP Rocket che consente di ottimizzare completamente il codice JavaScript del sito.
Come ottimizzare JavaScript con WP Rocket.

Abbiamo anche delle guide su come rinviare il parsing di JavaScript e su come eliminare le risorse che bloccano il rendering.

Minificare il codice JavaScript

Infine, vorrete minificare il codice JavaScript rimanente del vostro sito per ottenere ulteriori piccoli vantaggi in termini di prestazioni grazie alla rimozione dei caratteri non necessari.

Come per la minificazione del CSS, la maggior parte dei plugin per la cache e le prestazioni (tra cui WP Rocket e FlyingPress) possono farlo per voi. Potete anche utilizzare un plugin mirato come Fast Velocity Minify.

7. Disabilitare il lazy loading per le immagini above-the-fold

Con il lazy loading delle immagini, potete ritardare il caricamento delle immagini del vostro sito fino a quando non sono necessarie (ad esempio, quando un utente scorre la pagina verso il basso).

Normalmente, questo è un aspetto positivo per le prestazioni se state caricando le immagini che si trovano under-the-fold con il lazy loading. Tuttavia, l’utilizzo del lazy loading per le immagini above-the-fold può influire negativamente sui tempi di FCP e LCP del vostro sito.

Per questo motivo, dovrete assicurarvi di escludere dal lazy loading le immagini above-the-fold.

Se state utilizzando la funzione di lazy loading di WordPress, quest’ultimo dovrebbe farlo automaticamente. Ma se riscontrate dei problemi, potete regolare manualmente questo comportamento utilizzando la funzione wp_omit_loading_attr_threshold.

Se utilizzate un plugin per il lazy loading, è probabile che il plugin vi offra un’opzione per farlo. Ad esempio, Perfmatters permette di escludere automaticamente un certo numero di immagini principali e di escludere manualmente immagini specifiche se necessario.

L'interfaccia del plugin Perfmatters che permette di escludere le immagini principali dal lazy loading.
Come escludere le immagini principali dal lazy loading in Perfmatters.

Se il vostro plugin non offre questa funzione, valutate di passare a uno che la offra.

8. Ottimizzare la distribuzione dei caratteri

Per garantire che i contenuti testuali siano visibili durante il caricamento (il che può influire sui tempi di FCP e sull’esperienza dell’utente), è importante ottimizzare anche il caricamento dei font se utilizzate font personalizzati (come quelli trovati su Google Fonts).

Per evitare problemi, potete utilizzare le opzioni Font-Display:Optional o Font-Display: Swap.

Con Font-Display: Optional, potete dire ai browser degli utenti di utilizzare un font di riserva se il font personalizzato non si carica abbastanza velocemente.

Se non volete aggiungere questa funzione utilizzando i vostri CSS, ci sono diversi plugin per WordPress che possono ottimizzare il caricamento dei font, come WP Rocket, FlyingPress e Perfmatters.

Come ottimizzare automaticamente i font utilizzando il plugin FlyingPress.
Come ottimizzare i font in FlyingPress.

9. Cercare di ridurre il più possibile le dimensioni del DOM

Secondo Mozilla, il Document Object Model (DOM) è “la rappresentazione dei dati degli oggetti che compongono la struttura e il contenuto di un documento sul web”.

Anche se i visitatori umani non interagiscono direttamente con il DOM, quest’ultimo è importante per aiutare i browser web a comprendere e visualizzare il contenuto di una pagina.

Come regola generale, un DOM più ampio e complesso comporta tempi di FCP più lenti rispetto a una struttura DOM più corta e ottimizzata.

Ecco alcuni consigli per ridurre le dimensioni del DOM del vostro sito:

  • Usare un tema WordPress ottimizzato per le prestazioni: su WordPress, il tema gioca un ruolo importante nella dimensione del DOM del vostro sito. Date un’occhiata ai nostri post con i temi WordPress più veloci e i temi WooCommerce più veloci.
  • Usare il blocco Interruzione di pagina: potete spezzare una pagina lunga usando il blocco Interruzione di pagina.
  • Ottimizzare la paginazione: potete utilizzare la paginazione in WordPress per suddividere le pagine che elencano i post del vostro blog (o altri tipi di post personalizzati).
  • Mostrare estratti: invece di mostrare il testo completo nelle pagine degli annunci, considerate la possibilità di mostrare un estratto.
  • Limitare o evitare l’uso di page builder “pesanti”: se da un lato i page builder visuali e drag-and-drop possono essere molto belli dal punto di vista del design, dall’altro possono anche aggiungere molta massa al DOM. Dal punto di vista delle prestazioni, è meglio che attenersi all’editor nativo. Potreste scoprire che il compromesso delle prestazioni di un visual builder vale la pena per la maggiore potenza di progettazione, e di solito va bene a patto che mettiate in pratica gli altri consigli.

10. Evitare i reindirizzamenti (soprattutto quelli multipli)

I reindirizzamenti permettono di inviare il traffico da un URL a un altro URL prima del caricamento della pagina. Ad esempio, potreste reindirizzare chi visita la versione HTTP del vostro sito alla versione HTTPS.

Tuttavia, poiché il reindirizzamento deve essere completato prima che il browser dell’utente possa caricare la pagina, ogni reindirizzamento aggiunge centinaia di millisecondi di ritardo al tempo FCP del vostro sito (e ad altre metriche di performance).

Ecco alcuni consigli per evitare i reindirizzamenti non necessari:

  • Aggiornare gli URL hardcoded se si passa da HTTP a HTTPS: se passate il vostro sito a HTTPS, dovreste aggiornare tutti gli URL nel database del vostro sito per utilizzare HTTPS invece di affidarvi ai reindirizzamenti.
  • Puntare gli URL alle versioni WWW o non-WWW corrette: assicuratevi che tutti i vostri URL utilizzino la versione corretta per evitare il reindirizzamento da WWW a non-WWW (o viceversa).
  • Correggere i link interni non funzionanti: aggiornate tutti i link interni non funzionanti invece di affidarvi ai reindirizzamenti per mandare gli utenti nel posto giusto.
  • Chiedete ad altri siti di correggere i link esterni non funzionanti (se ne vale la pena): se ricevete molto traffico da un link non funzionante da un sito di terzi, potete contattare il proprietario del sito e chiedergli di correggere il link invece di affidarsi ai reindirizzamenti.

Per individuare i problemi di reindirizzamento, potete utilizzare lo strumento gratuito Kinsta redirect checker. Abbiamo anche un post sulle best practice di reindirizzamento di WordPress.

Ad esempio, qui potete vedere che il redirect checker di Kinsta ha rilevato più redirect quando abbiamo inserito http://www.wordpress.org come URL:

  • Un reindirizzamento da HTTP a HTTPS.
  • Un secondo reindirizzamento da WWW a non-WWW.
Una pagina di risultati del redirect checker di Kinsta che mostra più reindirizzamenti.
Reindirizzamenti multipli rilevati dallo strumento di controllo dei redirect di Kinsta.

Se vedete reindirizzamenti multipli come questi, dovrete risolverli.

Riepilogo

Il First Contentful Paint è una metrica di performance incentrata sull’esperienza dell’utente che permette di vedere quanto tempo impiega il primo contenuto a diventare visibile su una pagina. È simile, ma leggermente diversa, da Largest Contentful Paint.

Se ottimizzate i tempi di First Contentful Paint del vostro sito, avrete l’effetto naturale di migliorare anche il tempo di Largest Contentful Paint e la maggior parte delle altre metriche di performance del vostro sito.

Per accelerarne i tempi, dovrete concentrarvi sull’ottimizzazione del codice del frontend del vostro sito e dei tempi di risposta del server.

Mettendo un sito con codice ottimizzato su un hosting WordPress veloce come Kinsta, dovreste essere in grado di portare i tempi di FCP del vostro sito ben al di sotto degli 1,8 secondi che Google considera “buoni”.

Jeremy Holcombe Kinsta

Content & Marketing Editor presso Kinsta, web developer di WordPress e content writer. Al di fuori di tutto ciò che riguarda WordPress, mi piacciono la spiaggia, il golf e il cinema. Ho anche i problemi di tutte le persone più alte della media ;).