vous ait PageSpeed Insights averti de la nécessité de « s'assurer que le texte reste visible pendant le chargement des polices web » lors du test de vitesse de votre site web. Votre site peut être prêt à être affiché par votre navigateur avant même que vos polices web ne soient entièrement téléchargées. Par conséquent, les utilisateurs ne pourront ni voir ni accéder à votre contenu tant que les polices web ne seront pas téléchargées. Pendant ce temps, le texte sera invisible. Ce phénomène est connu sous le nom de « flash de texte invisible » (FOIT) .
Pour une meilleure expérience utilisateur, assurez-vous que votre texte reste visible pendant le chargement de la police web. Cela permet d'éviter les pages blanches et les modifications de mise en page indésirables.
Comment le chargement des polices Web affecte-t-il les performances des pages ?
Cela a les effets suivants :
- Impact sur le score PageSpeed Insights
- Affecte le niveau de décalage cumulatif de l'aménagement
- Niveaux de First Contentful Paint et Largest Contentful Paint (Essentiels Web de Base)
- Expérience utilisateur et taux de conversion
L'absence de texte a également un impact sur l'expérience utilisateur lors du chargement des polices Web : personne n'apprécie d'accéder à un site Web dont la page est blanche. En quelques secondes, les utilisateurs peuvent se faire une idée précise de la présence des informations recherchées sur un site en lisant son titre et son texte principaux.
Il est essentiel d'éviter les décalages de mise en page soudains causés par les polices web afin d'optimiser et d'améliorer le score CLS (Cumulative Layout Shift). Garantir la visibilité du texte pendant le chargement permet d'éviter les déplacements de contenu inattendus (sans intervention de l'utilisateur). Les polices web peuvent provoquer des décalages de mise en page si du texte invisible clignote lors du téléchargement et de l'affichage.
Comment s'assurer que le texte reste visible pendant le chargement des polices Web
Ce phénomène précis est appelé « flash de texte invisible » (FOIT). Le message d’erreur « Assurez-vous que le texte reste visible pendant le chargement de la police Web » s’affiche à cause de ce FOIT, qui en est responsable.
Affichage des polices : échange
La propriété `font-display` est un descripteur CSS accessible dans tous les navigateurs web modernes. Ce descripteur vérifie si la police a été téléchargée et, le cas échéant, sa date de téléchargement afin de déterminer son affichage. Par exemple, une règle utilisant `@font-face` exploite l'attribut `font-display`.
Il existe de nombreuses variables distinctes pour l'affichage des polices, notamment le bloc, l'échange, le repli et l'optionnel. Utilisez la valeur d'échange pour éviter les erreurs FOITet pour garantir que le texte s'affiche à l'écran aussi rapidement que possible.
Utilisez l' extension Swap Google Fonts Display pour WordPress afin d'automatiser cette opération. Elementor intègre une fonctionnalité de remplacement des polices Google. D'autres extensions d'optimisation comme WP Rocket, FlyingPress et Perfmatters proposent cette fonctionnalité nativement.
Pour un chargement plus rapide des polices, utilisez les préconnexions et le préchargement :
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Cela permettra également de réduire le CLS.
Conclusion
Ce guide explique comment résoudre le problème d’« apparition soudaine de texte invisible » dans PageSpeed Insights en veillant à ce que le texte reste visible pendant le chargement des polices Web.
Le temps de chargement et la vitesse d'affichage d'une page sont essentiels pour une expérience utilisateur optimale, et résoudre ce problème peut l'améliorer considérablement. Si une page n'affiche pas tout son contenu, elle n'est pas considérée comme chargée. Par conséquent, pour éviter les délais d'attente et offrir aux utilisateurs l'équilibre, la rapidité et la stabilité qu'ils recherchent, il est impératif de réduire le temps de chargement du contenu.
Améliorez les performances de votre site WordPress grâce à nos services d'optimisation!
