Synlig tekst under innlasting

Silktide kontrollerer om teksten din forblir lesbar mens egendefinerte skrifter lastes ned. Noen skriftoppsett får nettlesere til å skjule teksten helt til skriftfilen er tilgjengelig, slik at besøkende ser på en side uten noen ord.

Hvorfor dette er viktig

Skriftfiler er ofte store, og mens en skrift lastes ned, kan en nettleser som ikke har fått andre instruksjoner, gjengi teksten i denne skriften som usynlig. På en treg forbindelse kan dette «glimt av usynlig tekst» vare i flere sekunder: Siden ser innlastet ut – bilder og layout er på plass – men sier ingenting. Besøkende kan ikke lese, og tekstbaserte handlinger som navigasjon mangler i praksis.

Det frustrerende er at teksten allerede finnes der. Én linje med per skrift forteller nettleseren at den skal vise teksten med en reserveskrift til den egendefinerte skriften er klar.

Slik løser du det

Legg til font-display: swap i hver @font-face-regel, slik at teksten gjengis umiddelbart med en systemskrift og byttes når den egendefinerte skriften er tilgjengelig:

@font-face {
  font-family: 'Pacifico';
  src: url('pacifico.woff2') format('woff2');
  font-display: swap; \/* show fallback text immediately *\/
}

For skrifter som lastes inn fra en vertstjeneste, bruker du tjenestens alternativ for dette – for eksempel en display=swap-parameter i stilarkets URL – eller den nyeste innebyggingskoden, som vanligvis allerede inkluderer dette.
Velg en reserveskrift med lignende proporsjoner som den egendefinerte skriften, slik at byttet fører til minst mulig bevegelse – se Layoutforskyvninger.

Slik tester Silktide dette

Last inn siden i en ekte nettleser med enhetstype, tilkoblingshastighet og teststed som er konfigurert for hastighetstestene dine.
Undersøk hver egendefinerte skrift siden bruker, og kontroller om @font-face-regelen holder teksten synlig mens skriften lastes inn.
Rapporter hver skriftfil som skjuler tekst, med et estimat på hvor lenge teksten var usynlig.
Vurder siden etter den totale tiden som kunne vært spart: rundt 100 millisekunder gir lavere vurdering, mens 200 millisekunder eller mer vurderes som dårlig.

Feilsøking

Skriften kommer fra et stilark fra en tredjepart

Du kan ikke redigere et stilark som ligger hos en annen tjeneste, men løsningen ligger vanligvis i hvordan du ber om det: De fleste skriftjenester godtar et visningsalternativ i URL-en eller tilbyr oppdatert innebyggingskode. Hvis en leverandør ikke tilbyr noen måte å angi dette på, kan du vurdere å drifte skriften selv, slik at du har kontroll over regelen.

Jeg ser aldri usynlig tekst

Når skriften ligger i hurtigbufferet, eller på en rask forbindelse, er tidsforskjellen for kort til å legges merke til – kontrollen er viktig for førstegangsbesøkende på tregere nettverk. Det finnes også en avveining du bør kjenne til: Med swap ser disse besøkende reserveskriften en kort stund i stedet. En kortvarig endring av skrift er nesten alltid bedre enn manglende tekst.

Vi bruker en ikonskrift

Når en ikonskrift byttes, gjengis plassholdertegn der ikonene skal være, noe som kan se ødelagt ut. For ikonskrifter er en kort blokkeringsperiode (font-display: block) eller å erstatte skriften med SVG-ikoner ofte et bedre valg.