Du kanske har sett PageSpeed Insights- varningen "se till att texten förblir synlig under laddning av webbfonter" när du testade din webbplats hastighet. Din webbplats kan vara redo att visas av din webbläsare redan innan dina webbfonter har laddats ner helt. Därför kommer användare inte att kunna se eller komma åt ditt innehåll förrän ditt webbfont har laddats ner. Under denna tid kommer det att vara dolt. Detta kallas Flash of Invisible Text (FOIT) -problem.
En bättre användarupplevelse kan uppnås genom att säkerställa att din text fortsätter att vara synlig under laddningsprocessen av webbtypsnittet. Det hjälper till att eliminera tomma sidor samt oönskade ändringar i layouten.
Hur påverkar inläsning av webbteckensnitt sidprestanda?
Det påverkar på följande sätt:
- Påverkar PageSpeed Insights-poäng
- Påverkar den kumulativa layoutförskjutningens gradient
- Betyg för första innehållsrika färg och största innehållsrika färg (Core Web Vitals)
- Användarupplevelse och konverteringsfrekvenser
Avsaknaden av text påverkar också användarupplevelsen vid laddning av Webfonts: ingen gillar att besöka en webbplats med en tom sida. På några sekunder kan användare få en bra uppfattning om huruvida en webbplats innehåller den information de letar efter genom att läsa dess huvudtitel och text.
Det är viktigt att undvika plötsliga layoutförändringar orsakade av webbteckensnitt för att optimera och förbättra den kumulativa layoutförändringen. Genom att se till att din text förblir synlig under inläsning kan du förhindra oväntade innehållsförändringar (utan användarinteraktion). Webbteckensnitt kan orsaka layoutförändringar om osynlig text blinkar när den laddas ner och renderas.
Hur man ser till att texten förblir synlig när man laddar webbteckensnitt
Denna specifika tidpunkt kallas Flash of Invisible Text (FOIT). Felmeddelandet "Se till att texten förblir synlig under inläsning av Webfont" visas på grund av denna FOIT, som är ansvarig för dess utseende.
Font-display: swap
Egenskapen font-display är en CSS-deskriptor som kan nås i alla moderna webbläsare. font-display-deskriptorn tittar på om teckensnittet laddades ner och datumet det laddades ner för att avgöra hur teckensnittet ska visas. Till exempel använder en regel som använder @font-face attributet font-display.
Det finns många olika variabler för hur teckensnitt visas, inklusive block, swap, reserv och valfritt. Använd swap-värdet för att förhindra att FOIT uppstår, och använd swap-värdet för att säkerställa att texten visas på skärmen så snabbt som det är mänskligt möjligt.
Använd pluginet Swap Google Fonts Display i WordPress för att automatisera detta. Elementor har en inbyggd funktion för att byta Google Fonts. Andra optimerings-plugins som WP Rocket, Flyingpress och Perfmatters erbjuder detta direkt.
För snabbare inläsning av teckensnitt, använd preconnects och preload:
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Detta kommer också att minska CLS.
Avslutning
Den här guiden förklarar hur du kan åtgärda problemet med "osynlig text" i sidhastighetsinsikten genom att säkerställa att texten förblir synlig under inläsning av Webfonts.
Sidladdningstid och sidhastighet är viktiga faktorer för att ge en bra användarupplevelse, och att åtgärda detta problem kan förbättra upplevelsen avsevärt. Om en sida inte visar allt på den anses den inte vara inläst. För att undvika timeouts och ge användarna den balans, hastighet och stabilitet de vill ha måste du därför minska innehållets laddningstid på sidan.
Snabba upp WordPress prestanda med våra WordPress webbplatsoptimeringstjänster!
