Ottimizzazione delle prestazioni dei caratteri di Google

I buoni design del sito Web sono abbelliti da immagini e caratteri straordinari. Sfortunatamente, questi due elementi web contribuiscono pesantemente ai motivi per cui molti siti web mostrano una latenza fastidiosa. Naturalmente, solo i caratteri web possono offrire qualcosa di rinfrescante, inaspettato e nuovo.

Tuttavia, ci sono modi per contenere questo orribile fenomeno. SVG sta aiutando gli sviluppatori a gestire alcune delle sfide del rendering delle immagini. E per Google Fonts, che è il font web più utilizzato, migliorare il tempo di rendering di una pagina significa semplicemente implementare i numerosi trucchi disponibili per ottimizzare le prestazioni di Google Font.

Cosa sono i caratteri Google?

I caratteri di Google sono raccolte appositamente sintonizzate di glifi che costituiscono i caratteri da utilizzare sui siti Web. Sono specificamente progettati per essere utilizzati su Internet, da cui il nome dei caratteri web.

Lanciato come Google Web Fonts nel 2010 con solo circa 30 caratteri, Google Fonts ora ha circa 17 miliardi di caratteri e attualmente alimenta circa il 57% di tutti i siti Web. Google Fonts, che è completamente gratuito, registra circa 500.000 visualizzazioni al secondo al momento della stesura di questo articolo e ha accumulato oltre 37 trilioni di visualizzazioni dal 2010.

L'uso dei caratteri di Google sul tuo sito Web ti consente di evitare di essere limitato ai caratteri di sistema o ai "caratteri sicuri per il Web", come Arial e Georgia, che sono per lo più preinstallati su tutti i sistemi operativi.

Come implementare i caratteri Google

L'implementazione di Google Fonts su un sito Web viene eseguita utilizzando l'interfaccia di programmazione dell'applicazione (API), facendo riferimento alla scelta dei caratteri dell'utente. Questa API offerta da Google potrebbe essere incorporata nel tuo documento HTML utilizzando il tag di collegamento CSS standard o la sintassi per l'importazione. Di seguito è riportato un esempio delle API per l'implementazione di Baloo Chettan 2.

Utilizzando il tag di collegamento CSS standard

Usando la sintassi di importazione
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>

Con una qualsiasi delle API di cui sopra nel tuo documento HTML, puoi utilizzare la famiglia di caratteri nel tuo documento CSS facendo riferimento ad essa, come mostrato nell'esempio seguente.

font-family : 'Baloo Chettan 2', corsivo;

Importanza dell'ottimizzazione delle prestazioni di Google Font

L'implementazione e l'utilizzo di Google Fonts, come altri font web, non sono un grosso problema, ma fornire i font ai visitatori del tuo sito web. Ricorda, gli utenti non hanno questi caratteri sui loro dispositivi. In altre parole, i loro browser devono scaricarli prima che possano vedere il contenuto del tuo sito web.

Peso del carattere

Ogni carattere ha un peso destinato a influenzare negativamente la latenza del tuo sito web. Ad esempio, il font Baloo Chettan 2 di Google ha una dimensione totale di 720 KB. Ciò significa che devi considerare circa 9 MB nel caricamento del tuo sito Web se devi utilizzare l'intera famiglia di caratteri Baloo (19), con tutte le lingue e le varianti disponibili sul tuo sito Web. Naturalmente, questo è l'ideale e non è niente di simile all'ottimizzazione dei caratteri web. Tuttavia, sbagliare significa far aspettare i visitatori del tuo sito web per alcuni secondi prima che possano vedere qualsiasi testo sul tuo sito web.

Formato del carattere

Sfortunatamente, nessuno di questi formati è considerato un formato universale che funziona su tutti i browser.

EOT è supportato solo da IE. Chrome e Opera hanno il maggior supporto per la maggior parte dei formati, mentre circa l'86% di tutti i browser supporta il formato WOFF. Ciò potrebbe richiedere di includere tutti i formati di carattere per ogni carattere che desideri utilizzare. L'idea è di fornire un'esperienza coerente assicurando che tutti i browser possano visualizzare ogni tipo di carattere.

Questi problemi fanno parte dei molti motivi per cui è fondamentale ottimizzare le prestazioni dei caratteri di Google.

Ottimizzazione delle prestazioni di Google Font

L'ottimizzazione dei caratteri di Google inizia con il posizionamento dell'API dei caratteri e il formato della richiesta, fino al rendering. Ecco dei semplici trucchi su come ottimizzare i caratteri di Google.

Precarica le risorse di Google Font

Si consiglia vivamente di utilizzare la nuova funzionalità della piattaforma Web: <link rel="preload"> che consente di caricare i caratteri Web in anticipo. Questa funzione consente di ignorare il comportamento predefinito del browser, che di solito ritarda il rendering del testo costruendo prima l'albero di rendering per sapere quali risorse di font sono necessarie prima di accedere al collegamento alla risorsa.

<link rel="preload"> è solitamente incluso nel tag <head> del tuo HTML per attivare una richiesta per i tuoi caratteri abbastanza presto, senza attendere la creazione del CSSOM. La funzione fornisce al browser solo una pre-informazione che i tuoi caratteri web sarebbero presto necessari, senza fornire alcuna informazione su come verrebbero utilizzati.

Inoltre, si consiglia di utilizzare una definizione CSS @font-face adatta insieme alla funzione di precaricamento per informare il browser su come utilizzare l'URL della risorsa. Vedi un esempio nel punto successivo.

Usa una richiesta per più font

Un'altra buona misura per l'ottimizzazione dei caratteri di Google è combinare più richieste di caratteri in un unico tag. Non includere un tag <link> separato per ogni font, inviando così più richieste in batch diversi. Per combinare le richieste di font, separa semplicemente i font nell'API con il | carattere. Tuttavia, ciò può essere ottenuto anche semplicemente selezionando tutti i caratteri di cui avresti bisogno contemporaneamente nella pagina dei caratteri di Google.

Formato delle richieste di carattere errato:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">

Formato consigliato per le richieste di caratteri:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"

rel="stylesheet">

Combinando più richieste di font in un unico tag, salviamo il browser da diversi viaggi al server e aiutiamo anche i browser più vecchi con un massimo di 2 connessioni alla volta per dominio.

Formati dei caratteri ottimizzati per tutti i browser

I browser senza supporto per un formato di carattere specifico lo ignorano e passano al passaggio successivo dell'albero di rendering. E per fornire un'esperienza coerente, devi includere tutti i formati di font nella tua dichiarazione CSS @font-face.

Tuttavia, il peso potrebbe essere ridotto. I singoli grafici che descrivono un font sono costituiti da informazioni simili che possono essere compresse utilizzando un compressore compatibile come GZIP. Sebbene i formati TTF ed EOT siano compressi per impostazione predefinita, è necessario assicurarsi che i server siano configurati per applicare la compressione durante la distribuzione di entrambi i formati di carattere.

Utilizza l'impostazione di compressione ottimale per WOFF, che ha una compressione incorporata e ricorre ad algoritmi di preelaborazione e compressione personalizzati per fornire WOFF2 con una riduzione della dimensione del file del 30% circa.

Esempio di dichiarazione CSS @font-face
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */


Dai la precedenza a local() nella tua lista src

Sebbene questa idea di ottimizzazione dei caratteri di Google potrebbe non essere applicabile agli utenti di telefoni cellulari a meno che non si faccia riferimento ai caratteri di sistema predefiniti, rimane un trucco efficace per l'ottimizzazione dei caratteri Web.

Se guardi l'esempio di dichiarazione CSS @font-face sopra, noterai che local() è in cima all'elenco di varianti di risorse separate da virgole nel descrittore src:. Questa definizione delle priorità è intenzionale e l'idea è di inviare localmente il browser dell'utente alla prima fonte per il carattere prima di scegliere di scaricarli se non è disponibile localmente.

Ciò garantisce che il browser non scarichi i font già installati localmente sul computer dell'utente, garantendo così una migliore performance del sito web.

Personalizza il rendering dei caratteri: visualizzazione dei caratteri CSS

Il controllo delle prestazioni dei caratteri con il descrittore di visualizzazione dei caratteri per @font-face ti consente di decidere come visualizzare i tuoi caratteri Google, in base al tempo necessario per il download. In origine, i browser Web hanno impostazioni predefinite su cosa fare quando i caratteri impiegano troppo tempo per essere caricati. La maggior parte di loro imposta un timeout dopo il quale usa il font di fallback, ma sfortunatamente il loro periodo di timeout è diverso.

La proprietà di visualizzazione dei caratteri appena introdotta attualmente supporta cinque intervalli di valori: auto | blocco | scambiare | ripiego | opzionale

Dovresti impostare la proprietà per bloccare il valore se il rendering del testo in un particolare carattere tipografico è molto importante. Questo perché consente al browser di utilizzare testo invincibile al posto del carattere preferito quando non sono pronti e li scambia non appena terminano il download. La maggior parte dei browser utilizza questo valore come valore predefinito ( auto ).

Lo scambio potrebbe essere utilizzato nei casi in cui puoi permetterti di eseguire il rendering di un carattere temporaneo fino a quando il carattere preferito non è pronto. Swap è simile a block ma esegue il rendering del font di fallback immediatamente che la pagina inizia a caricarsi e li sostituirà con il carattere tipografico preferito non appena saranno pronti. Questo valore ha un periodo di scambio infinito e un periodo di blocco di zero secondi.

Il valore di scambio non è l'ideale per il corpo del testo in modo da non interrompere l'esperienza del lettore a metà spostando il testo. Puoi usarlo per il testo del logo in cui è necessario visualizzare rapidamente il nome o lo slogan dell'azienda utilizzando un fallback, ma alla fine è necessario il carattere tipografico ufficiale per scopi di branding.

Esempio: proprietà di visualizzazione del carattere impostata per lo scambio
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */

Il valore di scambio può essere visto implementato nelle primissime righe di codice (Google Font API) utilizzato per dimostrare come collegare i caratteri di Google nel tuo documento HTML.

Il fallback è simile allo swap ma ha un periodo di swap limitato. Se il carattere preferito non viene caricato entro un determinato periodo, in genere zero secondi, il testo manterrà il carattere di riserva per il resto della vita della pagina. Questo è un buon candidato per il corpo del testo; rende il testo il più rapidamente possibile e non lo sposterà quando qualcuno inizierà a leggere.

Il valore facoltativo è una replica del fallback ma consente al browser di decidere se avviare o meno il download del font web, considerando la velocità della rete degli utenti. In una situazione in cui la connessione è troppo debole, il browser dovrebbe limitare le richieste e dare priorità alle risorse più necessarie non inviando alcuna richiesta per scaricare il font web.

Limita la famiglia di caratteri e le varianti

Poiché ogni famiglia di caratteri e variante contribuisce al peso della pagina, parte del processo di ottimizzazione dei caratteri di Google deve includere la limitazione di questi due elementi.

La disponibilità di diverse varianti come corsivo , normale, grassetto , ecc. non significa necessariamente che hai la "scelta" per includerle nel download. Riduci il download alla variante esatta richiesta ed evita di includerne troppe. Sarebbe uno spreco scaricare una variante completa perché vuoi usare solo una parola da essa. È qui che torna utile il prossimo trucco di ottimizzazione per Google Fonts.

Usa il parametro di testo

Il parametro di testo è uno dei migliori trucchi per l'ottimizzazione dei caratteri di Google che devi conoscere e, sorprendentemente, la maggior parte degli sviluppatori non lo usa. Il parametro ti permette di caricare solo i caratteri che ti servono.

Supponendo che desideri utilizzare solo due lettere di un carattere nel nome della tua azienda come nell'esempio seguente. Ho usato caratteri diversi per le lettere C e N:

Nome della ditta

Puoi richiedere di caricare solo quelle due lettere, invece dell'intero carattere. L'URL del carattere includerà parametri aggiuntivi come questo:

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

Insomma

L'ottimizzazione dei caratteri di Google è una strategia cruciale per migliorare le prestazioni complessive di un sito web.

Accessibilità e leggibilità sono sempre i principali fattori su cui concentrarsi, a parte un buon design nella tipografia. I metodi sopra menzionati per migliorare le prestazioni dei caratteri sono tutti incentrati sulla riduzione del peso dei caratteri, sull'accesso ai caratteri Web il più rapidamente possibile e sul rendering di formati/alternativi validi quando la rete dell'utente è instabile.

Facci sapere se hai provato uno di questi metodi e qualsiasi processo di ottimizzazione dei caratteri web non menzionato in questo articolo.