L'utilisation des polices est répandue sur la plupart des pages Web et inclut souvent des erreurs. Beaucoup de ces erreurs ont un impact négatif sur le budget de performances Web. Cet article vise à fournir des informations sur l’utilisation des polices Web et à vous aider à améliorer vos performances Web.
Comme le montre la hiérarchie appliquée lors du rendu d'une page Web, les éléments de police peuvent retarder le rendu des autres éléments jusqu'à leur chargement. La gestion correcte de ce délai est importante à la fois pour le Cumulative Layout Shift (CLS) et pour la perception de l'utilisateur.
Le problème avec le chargement des polices
Jusqu'à ce que les polices de la page soient chargées, la visibilité des polices pendant le processus de rendu HTML et CSS varie d'un navigateur à l'autre. Voici un résumé de la façon dont les différents navigateurs gèrent cette situation :
| Navigateur | Comportement par défaut si la police n'est pas prête… |
|---|---|
| Edge | Utilise une police système jusqu'à ce que la police soit prête. Échange la police. |
| Chrome | Masquera le texte pendant 3 secondes maximum. Si le texte n'est toujours pas prêt, utilise une police système jusqu'à ce que la police soit prête. Échange la police. |
| Firefox | Masquera le texte pendant 3 secondes maximum. Si le texte n'est toujours pas prêt, utilise une police système jusqu'à ce que la police soit prête. Échange la police. |
| Safari | Masque le texte jusqu'à ce que la police soit prête. |
Pour résoudre ce problème sans compter sur le comportement du navigateur, le paramètre font-display a été introduit. Actuellement, 92 % des navigateurs prennent en charge le paramètre font-display.
Que fait Font-Display ?
Pendant le processus de chargement des pages, l'apparence des polices peut varier jusqu'à ce qu'elles soient complètement chargées, selon le navigateur. Par exemple, certaines versions du navigateur Safari masquent le texte jusqu'à ce que la police soit chargée. Le affichage des polices : échange Le paramètre CSS standardise ce comportement en affichant le texte à l'aide d'une police système jusqu'à ce que les fichiers de police soient chargés. Une fois les polices chargées, la police système est remplacée par la police prévue. Voici un exemple d'utilisation :
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Préchargement des polices
En utilisant pour charger les polices avant que le chemin de rendu critique puisse éviter les espaces pendant le chargement des polices.
BONUS : Approche industrielle de l'utilisation des polices
Selon les données de SimilarTech, examinons une tendance importante et un aperçu du monde Internet. Le premier graphique ci-dessous montre l'utilisation des polices sur les 10,000 100,000 premières pages, et le deuxième graphique montre l'utilisation des polices sur les XNUMX XNUMX premiers sites. Examinons d'abord ces graphiques :
Il existe une différence de 5 % dans l'utilisation de Google Font et Font Awesome entre les 10,000 100,000 meilleurs sites et les XNUMX XNUMX meilleurs sites.. Cela nous indique que les 10,000 XNUMX meilleurs sites ont optimisé leur utilisation des polices. Nous recommandons d’examiner ce sujet comme étant un sujet digne d’intérêt. Réfléchissez à la manière dont vous pouvez implémenter des polices Web avec vos propres solutions.
BONUS 2 : Statistiques d'utilisation de Google Font et Font Awesome
En référence au premier bonus, nous vous proposons d'examiner les deux graphiques montrant l'étendue numérique des bibliothèques de polices les plus utilisées. Le nombre de domaines uniques ici dépasse les millions, et ces millions représentent vos concurrents SEO. Utiliser ces bibliothèques mieux et de manière plus optimale que d’autres peut vous aider à vous démarquer.
En suivant ces conseils et en optimisant votre utilisation des polices, vous pouvez améliorer considérablement vos performances Web et votre expérience utilisateur.
