Affichage de la police
L' Affichage de la police signale les pages où les polices Web personnalisées masquent le texte pendant leur chargement, provoquant un flash de texte invisible (FOIT) et nuisant aux Core Web Vitals.
Envisagez de définir font-display sur swap ou optional pour vous assurer que le texte est toujours visible. swap peut être encore optimisé pour atténuer les décalages de mise en page avec des remplacements de métriques de police.
Comprendre l'affichage des polices
Les textes de votre site web seront masqués aux visiteurs de votre site s'ils utilisent une police web qui n'est pas installée sur leur ordinateur (comme Google Fonts, Font Awesome ou Adobe Font qui peuvent être chargées avec la déclaration @font-face) jusqu'à ce que le navigateur ait fini de télécharger la police correcte à utiliser. Cela provoque des problèmes d'affichage et a un impact négatif sur les performances du site.
Pour éviter que cela ne se produise, l'attribut font‑display: swap peut être utilisé, pour indiquer au navigateur d'afficher d'abord une police de secours (la police système la plus proche), puis de la remplacer par la police personnalisée lorsqu'elle est prête. Cela permet d'éliminer le FOIT et de réduire le décalage cumulatif de la mise en page (CLS), ce qui contribue à améliorer les performances du site.
Comment améliorer l'affichage des polices avec WP Rocket
- Supprimer les ressources CSS inutilisées : applique l'attribut
font-display: swapaux polices dans le CSS utilisé résultant. - Optimiser les Google Fonts : Cette fonctionnalité est activée par défaut et ajoute l'attribut
font-display: swapaux Google Fonts incluses dans la requête combinée. - Précharger les polices : indique au navigateur de récupérer rapidement les polices essentielles, ce qui réduit le délai d'échange.
- Minifier les fichiers CSS : Les fichiers dont le nom contient
.minet qui contiennent également une règle@font-faceseront optimisés. WP Rocket traitera toutes les règles CSS non minifiées et appliquera l'attributfont-display: swapaux polices.