Core Web Vitals: Come Evitare le Insidie di Prestazione dei Font Web

I font web conferiscono personalità al tuo sito, ma aggiungono anche peso.

E se i tuoi caratteri impiegano troppo tempo a caricarsi, gli utenti rimarranno a fissare uno schermo vuoto. Ancora peggio, il tuo sito potrebbe sembrare instabile poiché il testo si sposta inaspettatamente.

Questo danneggia anche i Core Web Vitals — le metriche che influenzano direttamente il tuo posizionamento nei motori di ricerca e l’esperienza utente.

Qui, ogni millisecondo conta.

Allora, come puoi mantenere la tua scelta di font web senza sacrificare le prestazioni?

Spezziamola, un passo alla volta.

Ma prima, cosa sono esattamente i font sicuri per il web e i font web?

Quali Sono I Caratteri Web Sicuri?

Font sicuri per il web sono le opzioni collaudate e affidabili che funzionano ovunque. Sono font che la maggior parte dei dispositivi possiede già, il che significa che puoi contarci per un caricamento veloce.

Ecco i font sicuri per il web che puoi utilizzare:

• Arial
• Times New Roman
• Verdana
• Trebuchet MS
• Courier
• Impact
• Georgia
• Comic Sans MS

Anche con scelte limitate, un designer esperto può utilizzare questi caratteri in modo creativo.

Ma, i font sicuri per il web sono spesso abusati e danno al tuo sito web una sensazione di “similitudine” — anche quando hai investito molto tempo e denaro nel design del sito.

Allora, come fai a renderlo più bello?

Con i font web.

Cosa Sono i Font Web?

I font web ti permettono di allontanarti dai font websafe spesso troppo utilizzati.

Invece di fare affidamento sui font disponibili sul dispositivo di un utente, i font web possono essere scaricati da una fonte esterna come Google Fonts o direttamente dal tuo server sul dispositivo dell’utente (temporaneamente).

Questo ti permette di utilizzare qualsiasi carattere personalizzato che corrisponda al tuo marchio o alle tue esigenze di design.

Abbiamo anche selezionato i migliori font di Google per aiutarti a iniziare.

Quando un utente visita il tuo sito, il carattere web viene temporaneamente scaricato e applicato al testo utilizzando la regola @font-face in CSS.

I font del web iniziano quindi a comportarsi come font locali — Si adattano automaticamente alle dimensioni dello schermo mantenendo il tuo sito web nitido.

Anche i font sono evoluti nel tempo per avere formati di archiviazione più efficienti. Simili ai formati di immagine, i font includono TTF, WOFF, WOFF2 e EOT.

• Embedded OpenType (EOT): Compatibile con le versioni più vecchie di Internet Explorer (sotto IE9). Non compresso di default, ma può essere applicata la compressione GZIP.
• TrueType (TTF): Supportato dai browser Android più vecchi (sotto la versione 4.4). È non compresso di default ma può essere compresso con GZIP.
• Web Open Font Format (WOFF): Supportato dalla maggior parte dei browser moderni e include compressione integrata.
• Web Open Font Format 2 (WOFF2): Compatibile con i browser che lo supportano, presenta algoritmi di compressione personalizzati che riducono la dimensione del file di circa il 30% rispetto ad altri formati.

I formati moderni offrono compressione per una migliore performance e aiutano a mantenere il design del tuo sito sia funzionale che visivamente distintivo.

Cosa Sono Le Metriche Dei Core Web Vitals (CWV)?

Ecco il punto: Google desidera che tutti i suoi utenti abbiano un’esperienza eccellente.

Qualsiasi sito web o app che offra la migliore esperienza agli utenti di Google riceverà più “affetto” dagli algoritmi di Google.

E come si misura questa “esperienza“?

Google ha lanciato i Core Web Vitals all’inizio del 2020 proprio a questo scopo.

CWV è un insieme di tre metriche che indicano a Google come il tuo sito web o app si comporta per gli utenti che vi vengono inviati.

Punteggi più alti su queste metriche possono aiutarti a posizionarti meglio su Google. Facciamo rapidamente il punto su queste metriche.

Largest Contentful Paint (LCP)

LCP misura quanto tempo impiega l’elemento più grande visibile sulla tua pagina per caricarsi.

Questo è generalmente un’immagine o un video, ma potrebbe essere un grande blocco di testo o un video incorporato.

Più velocemente avviene questo, migliore sarà la performance del tuo sito agli occhi sia degli utenti che dei motori di ricerca.

Un buon punteggio LCP significa che gli utenti non rimangono in attesa che il contenuto principale venga visualizzato.

Interazione al Prossimo Ritratto (INP)

INP misura il tempo tra l’interazione di un utente (come cliccare o toccare) e la risposta visiva della pagina.

Fornisce un quadro più preciso dell’interattività rispetto al FID, poiché considera l’intero percorso dell’utente anziché solo la prima interazione.

Un punteggio INP basso significa che il tuo sito risulta reattivo, migliorando coinvolgimento e soddisfazione degli utenti.

Spostamento Cumulativo del Layout (CLS)

CLS misura quanto è stabile la tua pagina durante il caricamento.

Quando gli elementi si spostano in modo inaspettato, ciò frustra gli utenti e rende la pagina poco affidabile.

Un punteggio CLS basso significa che la tua pagina si carica fluidamente, senza spostamenti di layout che interrompono l’esperienza utente.

Come Ottimizzare I Font Web Per Migliorare I Core Web Vitals

Allora, perché tutto questo clamore sulle prestazioni dei font web?

Perché non possiamo semplicemente aggiungere i caratteri web e finirla lì? Beh, puoi farlo.

Ma come abbiamo già detto, i font web non sono locali. Vengono recuperati da un server, scaricati e applicati al tuo sito, ed è qui che nasce il problema.

Ci vuole tempo.

E se ci vuole troppo tempo, influisce sui tuoi Core Web Vitals e tasso di conversione del sito web.

Vediamo alcuni modi per ottimizzare i font web per migliorare i core web vitals.

1. Precaricamento Dei Caratteri

Vuoi che i tuoi font siano pronti nel momento in cui la pagina inizia a caricarsi.

Quando la pagina è pronta per l’utente, lo è anche il font.

Questo si chiama preloading.

Il precaricamento dice al browser, “Ehi, questo font è importante. Caricalo subito.”

Diciamo che stai usando il popolare carattere Google, Roboto.

Devi aggiungere un singolo attributo al tuo codice HTML per precaricare il font: rel = “preload”

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="font" type="font/woff2" crossorigin>

Dopo ciò, il browser sa di dare priorità al download di Roboto, così il tuo testo appare formattato con il carattere corretto più velocemente.

Questo riduce il tempo necessario per il rendering del blocco di testo più grande (LCP), così gli utenti vedono la versione finale del tuo sito più rapidamente.

2. Controlla il Comportamento di Caricamento dei Caratteri con la Proprietà Font-Display

Tuttavia, il precaricamento potrebbe aumentare leggermente il tempo di caricamento iniziale poiché ai font viene data la priorità.

La proprietà font-display ti permette di controllare come si comporta il tuo testo mentre i caratteri personalizzati sono ancora in caricamento.

Questo può aiutarti a evitare il temuto Flash of Invisible Text (FOIT), dove gli utenti vedono spazi vuoti, e il Flash of Unstyled Text (FOUT), dove la pagina appare con i font di riserva per un secondo e poi passa immediatamente ai font personalizzati.

La proprietà font-display ha quattro modi per gestire il comportamento del testo: block, swap, fallback e optional.

Guardiamo i due di cui avresti bisogno.

font-display: swap — Questa opzione è la scelta più sicura per la maggior parte dei siti. Garantisce che il testo appaia immediatamente con un font di riserva e passi al font personalizzato non appena è pronto.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: swap;
}

Qui, il font di riserva (come Arial o un altro font di sistema) si caricherà istantaneamente, mantenendo la pagina leggibile.

Quando Roboto viene scaricato, sostituisce il font di riserva senza lasciare uno spazio vuoto sullo schermo.

Ecco una dimostrazione di come si comporta il font-display swap nel mondo reale.

font-display: optional — Se ti preoccupa la velocità, questo comando dice al browser di saltare il font personalizzato se non si carica abbastanza velocemente. Questo funziona quando non ti dispiace se il font di riserva rimane al suo posto.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: optional;
}

Questa opzione è sensata quando le prestazioni sono più importanti del design, rendendola perfetta per un sito che punta tutto sulla velocità.

Ecco un esempio di come appare nel mondo reale. Non noterai il cambiamento qui poiché la maggior parte dei font si carica abbastanza velocemente.

Tuttavia, l’argomento facoltativo è ottimo nel caso in cui il tuo server dei font si blocchi o rallenti.

3. Sottoinsiemi di Caratteri

La maggior parte dei caratteri include centinaia, persino migliaia, di caratteri.

Probabilmente, ti serve solo una piccola parte di questi. La rimozione di questi si chiama sottosettatura del font.

Esatto, puoi rimuovere i caratteri non necessari per ridurre la dimensione del file del font.

Supponi che il tuo sito necessiti solo di caratteri inglesi.

Uno strumento come FontTools può aiutarti a ridurre il tuo font includendo solo i caratteri che utilizzerai effettivamente.

Questo significa che tutti i caratteri Unicode che non sono necessari nella lingua inglese possono essere rimossi per risparmiare spazio sul file.

Questo riduce la dimensione del file, ad esempio, da 80 KB a 30 KB.

I file più piccoli significano download più veloci, migliorando sia LCP che CLS poiché il font si carica rapidamente e non modifica il layout.

Ecco un esempio di come rimuovere tutto tranne i caratteri inglesi usando FontTools:

pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F

Ora, il tuo font Roboto contiene solo i caratteri latini di base necessari per il testo in inglese, rendendolo molto più veloce da caricare.

Se preferisci un approccio basato su GUI, puoi anche provare font-squirrel. Una volta caricato un file di font, hai a disposizione molte opzioni di personalizzazione da aggiungere o rimuovere

4. Comprimere i Font

I formati di font moderni come WOFF2 offrono una compressione che può ridurre la dimensione dei font fino al 30% rispetto a formati più vecchi come TTF.

Utilizzare la versione più compressa del tuo font può ridurre significativamente il suo impatto sul tempo di caricamento della pagina.

Ad esempio, ecco come puoi assicurarti di utilizzare WOFF2:

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2'),
       url('roboto.woff') format('woff');
  font-weight: 400;
}

In questo modo, i browser che supportano WOFF2 lo useranno di default, riducendo i tempi di caricamento pur visualizzando un font nitido e di alta qualità.

Tuttavia, se un browser non può utilizzare WOFF2, passa a WOFF.

5. Codifica Base64

Questa è un’altra pratica comunemente utilizzata per ottimizzare i tuoi font web.

Tuttavia, devi stare attento a quando usare i font codificati in Base64.

La codifica Base64 è più utile per piccoli font o icone.

Se usato eccessivamente, però, puoi appesantire il CSS, aumentando il tempo di caricamento della pagina più dell’uso del font stesso.

Se vuoi utilizzare la codifica Base64 per un font di icone, dovresti prima convertire il file del font in formato Base64. Ecco come potrebbe apparire:

@font-face {
  font-family: 'CustomIcons';
  src: url('data:font/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Questo metodo funziona bene per piccoli font di icone che utilizzi frequentemente in tutto il sito.

Il file CSS viene caricato con il font incorporato, eliminando una richiesta HTTP aggiuntiva.

Tuttavia, evita questo per i font di grande corpo, poiché può rallentare il rendering iniziale della pagina.

6. <link> vs. CSS @import per i Font

<link> e @import hanno una differenza significativa nelle prestazioni di caricamento.

Il tag <link> carica i font in modo asincrono, il che significa che non impedisce il rendering del resto della tua pagina, mentre @import è un po’ più lento.

Usa <link> quando possibile.

“Nel 90%+ dei casi probabilmente vuoi utilizzare il tag <link>. Come regola generale, vuoi evitare le regole @import perché ritardano il caricamento della risorsa inclusa fino a quando il file non viene recuperato.” Ilya Grigorik, Ingegnere e Consigliere Tecnico del CEO di Shopify

Carica i font in modo indipendente, permettendo al resto della pagina di caricarsi senza attendere il file del font.

<link rel="stylesheet" href= "https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">

Questo è il metodo preferito per caricare Google Fonts o servizi di font esterni simili.

Inserito nella sezione <head> del tuo HTML, assicura che il caricamento del font inizi presto senza bloccare altre risorse.

Evita @import per i font critici.

@import attende fino a quando il file CSS non è completamente caricato, il che può aumentare il tempo di caricamento e danneggiare LCP.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

L’uso di @import per i font funziona solo per font secondari o meno importanti. Come prassi, evitalo per qualsiasi cosa nella prima schermata di contenuto.

7. Riduci gli Spostamenti Visivi/CLS Con il Matching dei Caratteri e l’Adattamento della Dimensione

Le modifiche visive — o spostamenti cumulativi del layout (CLS), come li definisce Google — si verificano quando il layout cambia in modo inaspettato, spesso a causa della sostituzione dei font.

Per minimizzare questo effetto, scegli font di riserva che assomigliano strettamente allo stile e alle dimensioni del tuo font personalizzato.

La proprietà CSS size-adjust ti permette anche di controllare la dimensione del carattere di riserva, riducendo gli spostamenti visivi quando viene caricato il carattere personalizzato.

Se il tuo font personalizzato è Roboto e un font di riserva, regola la dimensione per corrispondere a Roboto, rendendo la transizione quasi impercettibile.

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
}

Qui, il font di riserva di Roboto (ad esempio, Arial) mantiene una dimensione consistente, riducendo qualsiasi movimento evidente quando Roboto viene caricato completamente.

Una volta allineate le dimensioni e la spaziatura del carattere di riserva con il tuo carattere personalizzato, assicuri che quando Roboto sostituisce Arial, lo spostamento sia minimo, mantenendo basso il CLS e migliorando l’esperienza utente.

8. Trova il Luogo Adatto per Ospitare i Caratteri Web

Ospitare da soli i tuoi font non significa sempre una prestazione più veloce.

Molte opzioni di terze parti funzionano anche bene—e a volte, possono persino caricarsi più velocemente.

Il Web Almanac ha scoperto che certi siti che utilizzano font di terze parti vengono renderizzati più velocemente rispetto a quelli con font ospitati autonomamente.

Alla fine, le prestazioni dei font dipendono meno dalla scelta dell’hosting e più da tre fattori chiave:

• Content Delivery Network (CDN): Garantisce una consegna più veloce servendo i font da più località in tutto il mondo.
• HTTP/2: Aumenta la velocità di caricamento gestendo più richieste in parallelo, riducendo la latenza.
• Politica di Caching Web: Memorizza nella cache i font in modo efficiente, così non devono essere riscaricati ad ogni visita.

Invece di rimanere bloccato nella discussione sull’hosting, concentra i tuoi sforzi nel configurare questi elementi essenziali per mantenere il caricamento dei tuoi caratteri fluido, non importa dove siano ospitati.

Come Semplificare L’ottimizzazione Delle Prestazioni Web

Se le tecniche sopra menzionate ti sembrano troppo complicate, un plugin come Jetpack può semplificarle.

Jetpack, sviluppato da Automattic (i creatori di WordPress), è una soluzione all-in-one creata specificamente per i siti WordPress.

Combina funzionalità essenziali per la sicurezza, le prestazioni e il marketing, tutte gestite da una sola piattaforma.

Anche se non sei un esperto tecnico, Jetpack può aiutare a migliorare la velocità del sito, rafforzare la sicurezza e migliorare l’esperienza dell’utente. (Nessuna configurazione complessa necessaria!)

Crea l’Equilibrio Perfetto tra Bellezza e Prestazioni

I font web conferiscono al tuo sito un aspetto unico e bello.

Tuttavia, senza le modifiche giuste, possono anche rallentarlo e frustrare gli utenti.

Mentre abbiamo trattato le tecniche essenziali di ottimizzazione dei font, il perfezionamento delle prestazioni coinvolge innumerevoli dettagli tecnici.

E ottenere i migliori risultati può sembrare schiacciante.

Ecco dove i servizi professionali di sviluppo web di DreamHost entrano in gioco.

Ci assicureremo che il tuo sito sia bello e ottimizzato per velocità e esperienza utente.

Lascia che ci occupiamo noi delle questioni tecniche mentre tu ti concentri sulla realizzazione di un sito che si distingua davvero.

---

Questa pagina contiene link affiliati. Ciò significa che potremmo guadagnare una commissione se acquisti servizi tramite il nostro link senza alcun costo aggiuntivo per te.