Soutenu par un motif génial.
Pour en savoir plus, consultez notre Seahawk Blog.

Comment s'assurer que le texte reste visible pendant le chargement de la police Web sur WordPress ?

Comment s'assurer que le texte reste visible pendant le chargement de la police Web sur WordPress ?

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.

Ensure-text-remains-visible-during-webfont-load-PageSpeed-Insights-warning
Avertissement de PageSpeed Insights

Comment 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.

font-display-swap-format
l'échange de l'affichage des polices règlera le problème de FOIT

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!

Articles connexes

Dans notre monde interconnecté, la capacité à communiquer efficacement dans différentes langues est encore plus cruciale

Il est essentiel d'effectuer un test de convivialité sur les sites WordPress, car cela permet d'obtenir des informations précieuses sur les points suivants

Les champs avancés de WordPress sont utiles pour les propriétaires de sites car ils permettent de stocker des données supplémentaires et des informations sur le site.

Komal Bothra 21 mars 2024

Les meilleurs sites pour embaucher des développeurs et designers WordPress en 2024

Si vous cherchez à embaucher le meilleur développeur WordPress ou un expert en sites web WordPress

WordPress
Komal Bothra 21 mars 2024

Elementor bloqué sur l'écran de chargement ? Voici 25+ méthodes pour y remédier !

Elementor simplifie le processus de développement de pages web dans WordPress. Cependant, il peut arriver que vous rencontriez

WordPress
Komal Bothra Le 19 mars 2024

Comment configurer votre adresse e-mail professionnelle GoDaddy sur Gmail (étapes simples)

Jongler avec plusieurs comptes de messagerie en même temps peut être accablant. Si vous vous noyez dans les

Tech

Démarrer avec Seahawk

Inscrivez-vous dans notre application pour consulter nos tarifs et obtenir des réductions.