PageSpeed Insights tegengekomen : "Zorg ervoor dat de tekst zichtbaar blijft tijdens het laden van de webfonts". Uw website kan al door uw browser worden weergegeven voordat de webfonts volledig zijn gedownload. Gebruikers kunnen uw content dus niet zien of openen totdat de webfonts zijn gedownload. Gedurende deze tijd zijn ze niet zichtbaar. Dit wordt het ' Flash of Invisible Text'- probleem (FOIT) genoemd.
Een betere gebruikerservaring kan worden bereikt door ervoor te zorgen dat uw tekst zichtbaar blijft tijdens het laden van het weblettertype. Dit helpt om lege pagina's en ongewenste wijzigingen in de lay-out te voorkomen.
Hoe beïnvloedt het laden van weblettertypen de paginaprestaties?
Het heeft de volgende gevolgen:
- Heeft invloed op de PageSpeed Insights-score.
- Heeft invloed op de cumulatieve verschuivingsscore van de lay-out.
- Beoordeling van First Contentful Paint en Largest Contentful Paint (Core Web Vitals)
- Gebruikerservaring en conversiepercentages
Het ontbreken van tekst heeft ook invloed op de gebruikerservaring tijdens het laden van webfonts: niemand vindt het prettig om een website te bezoeken met een lege pagina. Binnen enkele seconden kunnen gebruikers een goed beeld krijgen van de informatie die ze zoeken door de titel en de tekst te lezen.
Het is essentieel om plotselinge lay-outverschuivingen door webfonts te voorkomen om de score voor cumulatieve lay-outverschuivingen te optimaliseren en te verbeteren. Door ervoor te zorgen dat uw tekst zichtbaar blijft tijdens het laden, voorkomt u onverwachte verschuivingen van de inhoud (zonder tussenkomst van de gebruiker). Webfonts kunnen lay-outverschuivingen veroorzaken als onzichtbare tekst even oplicht tijdens het downloaden en weergeven.
Hoe zorg je ervoor dat de tekst zichtbaar blijft tijdens het laden van weblettertypen?
Dit specifieke moment wordt de 'Flash of Invisible Text' (FOIT) genoemd. De foutmelding "Zorg ervoor dat de tekst zichtbaar blijft tijdens het laden van het weblettertype" verschijnt vanwege deze FOIT, die verantwoordelijk is voor het verschijnen ervan.
Font-display: swap
De eigenschap `font-display` is een CSS-descriptor die toegankelijk is in alle moderne webbrowsers. De `font-display`-descriptor controleert of het lettertype is gedownload en wanneer dit is gebeurd om te bepalen hoe het lettertype moet worden weergegeven. Een regel die bijvoorbeeld `@font-face` gebruikt, maakt gebruik van het `font-display`-attribuut.
Er zijn veel verschillende variabelen voor de weergave van lettertypen, waaronder blok, wisselen, terugval en optioneel. Gebruik de waarde 'wisselen' om te voorkomen dat FOIT (Font-of-Item) optreedt , en gebruik de waarde 'terugval' om ervoor te zorgen dat de tekst zo snel mogelijk op het scherm verschijnt.
Gebruik de Swap Google Fonts Display-plugin in WordPress om dit te automatiseren. Elementor heeft een ingebouwde functie voor het wisselen van Google-lettertypen. Andere optimalisatieplugins zoals WP Rocket, Flyingpress en Perfmatters bieden dit standaard aan.
Voor snellere lettertype-laadtijden kunt u preconnects en preload gebruiken:
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Dit zal ook de CLS verminderen.
Afronding
Deze handleiding legt uit hoe u het probleem 'flitsende onzichtbare tekst' in PageSpeedInzicht kunt oplossen door ervoor te zorgen dat de tekst zichtbaar blijft tijdens het laden van webfonts.
De laadtijd en laadsnelheid van een pagina zijn belangrijke factoren voor een goede gebruikerservaring, en het oplossen van dit probleem kan die ervaring aanzienlijk verbeteren. Als een pagina niet volledig is geladen, wordt deze niet als geladen beschouwd. Om time-outs te voorkomen en gebruikers de balans, snelheid en stabiliteit te bieden die ze wensen, moet u de laadtijd van de pagina verkorten.
Verbeter de prestaties van je WordPress-website met onze WordPress-siteoptimalisatieservices !
