Synlig tekst under indlæsning

Silktide tjekker, om din tekst forbliver læsbar, mens brugerdefinerede skrifttyper downloades. Nogle skrifttypeopsætninger får browsere til at skjule tekst helt, indtil skrifttypefilen er hentet, så besøgende ser på en side uden ord.

Hvorfor det er vigtigt

Skrifttypefiler er ofte store, og mens en fil downloades, kan en browser, der ikke har fået besked på andet, gengive teksten med den pågældende skrifttype som usynlig. På en langsom forbindelse kan dette "glimt af usynlig tekst" vare i sekunder: Siden ser indlæst ud – billeder og layout er på plads – men den siger ingenting. Besøgende kan ikke læse, og tekstbaserede handlinger som navigation mangler i praksis.

Det frustrerende er, at teksten allerede er der. Én linje pr. skrifttype fortæller browseren, at den skal vise teksten med en reserveskrifttype, indtil den brugerdefinerede skrifttype er klar.

Sådan løser du det

Tilføj font-display: swap til hver @font-face-regel, så teksten gengives med det samme med en systemskrifttype og skifter, når den brugerdefinerede skrifttype ankommer:

@font-face {
  font-family: 'Pacifico';
  src: url('pacifico.woff2') format('woff2');
  font-display: swap; /* vis reservetekst med det samme */
}

For skrifttyper, der indlæses fra en hostingtjeneste, skal du bruge tjenestens indstilling til dette – for eksempel parameteren display=swap i stylesheetets URL – eller den aktuelle indlejringskode, som normalt allerede indeholder den.
Vælg en reserveskrifttype med proportioner, der ligner din brugerdefinerede skrifttype, så skiftet medfører så lidt bevægelse som muligt – se Layoutforskydninger.

Sådan tester Silktide dette

Indlæs siden i en rigtig browser med den enhedstype, forbindelseshastighed og testplacering, der er konfigureret til dine hastighedstests.
Undersøg hver brugerdefineret skrifttype, som siden bruger, og tjek, om dens @font-face-regel holder teksten synlig, mens skrifttypen indlæses.
Rapportér hver skrifttypefil, der skjuler tekst, med et estimat af, hvor længe teksten forblev usynlig.
Bedøm siden ud fra den samlede tid, der kunne spares: Omkring 100 millisekunder giver en lavere bedømmelse, og 200 millisekunder eller mere bedømmes som dårligt.

Fejlfinding

Skrifttypen kommer fra et tredjeparts-stylesheet

Du kan ikke redigere et stylesheet, som en anden tjeneste hoster, men løsningen ligger normalt i, hvordan du anmoder om det: De fleste skrifttypetjenester accepterer en visningsindstilling i URL'en eller tilbyder opdateret indlejringskode. Hvis en udbyder ikke giver mulighed for at angive dette, kan du overveje selv at hoste skrifttypen, så du styrer reglen.

Jeg ser aldrig usynlig tekst

Når skrifttypen er cachet, eller på en hurtig forbindelse, er intervallet for kort til at bemærke – tjekket er vigtigt for førstegangsbesøgende på langsommere netværk. Der er også et kompromis, du bør kende til: Med swap ser disse besøgende i stedet kortvarigt reserveskrifttypen. En kortvarig ændring af skrifttype er næsten altid bedre end manglende tekst.

Vi bruger en ikonskrifttype

Hvis du skifter en ikonskrifttype ud, gengives pladsholdertegn dér, hvor ikoner burde være, og det kan se ødelagt ud. Specifikt for ikonskrifttyper er en kort blokeringsperiode (font-display: block) eller at erstatte skrifttypen med SVG-ikoner ofte det bedre valg.