L'utilizzo dei caratteri è prevalente nella maggior parte delle pagine Web e spesso include errori. Molti di questi errori influiscono negativamente sul budget delle prestazioni web. Questo articolo ha lo scopo di fornire informazioni sull'utilizzo dei caratteri Web e di contribuire a migliorare le prestazioni Web.
Come mostrato nella gerarchia applicata durante il rendering di qualsiasi pagina Web, gli elementi dei caratteri possono ritardare il rendering di altri elementi finché non vengono caricati. Gestire correttamente questo ritardo è importante sia per il Cumulative Layout Shift (CLS) che per la percezione dell'utente.
Il problema con il caricamento dei caratteri
Fino al caricamento dei caratteri della pagina, la visibilità dei caratteri durante il processo di rendering HTML e CSS varia da browser a browser. Ecco un riepilogo di come i diversi browser gestiscono questa situazione:
| Browser | Comportamento predefinito se il carattere non è pronto... |
|---|---|
| bordo | Utilizza un carattere di sistema finché il carattere non è pronto. Scambia il carattere. |
| Chrome | Nasconderà il testo per un massimo di 3 secondi. Se il testo non è ancora pronto, utilizza un carattere di sistema finché il carattere non è pronto. Scambia il carattere. |
| Firefox | Nasconderà il testo per un massimo di 3 secondi. Se il testo non è ancora pronto, utilizza un carattere di sistema finché il carattere non è pronto. Scambia il carattere. |
| Safari | Nasconde il testo finché il carattere non è pronto. |
Per affrontare questo problema senza fare affidamento sul comportamento del browser, è stato introdotto il parametro font-display. Attualmente, il 92% dei browser supporta il parametro font-display.
Cosa fa la visualizzazione dei caratteri?
Durante il processo di caricamento della pagina, l'aspetto dei caratteri può variare fino al caricamento completo, a seconda del browser. Ad esempio, alcune versioni del browser Safari nascondono il testo finché non viene caricato il carattere. IL visualizzazione dei caratteri: scambia Il parametro CSS standardizza questo comportamento visualizzando il testo utilizzando un carattere di sistema finché non vengono caricati i file dei caratteri. Una volta caricati i caratteri, il carattere di sistema viene sostituito con il carattere desiderato. Ecco un esempio di utilizzo:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Precaricamento dei caratteri
Utilizzando caricare i caratteri prima del percorso di rendering critico può evitare lacune durante il caricamento dei caratteri.
BONUS: approccio industriale all'utilizzo dei caratteri
Secondo i dati di SimilarTech, diamo un'occhiata a una tendenza importante e a un'istantanea del mondo di Internet. Il primo grafico seguente mostra l'utilizzo dei caratteri nelle prime 10,000 pagine e il secondo grafico mostra l'utilizzo dei caratteri nei primi 100,000 siti. Esaminiamo prima questi grafici:
C'è una differenza del 5% nell'utilizzo di Google Font e Font Awesome tra i primi 10,000 siti e i primi 100,000 siti. Questo ci dice che i primi 10,000 siti hanno ottimizzato l’utilizzo dei caratteri. Raccomandiamo di esaminare questo argomento come argomento degno di nota. Considera come puoi implementare i caratteri web con le tue soluzioni.
BONUS 2: Statistiche sull'utilizzo di Google Font e Font Awesome
Con riferimento al primo bonus, suggeriamo di esaminare i due grafici che mostrano l'entità numerica delle librerie di font più utilizzate. Il numero di domini unici qui supera i milioni, e questi milioni rappresentano i tuoi concorrenti SEO. Usare queste librerie meglio e in modo più ottimale rispetto ad altre può aiutarti a distinguerti.
Seguendo questi suggerimenti e ottimizzando l'utilizzo dei caratteri, puoi migliorare in modo significativo le prestazioni web e l'esperienza utente.
