Google fonts – Come uccidere la pagespeed di un sito

Google fonts
Google fonts - I nemici della velocità

Google fonts – I nemici della velocità

Più volte abbiamo visto l’importanza della user experience nella riuscita di un sito. Google Fonts nasce con questo scopo: migliorare l’esperienza del lettore.

Google Fonts costituisce, senza ombra di dubbio, il miglior modo per utilizzare sul tuo sito dei caratteri non standard. I font web sono fondamentali per il design, il branding, la leggibilità e l’accessibilità al tuo sito. Ciascun font è open-source e ottimizzato per la visualizzazione su differenti browser, garantendo alla tipografia del tuo sito il classico effetto WOW e bla bla bla.

Questo è quello che trovi in Internet se chiedi “cosa sono i Google Fonts?”.
La realtà, invece, è che se stai ottimizzando la pagespeed, ricorda che il caricamento dei Google Fonts rallenta il tuo sito uccidendone la SEO.

Indice dell’articolo

Perché evitare i fonts di Google

Con i web fonts, chi si collega al tuo sito, per visualizzare i testi, deve richiamare un CSS esterno che si trova su un altro server che, a sua volta, richiama i file del font. Questa serie di caricamenti esterni finisce, inevitabilmente, per rallentare il sito.

Considerando che a fare da zavorra ci pensano già abbastanza immagini, script e HTML, avere richieste elevate anche per caricare i fonts è una cosa da folli.

Google Fonts – Caso pratico

Quelli che vedi ora, sono 2 screenshot dei risultati registrati da Pingdom Tools.
Il primo articolo, realizzato utilizzando Google Fonts, pur essendo “leggero”, conta ben 23 richieste di cui 9 riconducibili proprio ai fonts: il 40% del totale.

pingdomLa seconda immagine mostra i risultati di una pagina che non utilizza i fonts di Google. Nonostante il “peso” sia di 1.2 MB, le richieste sono 18 ed una soltanto deriva dai font che incidono per il 5%.
pingdom

Personalmente ritengo folle inserire in un sito qualcosa che migliori la user experience ma che rallenti il sito… andando a scapito della user experience!!

Se, nonostante quanto hai appena letto, sei ancora intenzionato ad utilizzare i fonts messi a disposizione da Big G ma non sai come fare, leggi qui sotto.

Come inserisco i Google Fonts in WordPress?

Se usi un tema premium di ultima generazione, è molto probabile che i fonts di Google siano già inclusi. Prima di installare un plugin WordPress, quindi, controlla se questa funzione è già disponibile nel pannello di configurazione del tema che stai utilizzando.
fonts settings

Se non hai nulla di tutto ciò, esistono numerosi plugin per implementare i Google Fonts.
Nella colonna sinistra del pannello di amministrazione WordPress, ferma il cursore del mouse su “Plugin” e clicca su “Aggiungi nuovo”. Cerca, installa e attiva “Easy Google Fonts”.
plugin easy google fonts

Una volta attivato, porta il mouse su “Aspetto”, nella colonna sinistra del pannello di amministrazione WordPress e clicca su “Personalizza”.
Qui puoi notare la nuova voce “Typography” che ti permetterà di personalizzare i fonts a tuo piacimento.

Ogni volta che spunti una famiglia di font da utilizzare, si sbloccano tutte le opzioni disponibili per il carattere selezionato.

Inserire i web fonts manualmente

Se, come me, non vuoi utilizzare un plugin, sappi che i font di Google possono essere aggiunti anche manualmente. Vai sul sito dedicato ai web fonts e seleziona i caratteri che desideri utilizzare nei tuoi articoli.

Cliccando su “Select this font” (il “+” nel pallino rosso che trovi in alto a destra di ogni carattere), selezioni la “family”. A questo punto non ti resta che scegliere con quale sistema utilizzare il font: “STANDARD” oppure “@IMPORT”.

Dove inserisco i Google Fonts?

Se scegli il metodo standard, devi copiare e incollare il codice del tag <link> nell’header della tua pagina ed usare il CSS indicato in basso per applicare la regola agli elementi HTML.

Se utilizzi @import, copia e incolla il tag <style> sempre nella <head> e applica il CSS come sopra.

Come carico i Google Fonts in maniera asincrona?

Un altro problema ricorrente, oltre all’aumento delle richieste, è dato dal caricamento delle informazioni della pagina prima dei fonts. Il flash of invisible text (FOIT), rende invisibile il testo fino alla fine del caricamento dell’informazione richiesta. Il metodo più semplice per risolvere i problemi di blocco nel render della pagina è caricare in maniera asincrona i Google Fonts.

Google Fonts ed Autoptimize

Se, come spero, hai seguito i miei consigli ed utilizzi il plugin WordPress Autoptimize, ti basterà andare nella colonna sinistra del pannello di amministrazione WordPress e cliccare su “Impostazioni”, “Autoptimize”.
Nel menù, seleziona la scheda “Extra” e sperimenta i vari settaggi finché non trovi la soluzione migliore per il tuo sito.
autoptimizeAltrimenti fai come me: “Rimuovi i Google Font” e passa la paura!!

Conclusione

In questo articolo abbiamo visto come i web fonts, creati per migliorare la user experience, possono rallentare il sito in maniera importante, con effetti devastanti sulla SEO e sull’esperienza dell’utente.

L’occhio vuole la sua parte, è vero, però tieni sempre a mente che la velocità è uno degli elementi più importanti in ottica SEO.
Insomma, come sempre, valuta se il gioco vale la candela e, come sempre, non prendere per oro colato ciò che leggi ma fai dei test sul tuo sito.

Se qualche passaggio di questo articolo non ti è chiaro o se hai suggerimenti, lascia un commento nell’apposito box che trovi qui sotto che, con molta fantasia, ho chiamato “LASCIA UN COMMENTO”.

LASCIA UN COMMENTO

Per favore inserisci il tuo commento!
Per favore inserisci il tuo nome qui