Zichtbare laadtekst

Silktide controleert of je tekst leesbaar blijft terwijl aangepaste lettertypen worden gedownload. Bij sommige lettertypeconfiguraties verbergen browsers tekst volledig totdat het lettertypebestand is aangekomen, waardoor bezoekers naar een pagina zonder woorden kijken.

Waarom dit belangrijk is

Lettertypebestanden zijn vaak groot. Terwijl zo'n bestand wordt gedownload, kan een browser die niet anders is ingesteld tekst in dat lettertype als onzichtbaar weergeven. Op een trage verbinding kan deze 'flits van onzichtbare tekst' seconden duren: de pagina lijkt geladen — afbeeldingen en lay-out staan op hun plaats — maar bevat geen tekst. Bezoekers kunnen niet lezen en tekstgebaseerde acties zoals navigatie zijn feitelijk niet beschikbaar.

Het frustrerende is dat de tekst er al staat. Eén regel per lettertype vertelt de browser om de tekst in een terugvallettertype weer te geven totdat het aangepaste lettertype klaar is.

Zo los je dit op

Voeg font-display: swap toe aan elke @font-face-regel, zodat tekst onmiddellijk in een systeemlettertype wordt weergegeven en overschakelt zodra het aangepaste lettertype is aangekomen:

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

Gebruik voor lettertypen die vanaf een hostingservice worden geladen de optie van die service hiervoor — bijvoorbeeld een display=swap-parameter in de URL van het stylesheet — of de huidige insluitcode, waarin dit meestal al is opgenomen.
Kies een terugvallettertype met vergelijkbare verhoudingen als je aangepaste lettertype, zodat de overschakeling zo min mogelijk verschuiving veroorzaakt — zie Lay-outverschuivingen.

Zo test Silktide dit

Laad de pagina in een echte browser, met het apparaattype, de verbindingssnelheid en de testlocatie die voor je snelheidstests zijn ingesteld.
Onderzoek elk aangepast lettertype dat de pagina gebruikt en controleer of de @font-face-regel tekst zichtbaar houdt terwijl het lettertype wordt geladen.
Rapporteer elk lettertypebestand dat tekst verbergt, met een schatting van hoelang de tekst onzichtbaar bleef.
Beoordeel de pagina op basis van de totale tijd die kon worden bespaard: ongeveer 100 milliseconden leidt tot een lagere beoordeling en 200 milliseconden of meer wordt als slecht beoordeeld.

Problemen oplossen

Het lettertype komt uit een stylesheet van een derde partij

Je kunt een stylesheet dat door een andere service wordt gehost niet bewerken, maar de oplossing zit meestal in de manier waarop je erom vraagt: de meeste lettertypeservices accepteren een weergaveoptie in de URL of bieden bijgewerkte insluitcode. Als een provider geen manier biedt om dit in te stellen, kun je overwegen het lettertype zelf te hosten, zodat je de regel beheert.

Ik zie nooit onzichtbare tekst

Als het lettertype uit de cache komt of de verbinding snel is, is het verschil te kort om op te merken — deze controle is belangrijk voor nieuwe bezoekers op tragere netwerken. Er is ook een afweging om rekening mee te houden: met swap zien deze bezoekers tijdelijk het terugvallettertype. Een korte verandering van lettertype is vrijwel altijd beter dan ontbrekende tekst.

We gebruiken een pictogramlettertype

Bij het overschakelen van een pictogramlettertype worden tijdelijke tekens weergegeven op de plekken waar pictogrammen horen te staan, wat er kapot uit kan zien. Voor pictogramlettertypen is een korte blokkeerperiode (font-display: block) of het vervangen van het lettertype door SVG-pictogrammen vaak een betere keuze.