Testo visibile durante il caricamento

Silktide controlla se il testo rimane leggibile mentre i font personalizzati vengono scaricati. Alcune configurazioni dei font fanno sì che i browser nascondano completamente il testo finché il file del font non è arrivato, lasciando i visitatori davanti a una pagina senza parole.

Perché è importante

I file dei font sono spesso grandi e, mentre uno viene scaricato, un browser a cui non è stato indicato diversamente potrebbe visualizzare come invisibile il testo che usa quel font. Con una connessione lenta, questo "lampeggio di testo invisibile" può durare alcuni secondi: la pagina sembra caricata — immagini e layout sono al loro posto — ma non comunica nulla. I visitatori non possono leggere e le azioni basate sul testo, come la navigazione, di fatto non sono disponibili.

La parte frustrante è che il testo è già presente. Una riga di per ogni font indica al browser di mostrarlo con un font di fallback finché il font personalizzato non è pronto.

Come risolvere il problema

Aggiungi font-display: swap a ogni regola @font-face, così il testo viene visualizzato immediatamente con un font di sistema e cambia quando arriva il font personalizzato:

@font-face {
  font-family: 'Pacifico';
  src: url('pacifico.woff2') format('woff2');
  font-display: swap; \/* mostra subito il testo di fallback *\/ 
}

Per i font caricati da un servizio di hosting, usa l'opzione del servizio per questa impostazione — ad esempio un parametro display=swap nell'URL del foglio di stile — oppure il codice di incorporamento aggiornato, che di solito la include già.
Scegli un font di fallback con proporzioni simili a quelle del font personalizzato, così il cambio causa il minor movimento possibile — vedi Spostamenti del layout.

Come Silktide esegue il controllo

Carica la pagina in un browser reale, usando il tipo di dispositivo, la velocità di connessione e la posizione di test configurati per i test di velocità.
Esamina ogni font personalizzato usato dalla pagina e controlla se la relativa regola @font-face mantiene visibile il testo durante il caricamento del font.
Segnala ogni file di font che nasconde il testo, con una stima della durata dell'invisibilità del testo.
Valuta la pagina in base al tempo totale che potrebbe essere risparmiato: circa 100 millisecondi comportano una valutazione inferiore, mentre 200 millisecondi o più vengono valutati come un risultato scarso.

Risoluzione dei problemi

Il font proviene da un foglio di stile di terze parti

Non puoi modificare un foglio di stile ospitato da un altro servizio, ma di solito la soluzione consiste nel modo in cui lo richiedi: la maggior parte dei servizi di font accetta un'opzione di visualizzazione nell'URL o offre un codice di incorporamento aggiornato. Se un fornitore non offre alcun modo per impostarla, valuta la possibilità di ospitare il font autonomamente, così da poter controllare la regola.

Non vedo mai alcun testo invisibile

Con il font memorizzato nella cache o con una connessione veloce, l'intervallo è troppo breve per essere notato: il controllo è importante per i visitatori che accedono per la prima volta da reti più lente. C'è anche un compromesso da considerare: con swap, questi visitatori vedranno brevemente il font di fallback. Un breve cambio di font è quasi sempre preferibile al testo mancante.

Usiamo un font di icone

Il cambio di un font di icone visualizza caratteri segnaposto al posto delle icone, creando un effetto che può sembrare un errore. In particolare per i font di icone, spesso è preferibile un breve periodo di blocco (font-display: block) o sostituire il font con icone SVG.