Come risolvere l'errore "Assicurati che il testo rimanga visibile durante il caricamento del font web" in PageSpeed

Ricevi l'errore " Assicurati che il testo rimanga visibile durante il caricamento di Webfont " mentre controlli le informazioni sulla velocità della pagina di Google e non sai come risolvere questo problema? In generale, so come risolvere questo problema su un sito Web personalizzato basato su PHP o HTML, ma anche quando si tratta di WordPress ho avuto difficoltà.

Quindi, qui in questa guida, parleremo di come possiamo risolvere questo problema in WordPress (condividerò anche i passaggi per risolvere questo problema nei siti personalizzati basati su PHP e HTML) e aumentare il punteggio di velocità della tua pagina rimuovendo questo errore.

Perché mostra "Assicurati che il testo rimanga visibile durante il caricamento di Webfont" Errore in PageSpeed

Dopo aver testato il tuo sito Web su PageSpeed ​​Insight di Google, potresti aver riscontrato un problema con l'errore "Assicurati che il testo rimanga visibile durante il caricamento del font Web" e, facendo clic sull'errore, verranno visualizzati gli URL completi dei file dei caratteri.

Come puoi vedere nell'immagine sopra, ricevo anche l'errore "assicurati che il testo rimanga visibile durante il caricamento di Webfont" su questo sito Web e quando faccio clic su di esso, mostrerà gli URL completi dei file di Google Font.

Perché mostra un errore?

Quando un sito Web viene caricato nel browser e rileva qualsiasi file di carattere personalizzato applicato a un testo, attende il download del carattere e fino a quel momento il testo è invisibile. Una volta scaricati i file dei font personalizzati, si applica immediatamente al sito Web e questo è noto come il flash del testo invisibile.

Come risolvere il flash di testo invisibile?

La correzione del flash del testo invisibile può anche correggere l'errore "assicurati che il testo rimanga visibile durante il caricamento di Webfont" sul tuo sito Web e risolvere questo problema è molto semplice.

Puoi facilmente risolvere questo problema aggiungendo

 visualizzazione dei caratteri: scambio;

codice nella tua corrente

 @font-face {

}

proprietà CSS.

Ma cos'è @font-face?

Un @font-face è una semplice regola CSS attraverso la quale puoi applicare un carattere personalizzato a un testo. Ha estensioni come woff2, woff, ttf, ecc. Ad esempio, un codice @font-face sarà simile a questo:

 @font-face {

famiglia di caratteri: Roboto,sans-serif;

visualizzazione dei caratteri: scambio; // ---> Risolverà questo problema.

stile del carattere: normale;

peso del carattere: 400;

src: url(Roboto.woff2);

}

Ora applichiamo questo font in un paragrafo usando;

 p {

famiglia di caratteri: Roboto, sans-serif;

dimensione del carattere: 18px;

}

Quando un sito Web viene caricato, indica che al tag di paragrafo è applicato un carattere " Roboto " e inizia immediatamente a scaricare il carattere utilizzato in un tag di paragrafo. Fino a quando non scarica il carattere, il testo rimane invisibile.

Questo è il motivo per cui mostra l'errore " assicurati che il testo rimanga visibile durante il caricamento del font web" nella velocità della pagina e nell'aggiunta di font-display: swap; nel tuo attuale @font-face CSS può risolvere questo problema.

Come risolvere questo problema in WordPress

Se stai utilizzando WordPress e mostra questo errore nelle informazioni sulla velocità della pagina, puoi risolvere facilmente questo problema usando semplici passaggi. Ho condiviso i passaggi per risolvere questo errore sia sui caratteri locali che sui caratteri Google.

Soluzione per i caratteri di Google

Inizialmente, Google Fonts non aggiungerà il font-display: swap; regola al loro font, ma ora supportano un nuovo parametro di query per applicare il font-display: swap; aggiungendo il parametro &display=swap alla fine del file dei caratteri di Google.

Ecco come appare;

Se sei uno sviluppatore di temi o sai come modificare i file dei temi in WordPress, puoi facilmente aggiungere il parametro &display=swap nel tuo file di font di Google.

Ma se non ti senti a tuo agio con la modifica dei file del tema di WordPress, puoi comunque utilizzare vari plugin come Asset CleanUp per aggiungere questo parametro e risolvere il problema "assicurati che il testo rimanga visibile durante il caricamento di Webfont".

Come risolvere questo problema utilizzando il plug-in "Asset CleanUp".

Per applicare il parametro display=swap nel tuo file Google Fonts, devi scaricare e installare il plug-in Asset CleanUp dalla libreria di WordPress, che è disponibile gratuitamente.

Una volta scaricato e attivato il plug-in, fai clic sull'opzione " Asset CleanUp " nel tuo pannello di amministrazione di WordPress > e quindi fai clic su " impostazioni " in "Asset Cleanup" per aprire la pagina di ottimizzazione.

Una volta che sei nella pagina delle impostazioni , fai clic sull'opzione " Caratteri Google ". Quando fai clic sull'opzione Google Fonts , si apriranno ulteriormente le impostazioni da cui puoi facilmente gestire varie impostazioni per ottimizzare i file dei font di Google.

Alcune di queste impostazioni possono includere;

Una volta che sei nelle impostazioni dei file dei caratteri di Google, nelle impostazioni " Applica font-display: CSS property value " e modificalo da " Non applicare (impostazione predefinita) " a " scambia (più usato) " e aggiungerà il &display= scambia il parametro con tutti i tuoi file di font di Google.

Soluzione per i font di temi e plugin

Il più delle volte il tuo tema o plug-in WordPress carica altri font come font-awesome o icon font e mostra lo stesso problema anche in Google PageSpeed ​​Insight.

Anche questa è una soluzione facile, ma richiede un po' di conoscenza della modifica di WordPress. Se non ti senti a tuo agio con la modifica dei codici, puoi anche utilizzare la versione premium del plug-in " Asset CleanUp Pro " per aggiungere automaticamente il font-display: swap; CSS nel tuo tema WordPress o nei fogli di stile dei plugin.

Per risolvere questo problema utilizzando Asset CleanUp Pro, fare clic sull'opzione " Asset CleanUp " nel pannello di amministrazione di WordPress > e quindi fare clic su " impostazioni " in "Asset Cleanup" per aprire la pagina di ottimizzazione.

Una volta che sei nella pagina " Pulizia risorse " > " Impostazioni ", fai clic sull'opzione " Caratteri locali " per aprire le impostazioni di personalizzazione per i caratteri locali.

Una volta che le impostazioni di personalizzazione di " Caratteri locali " sono state aperte nel tuo browser, seleziona " scambia (più usato) " dall'opzione di selezione fornita sotto " Applica font-display: valore della proprietà CSS " per aggiungere automaticamente font-display: swap; in tutti i tuoi fogli di stile.

Avvolgendo

In questa guida, abbiamo fatto del nostro meglio per spiegare come risolvere il problema "assicurati che il testo rimanga visibile durante il caricamento del font web" o "flash di testo invisibile" su pagespeed insight.

Il tempo di caricamento della pagina e la velocità della pagina sono fattori importanti per offrire una buona esperienza utente e la risoluzione di questo problema può fornire un'esperienza utente molto migliore. E una pagina non è da considerarsi caricata a meno che non mostri ogni singola cosa su di essa.

Pertanto, è necessario ridurre il tempo di caricamento del contenuto sulla pagina in modo che le pagine non scadano e gli utenti possano ottenere l'equilibrio, la velocità e la stabilità desiderati. Se anche tu soffri di una velocità del sito web lenta, puoi controllare il nostro post sull'ottimizzazione della velocità del sito web per ottimizzarlo correttamente.