Google Fonts su WordPress in modo più veloce

Google Fonts su WordPress in modo più veloce

Potresti aver notato che, dopo l’aggiunta di Google Fonts, il tempo di caricamento del tuo sito aumenta di circa 500 ms.

Se stai leggendo questo post, suppongo tu abbia già analizzato il tuo sito tramite Google PageSpeed Insights e hai ricevuto l’errore “Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web”

carica-google-fonts-su-wordpress-01

Ma perché i font di Google sono lenti?

Google ha diversi data center in tutto il mondo e questi font sono caricati dai loro CDN in modo super veloce, vicino alla tua posizione. Ma Google Fonts ha due problemi principali.

Problema 1: per ogni font, il tuo browser effettua 2 richieste HTTP

L’incorporamento di un singolo font può essere simile a questo:

Con questa stringa si chiede al browser di scaricare un file css che assomiglia a questo:

Ora il browser inizia a scaricare il nuovo font (file woff2)

Se osservi attentamente gli URL, uno è fonts.googleapis.com e l’altro è fonts.gstatic.com. Entrambi sono domini separati, il che significa che il browser deve effettuare due ricerche DNS.

Quindi se il tuo sito ha 2 font diversi, il tuo browser deve fare 4 richieste HTTP per 2 domini! Si noti inoltre che queste richieste non sono in parallelo.

Problema 2: il testo rimane nascosto fino al caricamento di Google Fonts

Come abbiamo visto sopra, invece di scaricare direttamente i font, Google scarica i file CSS. Quindi non abbiamo nessun controllo sul “flash-of-invisible-text” (FOIT) e sul “flash-of-unstyled-text” (FOUT).

Questo è il motivo per cui vengono rilevati degli errori in Google PageSpeed Insights tipo “Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web. Usa la funzione CSS font-display per assicurarti che il testo sia visibile agli utenti durante il caricamento dei caratteri web”.

È solo una riga di codice ma, per impostazione predefinita, il font Google non ci consente di modificarlo.

Come sistemarlo? Carica Google Fonts più veloce in WordPress

La soluzione è utilizzare uno script personalizzato che imposta il caricamento di Google Fonts in modo asincrono. Segui questi passi:

Trova i tuoi font Google esistenti aprendo il tuo sito -> fai clic con il pulsante destro del mouse -> “Visualizza sorgente pagina” e cerca “fonts.googleapis.com”. Copia l’URL completo. Assomiglierà alla seguente stringa:

Incolla l’URL precedente in https://googlefonts.3perf.com/ e copia il codice generato.

Aggiungi il codice generato al tuodi WordPress modificando header.php o utilizzando un plugin come Simple Custom CSS e JS.

Rimuovi i font Google esistenti. Altrimenti, non ci sarà alcun cambiamento!

Se stai utilizzando un plugin come Autoptimize, vai sulle impostazioni, “Extra”, seleziona “Rimuovi Google Fonts”.

Oppure puoi utilizzare un plugin come Disable Google Fonts.

Ora ricontrolla il tuo Google PageSpeed Insights!

Se ti serve un supporto professionale, contattaci per un preventivo https://bit.ly/2YuHjrJ

Riepilogo
Carica Google Fonts su WordPress in modo più veloce
Titolo Articolo
Carica Google Fonts su WordPress in modo più veloce
Descrizione
Google ha diversi data center in tutto il mondo e questi font sono caricati dai loro CDN in modo super veloce. Ma Google Fonts ha due problemi principali.
Autore
Nome Editore
Impesud
Logo Editore

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.