Du har muligvis set PageSpeed Insights- advarslen "sørg for, at tekst forbliver synlig under indlæsning af webfonte", da du testede din hjemmesides hastighed. Din hjemmeside er muligvis klar til at blive malet af din browser, selv før dine webfonte er blevet downloadet helt. Derfor vil brugerne ikke kunne se eller få adgang til dit indhold, før din webfont er blevet downloadet. I løbet af denne tid vil den være skjult for visning. Dette kaldes Flash of Invisible Text (FOIT) -problemet.
En bedre brugeroplevelse kan opnås ved at sikre, at din tekst fortsat er synlig under indlæsningsprocessen af webfonten. Det hjælper med at eliminere tomme sider samt uønskede ændringer i layoutet.
Hvordan påvirker indlæsning af webfonte sidens ydeevne?
Det påvirker på følgende måder:
- Påvirker PageSpeed Insights-score
- Påvirker den kumulative layoutforskydningsgrad
- Karakterer af første indholdsfulde maling og største indholdsfulde maling (kerneweb-vitaliteter)
- Brugeroplevelse og konverteringsrater
Fraværet af tekst påvirker også brugeroplevelsen under indlæsning af Webfonts: ingen kan lide at tilgå et websted med en tom side. På få sekunder kan brugerne få en god fornemmelse af, om et websted indeholder de oplysninger, de leder efter, ved at læse dets hovedtitel og tekst.
Det er vigtigt at undgå pludselige layoutskift forårsaget af webfonte for at optimere og forbedre den kumulative layoutforskydningsgrad. Ved at sikre, at din tekst forbliver synlig under indlæsning, kan du forhindre uventede indholdsskift (uden brugerinteraktion). Webfonte kan forårsage layoutskift, hvis usynlig tekst blinker, når den downloades og gengives.
Sådan sikrer du, at teksten forbliver synlig, mens du indlæser webfonte
Dette særlige øjeblik kaldes Flash of Invisible Text (FOIT). Fejlmeddelelsen "Sørg for, at teksten forbliver synlig under indlæsning af Webfont" vises på grund af denne FOIT, som er ansvarlig for dens udseende.
Skrifttypevisning: swap
Egenskaben font-display er en CSS-deskriptor, der kan tilgås i alle moderne webbrowsere. font-display-deskriptoren ser på, om skrifttypen blev downloadet, og datoen den blev downloadet, for at bestemme, hvordan skrifttypen skal vises. For eksempel bruger en regel, der bruger @font-face, font-display-attributten.
Der er mange forskellige variabler for, hvordan skrifttyper vises, herunder blok, swap, fallback og valgfri. Brug swap-værdien til at forhindre FOIT i at forekomme, og brug swap-værdien til at sikre, at teksten vises på skærmen så hurtigt som det er menneskeligt muligt.
Brug plugin'et Swap Google Fonts Display i WordPress til at automatisere dette. Elementor har en indbygget funktion til at bytte Google Fonts. Andre optimeringsplugins som WP Rocket, Flyingpress og Perfmatters tilbyder dette direkte.
For hurtigere indlæsning af skrifttyper, brug preconnects og preload:
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Dette vil også reducere CLS.
Afslutning
Denne vejledning forklarer, hvordan du kan løse problemet med "glimt af usynlig tekst" i sidehastighedsindsigt ved at sikre, at teksten forbliver synlig under indlæsning af Webfont.
Sideindlæsningstid og sidehastighed er vigtige faktorer for at give en god brugeroplevelse, og en løsning på dette problem kan forbedre denne oplevelse betydeligt. Hvis en side ikke viser alt på den, betragtes den ikke som indlæst. For at undgå timeouts og give brugerne den balance, hastighed og stabilitet, de ønsker, skal du derfor reducere indholdets indlæsningstid på siden.
Sæt fart på WordPress' ydeevne med vores WordPress-webstedsoptimeringstjenester!
