Synlig text under inläsning

Silktide kontrollerar om texten förblir läsbar medan anpassade teckensnitt laddas ned. Vissa teckensnittskonfigurationer gör att webbläsare döljer texten helt tills teckensnittsfilen har laddats, så att besökare möts av en sida utan några ord.

Varför detta är viktigt

Teckensnittsfiler är ofta stora, och medan en fil laddas ned kan en webbläsare som inte har instruerats på annat sätt visa texten i det teckensnittet som osynlig. På en långsam anslutning kan denna "blinkning av osynlig text" pågå i flera sekunder: sidan ser inläst ut – bilder och layout finns på plats – men säger ingenting. Besökare kan inte läsa, och textbaserade funktioner som navigering saknas i praktiken.

Det frustrerande är att texten redan finns där. En rad med per teckensnitt talar om för webbläsaren att visa texten med ett reservteckensnitt tills det anpassade teckensnittet är klart.

Så åtgärdar du problemet

Lägg till font-display: swap i varje @font-face-regel, så att texten visas direkt med ett systemteckensnitt och byts när det anpassade teckensnittet har laddats:

@font-face {
  font-family: 'Pacifico';
  src: url('pacifico.woff2') format('woff2');
  font-display: swap; /\* visa reservtext direkt *\/ 
}

För teckensnitt som laddas från en värdtjänst använder du tjänstens alternativ för detta – till exempel parametern display=swap i formatmallens URL – eller den aktuella inbäddningskoden, som vanligtvis redan innehåller det.
Välj ett reservteckensnitt med liknande proportioner som ditt anpassade teckensnitt, så att bytet orsakar så lite förflyttning som möjligt – se Layoutförskjutningar.

Så testar Silktide detta

Läser in sidan i en riktig webbläsare med den enhetstyp, anslutningshastighet och testplats som har konfigurerats för dina hastighetstester.
Undersöker varje anpassat teckensnitt som sidan använder och kontrollerar om dess @font-face-regel håller texten synlig medan teckensnittet laddas.
Rapporterar varje teckensnittsfil som döljer text, med en uppskattning av hur länge texten förblev osynlig.
Betygsätter sidan utifrån den totala tid som skulle kunna sparas: omkring 100 millisekunder ger ett sämre betyg, och 200 millisekunder eller mer bedöms som dåligt.

Felsökning

Teckensnittet kommer från en formatmall från tredje part

Du kan inte redigera en formatmall som en annan tjänst är värd för, men lösningen finns vanligtvis i hur du begär den: de flesta teckensnittstjänster accepterar ett visningsalternativ i URL:en eller erbjuder uppdaterad inbäddningskod. Om en leverantör inte erbjuder något sätt att ange detta kan du överväga att lagra teckensnittet på din egen server, så att du själv kan styra regeln.

Jag ser aldrig någon osynlig text

När teckensnittet finns i cachen, eller på en snabb anslutning, är mellanrummet för kort för att märkas – kontrollen är viktig för förstagångsbesökare på långsammare nätverk. Det finns också en avvägning att känna till: med swap ser dessa besökare tillfälligt reservteckensnittet i stället. En kort förändring av teckensnittet är nästan alltid bättre än saknad text.

Vi använder ett ikon-teckensnitt

När ett ikon-teckensnitt byts ut visas platshållartecken där ikonerna ska vara, vilket kan se trasigt ut. För ikon-teckensnitt är en kort blockeringsperiod (font-display: block) eller att ersätta teckensnittet med SVG-ikoner ofta ett bättre val.