Comment réparer l'erreur "Assurez-vous que le texte reste visible pendant le chargement de la police Web" dans PageSpeed

Obtenez-vous l'erreur « Assurez-vous que le texte reste visible pendant le chargement de la police Web » lors de la vérification de l'aperçu de la vitesse de la page de Google et ne savez pas comment résoudre ce problème? Généralement, je sais comment résoudre ce problème sur un site Web PHP ou HTML personnalisé, mais en ce qui concerne WordPress, j'ai également eu du mal.

Donc, ici, dans ce guide, nous parlerons de la façon dont nous pouvons résoudre ce problème dans WordPress (je partagerai également les étapes pour résoudre ce problème dans les sites PHP et HTML personnalisés) et augmenter le score de vitesse de votre page en supprimant cette erreur.

Pourquoi affiche-t-il l'erreur "Assurez-vous que le texte reste visible pendant le chargement de la police Web" dans PageSpeed

Lors du test de votre site Web sur PageSpeed ​​Insight de Google, vous avez peut-être rencontré un problème d'erreur "Assurez-vous que le texte reste visible pendant le chargement de la police Web", et en cliquant sur l'erreur, il affichera les URL complètes des fichiers de police.

Comme vous pouvez le voir dans l'image ci-dessus, j'obtiens également l'erreur "Assurez-vous que le texte reste visible pendant le chargement de la police Web" sur ce site Web, et lorsque je clique dessus, les URL complètes des fichiers Google Font s'affichent.

Pourquoi affiche-t-il une erreur ?

Lorsqu'un site Web se charge dans le navigateur et détecte un fichier de police personnalisé appliqué à un texte, il attend que la police soit téléchargée et jusqu'à ce moment, le texte est invisible. Une fois les fichiers de police personnalisés téléchargés, ils s'appliquent immédiatement au site Web, et c'est ce qu'on appelle le flash de texte invisible.

Comment réparer le flash du texte invisible ?

La correction du clignotement du texte invisible peut également corriger l'erreur "Assurez-vous que le texte reste visible pendant le chargement de la police Web" sur votre site Web, et résoudre ce problème est très facile.

Vous pouvez facilement résoudre ce problème en ajoutant

 font-display : permuter ;

code dans votre courant

 @ font-face {

}

propriété CSS.

Mais qu'est-ce que @font-face ?

Une @font-face est une simple règle CSS à travers laquelle vous pouvez appliquer une police personnalisée à un texte. Il a des extensions comme woff2, woff, ttf, etc. Par exemple, un code @font-face ressemblera à ceci :

 @ font-face {

famille de polices : Roboto,sans-serif ;

font-display : permuter ; // ---> Cela résoudra ce problème.

style de police : normal ;

poids de la police : 400 ;

src : url(Roboto.woff2);

}

Maintenant, nous appliquons cette police dans un paragraphe en utilisant ;

 p {

famille de polices : Roboto, sans empattement ;

taille de police : 18 px ;

}

Lorsqu'un site Web se charge, il indique que la balise de paragraphe a une police " Roboto " appliquée, et il commence instantanément à télécharger la police utilisée dans une balise de paragraphe. Jusqu'à ce qu'il télécharge la police, le texte reste invisible.

C'est pourquoi il affiche l'erreur « Assurez-vous que le texte reste visible pendant le chargement de la police Web» dans la vitesse de la page et l'ajout de font-display: swap; dans votre @font-face CSS actuel peut résoudre ce problème.

Comment résoudre ce problème dans WordPress

Si vous utilisez WordPress et qu'il affiche cette erreur dans l'aperçu de la vitesse de la page, vous pouvez facilement résoudre ce problème en quelques étapes simples. J'ai partagé les étapes pour résoudre cette erreur sur les polices locales et les polices Google.

Solution pour les polices Google

Initialement, Google Fonts n'ajoutera pas le font-display: swap; règle à leur police, mais maintenant ils supportent un nouveau paramètre de requête pour appliquer le font-display : swap; en ajoutant le paramètre &display=swap à la fin du fichier de police google.

Voici à quoi ça ressemble;

Si vous êtes un développeur de thème ou si vous savez comment modifier des fichiers de thème dans WordPress, vous pouvez facilement ajouter le paramètre &display=swap dans votre fichier de police Google.

Mais si vous n'êtes pas à l'aise avec l'édition des fichiers de thème WordPress, vous pouvez toujours utiliser divers plugins comme Asset CleanUp pour ajouter ce paramètre et résoudre le problème "s'assurer que le texte reste visible pendant le chargement de Webfont".

Comment résoudre ce problème à l'aide du plug-in "Asset CleanUp"

Pour appliquer le paramètre display=swap dans votre fichier Google Fonts, vous devez télécharger et installer le plugin Asset CleanUp de la bibliothèque WordPress, qui est disponible gratuitement.

Une fois que vous avez téléchargé et activé le plugin, cliquez sur l'option " Asset CleanUp " dans votre panneau d'administration WordPress> puis cliquez sur les " paramètres " sous "Asset Cleanup" pour ouvrir la page d'optimisation.

Une fois sur la page des paramètres , cliquez sur l'option « Google Fonts ». Lorsque vous cliquez sur l'option Google Fonts , cela ouvrira davantage les paramètres à partir desquels vous pourrez facilement gérer divers paramètres pour optimiser les fichiers de polices Google.

Certains de ces paramètres peuvent inclure ;

Une fois que vous êtes sur les paramètres des fichiers de polices de Google, sur les paramètres " Apply font-display: CSS property value " et changez-le de " Ne pas appliquer (par défaut) " à " swap (le plus utilisé) " et il ajoutera le &display= paramètre d'échange à tous vos fichiers de polices Google.

Solution pour les polices de thèmes et de plugins

La plupart du temps, votre thème ou plugin WordPress charge d'autres polices comme font-awesome ou des polices d'icônes et il montre également le même problème dans Google PageSpeed ​​Insight.

C'est aussi une solution facile, mais cela nécessite un peu de connaissances en édition de WordPress. Si vous n'êtes pas à l'aise avec l'édition des codes, vous pouvez également utiliser la version premium du plugin « Asset CleanUp Pro » pour ajouter automatiquement le font-display : swap ; Propriété CSS dans les feuilles de style de votre thème WordPress ou plugins.

Pour résoudre ce problème en utilisant Asset CleanUp Pro, cliquez sur l'option " Asset CleanUp " dans votre panneau d'administration WordPress> puis cliquez sur les " paramètres " sous "Asset Cleanup" pour ouvrir la page d'optimisation.

Une fois que vous êtes sur la page " Asset CleanUp " > " Paramètres ", cliquez sur l'option " Polices locales " pour ouvrir les paramètres de personnalisation des polices locales.

Une fois que les paramètres de personnalisation " Polices locales " ont été ouverts dans votre navigateur, sélectionnez " swap (le plus utilisé) " dans l'option de sélection donnée sous " Appliquer font-display : valeur de la propriété CSS " pour ajouter automatiquement font-display : swap ; dans toutes vos feuilles de style.

Emballer

Dans ce guide, nous avons fait de notre mieux pour expliquer comment vous pouvez résoudre le problème "s'assurer que le texte reste visible pendant le chargement de la police Web" ou "flash de texte invisible" sur l'aperçu de la vitesse de la page.

Le temps de chargement et la vitesse de la page sont des facteurs importants pour offrir une bonne expérience utilisateur, et la résolution de ce problème peut offrir une bien meilleure expérience utilisateur. Et une page ne sera pas considérée comme chargée à moins qu'elle ne montre tout ce qui la recouvre.

Ainsi, vous devez réduire le temps de chargement du contenu sur la page afin que les pages n'expirent pas et que les utilisateurs puissent obtenir l'équilibre, la vitesse et la stabilité qu'ils souhaitent. Si vous souffrez également d'une vitesse de site Web lente, vous pouvez consulter notre article sur l'optimisation de la vitesse du site Web pour l'optimiser correctement.