Vous avez peut-être vu l'avertissement de PageSpeed Insights "s'assurer que le texte reste visible pendant le chargement de la police Web" lorsque vous testez la vitesse de votre site Web. Votre site Web peut être prêt à être peint par votre navigateur avant même que vos polices Web aient été entièrement téléchargées. Par conséquent, les utilisateurs ne seront pas en mesure de voir ou d'accéder à votre contenu tant que votre police Web n'aura pas été téléchargée. Pendant ce temps, il sera caché à la vue. C'est ce qu'on appelle le problème du Flash of Invisible Text (FOIT) .
Une meilleure expérience utilisateur peut être obtenue en s'assurant que votre texte continue d'être visible pendant le processus de chargement de la police web. Cela permet d'éliminer les pages blanches ainsi que les modifications indésirables de la mise en page.
Contenu
ToggleComment les chargements de polices Web affectent-ils les performances des pages ?
Il agit de la manière suivante :
- Impact sur le score PageSpeed Insights
- Affecte le grade de décalage cumulatif de la mise en page.
- Grades de la première peinture à contenu et de la plus grande peinture à contenu (Core Web Vitals)
- Expérience utilisateur et taux de conversion
L'absence de texte a également un impact sur l'expérience de l'utilisateur pendant le chargement de Webfont : personne n'aime accéder à un site web avec une page blanche. En quelques secondes, les utilisateurs peuvent se faire une bonne idée du contenu d'un site en lisant son titre principal et son texte.
Il est essentiel d'éviter les déplacements soudains de la mise en page causés par les polices Web pour optimiser et améliorer la note cumulative de déplacement de la mise en page. En vous assurant que votre texte reste visible pendant le chargement, vous pouvez éviter les déplacements inattendus du contenu (sans interaction de l'utilisateur). Les polices Web peuvent provoquer des décalages de mise en page si le texte invisible clignote lors du téléchargement et du rendu.
Comment s'assurer que le texte reste visible pendant le chargement des polices Web ?
Cet instant particulier est appelé "Flash of Invisible Text" (FOIT). Le message d'erreur "Ensure text stays visible during Webfont load" apparaît à cause de ce FOIT, qui est responsable de son apparition.
Affichage de la police : swap
La propriété font-display est un descripteur CSS accessible dans tous les navigateurs Web contemporains. Le descripteur font-display examine si la police a été téléchargée ou non et la date de son téléchargement pour décider de la manière dont la police doit être affichée. Par exemple, une règle qui utilise @font-face fait appel à 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 swap pour éviter que FOIT ne se produise, et utilisez la valeur swap pour vous assurer que le texte s'affiche à l'écran aussi rapidement que possible.
Utilisez le plugin Swap Google Fonts Display de WordPress pour automatiser cette opération. Elementor a une fonction intégrée pour l'échange de polices Google. D'autres plugins d'optimisation tels que WP Rocket, Flyingpress, Perfmatters offrent cette fonction d'emblée.
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 les CLS.
Conclusion
Ce guide explique comment résoudre le problème de l'"éclair de texte invisible" sur page speed insight en s'assurant que le texte reste visible pendant le chargement de Webfont.
Le temps de chargement et la vitesse des pages sont des facteurs importants pour offrir une bonne expérience aux utilisateurs, et la résolution de ce problème peut améliorer cette expérience de manière significative. Si une page n'affiche pas tout ce qui la recouvre, 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 vitesse et la stabilité qu'ils souhaitent, vous devez réduire le temps de chargement du contenu de la page.
Accélérez les performances de WordPress grâce à nos services d'optimisation de sites WordPress!