Mogelijk heeft u paginaspeed -inzichten waarschuwing voor "Zorg ervoor dat tekst zichtbaar blijft tijdens WebFont Load" bij het testen van uw website -snelheid. Uw website is misschien klaar om door uw browser te worden geschilderd, zelfs voordat uw weblettertypen volledig zijn gedownload. Daarom kunnen gebruikers uw inhoud niet zien of toegang krijgen tot uw weblettertype is gedownload. Gedurende deze tijd wordt het voor het zicht verborgen. flits van onzichtbare tekst (FOIT) genoemd .
Een betere gebruikerservaring kan worden bereikt door ervoor te zorgen dat uw tekst zichtbaar blijft tijdens het laadproces van het weblettertype. Het helpt om lege pagina's en ongewenste wijzigingen in de lay -out te elimineren.
Hoe beïnvloeden het webletterlasten de pagina -prestaties?
Het beïnvloedt op de volgende manieren:
- Impact Pagespeed Insights Score
- Beïnvloedt de cumulatieve lay -outverschuivingscijfer
- Cijfers van eerste contentful verf en grootste contentfulverf (kernweb vitals)
- Gebruikerservaring en conversiepercentages
De afwezigheid van tekst heeft ook invloed op de gebruikerservaring tijdens het laden van webfont: niemand houdt ervan om een website met een lege pagina te openen. Binnen enkele seconden kunnen gebruikers een goed idee krijgen of een site de informatie bevat die ze zoeken door de hoofdtitel en tekst te lezen.
Het is essentieel om plotselinge lay -outverschuivingen veroorzaakt door weblettertypen te voorkomen om de cumulatieve lay -outverschuivingscijfer te optimaliseren en te verbeteren. Als u ervoor zorgt dat uw tekst zichtbaar blijft tijdens het laden, kunt u onverwachte contentbewegingen voorkomen (zonder interactie tussen gebruikers). Weblettertypen kunnen lay -outverschuivingen veroorzaken als onzichtbare tekst knippert wanneer het wordt gedownload en weergegeven.
Hoe u ervoor kunt zorgen dat de tekst zichtbaar blijft tijdens het laden van weblettertypen
Dit specifieke moment wordt de flits van onzichtbare tekst (FOIT) genoemd. De foutmelding "Zorg ervoor dat tekst zichtbaar blijft tijdens webfont load" verschijnt vanwege dit FOIT, dat verantwoordelijk is voor het uiterlijk ervan.
Font-Display: Swap
De font-display-eigenschap is een CSS-descriptor die toegankelijk is in alle hedendaagse webbrowsers. De lettertype-display-descriptor kijkt of het lettertype is gedownload en de datum waarop het is gedownload om te beslissen hoe het lettertype moet worden weergegeven. Bijvoorbeeld, een regel die @font-face gebruikt, maakt gebruik van het lettertype-display-kenmerk.
Er zijn veel verschillende variabelen voor hoe lettertypen worden getoond, waaronder blok, swap, fallback en optioneel. Gebruik de swap -waarde om te voorkomen dat FOIT optreedt en gebruik de swapwaarde om ervoor te zorgen dat de tekst zo snel op het scherm verschijnt als menselijk haalbaar is.
Gebruik de SWAP Google Fonts Display -plug -in in WordPress om dit te automatiseren. Elementor heeft een ingebouwde functie voor Swap van Google -lettertypen. Andere optimalisatie -plug -ins zoals WP Rocket, FlyingPress, PerfMatters bieden dit uit de doos.
Gebruik voor het laden van lettertype voor het laden van lettertypen:
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Dit zal ook CLS verminderen.
Inpakken
Deze handleiding legt uit hoe u het probleem "Flash of Invisible Text" op Page Snelheidsinzicht kunt oplossen door ervoor te zorgen dat tekst zichtbaar blijft tijdens het laden van WebFont.
Pagina -laadtijd en paginasnelheid zijn belangrijke factoren bij het bieden van een goede gebruikerservaring, en het oplossen van dit probleem kan deze ervaring aanzienlijk verbeteren. Als een pagina er niet alles overheen laat zien, wordt deze niet beschouwd als geladen. Om time -outs te voorkomen en gebruikers de balans, snelheid en stabiliteit te bieden die ze willen, moet u de inhoud van de inhoud op de pagina op de pagina verkorten.
Versnelling van WordPress -prestaties met onze WordPress Site Optimization Services !
