Ottimizzazione delle prestazioni dei caratteri di Google

Pubblicato: 2022-03-10

Riepilogo rapido ↬ I font di Google sono facili da implementare, ma possono avere un grande impatto sui tempi di caricamento della tua pagina. Esploriamo come possiamo caricarli nel modo più ottimale.

È giusto dire che i caratteri di Google sono popolari. Al momento della stesura, sono stati visualizzati oltre 29 trilioni di volte sul Web ed è facile capire perché: la raccolta ti dà accesso a oltre 900 bellissimi caratteri che puoi utilizzare gratuitamente sul tuo sito Web. Senza Google Fonts saresti limitato alla manciata di "caratteri di sistema" installati sul dispositivo del tuo utente.

I caratteri di sistema o "Caratteri Web Safe" sono i caratteri più comunemente preinstallati su tutti i sistemi operativi. Ad esempio, Arial e Georgia sono confezionati con distribuzioni Windows, macOS e Linux.

Come tutte le cose buone, Google Fonts ha un costo. Ogni carattere ha un peso che il browser web deve scaricare prima di poter essere visualizzato. Con la configurazione corretta, il tempo di caricamento aggiuntivo non è evidente. Tuttavia, se sbagli, i tuoi utenti potrebbero attendere fino a pochi secondi prima che venga visualizzato del testo.

I caratteri di Google sono già ottimizzati

L'API di Google Fonts non si limita a fornire i file dei caratteri al browser, ma esegue anche un controllo intelligente per vedere come può fornire i file nel formato più ottimizzato.

Diamo un'occhiata a Roboto, GitHub ci dice che la variante normale pesa 168kb.

Roboto Regular ha una dimensione del file di 168kb — 168kb per una singola variante di carattere. (Grande anteprima)

Tuttavia, se richiedo la stessa variante di carattere dall'API, mi viene fornito questo file. Che è solo 11kb. Come può essere?

Quando il browser effettua una richiesta all'API, Google verifica prima i tipi di file supportati dal browser. Sto usando l'ultima versione di Chrome, che come la maggior parte dei browser supporta WOFF2, quindi il carattere mi viene servito in quel formato altamente compresso.

Se cambio il mio user-agent in Internet Explorer 11, mi viene invece servito il carattere nel formato WOFF.

Infine, se cambio il mio programma utente in IE8, ottengo il carattere nel formato EOT (Embedded OpenType).

Google Fonts mantiene oltre 30 varianti ottimizzate per ogni font e rileva e fornisce automaticamente la variante ottimale per ogni piattaforma e browser.

— Ilya Grigorik, Ottimizzazione dei caratteri Web

Questa è un'ottima funzionalità di Google Fonts, controllando lo user-agent che sono in grado di offrire i formati più performanti ai browser che li supportano, pur continuando a visualizzare i caratteri in modo coerente sui browser meno recenti.

Altro dopo il salto! Continua a leggere sotto ↓

Memorizzazione nella cache del browser

Un'altra ottimizzazione integrata di Google Fonts è la memorizzazione nella cache del browser.

A causa della natura onnipresente di Google Fonts, il browser non ha sempre bisogno di scaricare i file di font completi. SmashingMagazine, ad esempio, utilizza un font chiamato 'Mija', se è la prima volta che il tuo browser vede quel font, dovrà scaricarlo completamente prima che il testo venga visualizzato, ma la prossima volta che visiti un sito web utilizza quel font , il browser utilizzerà la versione memorizzata nella cache.

Man mano che l'API di Google Fonts diventa più ampiamente utilizzata, è probabile che i visitatori del tuo sito o della tua pagina abbiano già tutti i caratteri Google utilizzati nel tuo design nella cache del browser.

— Domande frequenti, Google Fonts

La cache del browser Google Fonts scade dopo un anno, a meno che la cache non venga svuotata prima.

Nota: Mija non è un font di Google, ma i principi della memorizzazione nella cache non sono specifici del fornitore.

È possibile un'ulteriore ottimizzazione

Sebbene Google investa grandi sforzi nell'ottimizzazione della consegna dei file dei caratteri, ci sono ancora ottimizzazioni che puoi apportare nella tua implementazione per ridurre l'impatto sui tempi di caricamento della pagina.

1. Limita le famiglie di caratteri

L'ottimizzazione più semplice consiste nell'utilizzare semplicemente un minor numero di famiglie di caratteri. Ogni carattere può aggiungere fino a 400 kb al peso della tua pagina, moltiplicarlo per alcune famiglie di caratteri diverse e improvvisamente i tuoi caratteri pesano più dell'intera pagina.

Consiglio di utilizzare non più di due caratteri, uno per i titoli e un altro per il contenuto è generalmente sufficiente. Con l'uso corretto di dimensione del carattere, peso e colore puoi ottenere un aspetto fantastico anche con un solo carattere.

Esempio che mostra tre pesi di una singola famiglia di caratteri (Source Sans Pro) — Tre pesi di una singola famiglia di caratteri (Source Sans Pro). (Grande anteprima)

2. Escludi varianti

A causa dell'elevato standard di qualità di Google Fonts, molte famiglie di caratteri contengono l'intera gamma di pesi dei caratteri disponibili:

Sottile (100)
Corsivo sottile (100i)
Luce (300)
Corsivo chiaro (300i)
Regolare (400)
Corsivo regolare (400i)
Medio (600)
Corsivo medio (600i)
Grassetto (700)
Corsivo grassetto (700i)
Nero (800)
Corsivo nero (800i)

È ottimo per casi d'uso avanzati che potrebbero richiedere tutte le 12 varianti, ma per un sito Web normale significa scaricare tutte le 12 varianti quando potresti aver bisogno solo di 3 o 4.

Ad esempio, la famiglia di caratteri Roboto pesa circa 144 kb. Se tuttavia utilizzi solo le varianti Regular, Regular Italic e Bold, quel numero scende a ~36kb. Un risparmio del 75%!

Il codice predefinito per l'implementazione di Google Fonts è simile al seguente:

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Se lo fai, caricherà solo la variante "400 regolare". Ciò significa che tutto il testo chiaro, in grassetto e in corsivo non verrà visualizzato correttamente.

Per caricare invece tutte le varianti di font, dobbiamo specificare i pesi nell'URL in questo modo:

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

È raro che un sito Web utilizzi tutte le varianti di un font da Thin (100) a Black (900), la strategia ottimale è specificare solo i pesi che prevedi di utilizzare:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

Ciò è particolarmente importante quando si utilizzano più famiglie di caratteri. Ad esempio, se stai usando Lato per i titoli, ha senso richiedere solo la variante grassetto (e possibilmente corsivo grassetto):

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. Combina le richieste

Lo snippet di codice con cui abbiamo lavorato sopra effettua una chiamata ai server di Google ( fonts.googleapis.com ), chiamata richiesta HTTP. In generale, più richieste HTTP devono effettuare la tua pagina web, più tempo impiegherà a caricarsi.

Se volessi caricare due font, potresti fare qualcosa del genere:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Funzionerebbe, ma comporterebbe due richieste da parte del browser. Possiamo ottimizzarlo combinandoli in un'unica richiesta come questa:

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

Non c'è limite al numero di font e varianti che può contenere una singola richiesta.

4. Suggerimenti per le risorse

I suggerimenti sulle risorse sono una funzionalità supportata dai browser moderni che possono aumentare le prestazioni del sito Web. Daremo un'occhiata a due tipi di suggerimenti per le risorse: "Prelettura DNS" e "Preconnessione".

Nota: se un browser non supporta una funzionalità moderna, la ignorerà semplicemente. Quindi la tua pagina web verrà comunque caricata normalmente.

Prelettura DNS

Il precaricamento DNS consente al browser di avviare la connessione all'API Fonts di Google ( fonts.googleapis.com ) non appena la pagina inizia a caricarsi. Ciò significa che quando il browser è pronto per effettuare una richiesta, parte del lavoro è già terminato.

Per implementare il precaricamento DNS per Google Fonts, aggiungi semplicemente questo one-liner alle tue pagine web <head> :

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

Preconnessione

Se guardi il codice di incorporamento di Google Fonts, sembra essere una singola richiesta HTTP:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

Tuttavia, se visitiamo quell'URL, possiamo vedere che ci sono altre tre richieste a un URL diverso, https://fonts.gstatic.com. Una richiesta aggiuntiva per ogni variante di carattere.

Codice sorgente di una richiesta di Google Fonts — (Visualizza sorgente) (Anteprima grande)

Il problema con queste richieste aggiuntive è che il browser non avvierà i processi per eseguirle fino al completamento della prima richiesta a https://fonts.googleapis.com/css . È qui che entra in gioco Preconnect.

Preconnect potrebbe essere descritto come una versione avanzata di prefetch. È impostato sull'URL specifico che il browser caricherà. Invece di eseguire solo una ricerca DNS, completa anche la negoziazione TLS e l'handshake TCP.

Proprio come il prelettura DNS, può essere implementato con una riga di codice:

 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

La semplice aggiunta di questa riga di codice può ridurre il tempo di caricamento della pagina di 100 ms. Ciò è possibile avviando la connessione insieme alla richiesta iniziale, anziché attendere che venga completata prima.

5. Ospita i caratteri in locale

I Google Fonts sono concessi in licenza con una licenza "Libre" o "software gratuito", che ti dà la libertà di utilizzare, modificare e distribuire i caratteri senza richiedere l'autorizzazione. Ciò significa che non è necessario utilizzare l'hosting di Google se non lo desideri: puoi ospitare autonomamente i caratteri!

Tutti i file dei caratteri sono disponibili su Github. È inoltre disponibile un file zip contenente tutti i caratteri (387 MB).

Infine, c'è un servizio di supporto che ti consente di scegliere quali caratteri desideri utilizzare, quindi fornisce i file e i CSS necessari per farlo.

C'è uno svantaggio nell'ospitare i font in locale. Quando scarichi i caratteri, li salvi come sono in quel momento. Se vengono migliorati o aggiornati, non riceverai tali modifiche. In confronto, quando richiedi i caratteri dall'API di Google Fonts, ti viene sempre offerta la versione più aggiornata.

Richiesta API di Google Fonts che mostra una data dell'ultima modifica — Richiesta API di Google Fonts. (Grande anteprima)

Nota il parametro lastModified nell'API. I caratteri vengono regolarmente modificati e migliorati.

6. Visualizzazione dei caratteri

Sappiamo che ci vuole tempo prima che il browser scarichi Google Fonts, ma cosa succede al testo prima che sia pronto? Per molto tempo, il browser mostrerebbe uno spazio vuoto dove dovrebbe trovarsi il testo, noto anche come "FOIT" (Flash of Invisible Text).

Letture consigliate : “FOUT, FOIT, FOFT” di Chris Coyier

Non mostrare nulla può essere un'esperienza stridente per l'utente finale, un'esperienza migliore sarebbe mostrare inizialmente un font di sistema come fallback e quindi "scambiare" i font una volta che sono pronti. Ciò è possibile utilizzando la proprietà CSS font-display .

Aggiungendo font-display: swap; alla dichiarazione @font-face, diciamo al browser di mostrare il font di fallback fino a quando Google Font non sarà disponibile.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

Nel 2019 Google ha annunciato che avrebbe aggiunto il supporto per la visualizzazione dei caratteri: swap. Puoi iniziare subito a implementarlo aggiungendo un parametro aggiuntivo all'URL dei caratteri:

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. Utilizzare il parametro di `Text`

Una caratteristica poco nota dell'API di Google Fonts è il parametro di text . Questo parametro utilizzato raramente ti consente di caricare solo i caratteri di cui hai bisogno.

Ad esempio, se si dispone di un logo di testo che deve essere un carattere univoco, è possibile utilizzare il parametro di text per caricare solo i caratteri utilizzati nel logo.

Funziona così:

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

Ovviamente, questa tecnica è molto specifica e ha solo poche applicazioni realistiche. Tuttavia, se puoi usarlo, può ridurre il peso del carattere fino al 90%.

Nota: quando si utilizza il parametro di text , per impostazione predefinita viene caricato solo lo spessore del carattere "normale". Per utilizzare un altro peso è necessario specificarlo esplicitamente nell'URL.

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

Avvolgendo

Con una stima del 53% dei primi 1 milione di siti Web che utilizzano Google Fonts, l'implementazione di queste ottimizzazioni può avere un impatto enorme.

Quanti dei precedenti hai provato? Fatemi sapere nella sezione dedicata ai commenti.