Éviter le texte invisible lors du chargement des polices

Katie Hempenius

Barry Pollard

Quel est l'intérêt pour vous ?

Les polices sont souvent des fichiers volumineux dont le chargement prend du temps. Pour faire face à ce problème, certains navigateurs masquent le texte jusqu'à ce que la police se charge (le "flash du texte invisible").

La métrique LCP (Largest Contentful Paint) peut être retardée en attendant que le texte s'affiche. Si vous optimisez les performances, vous devez éviter le "flash du texte invisible" (FOIT) et présenter immédiatement le contenu aux utilisateurs à l'aide d'une police système, qui crée un "flash de texte sans style" (FOUT).

Paramètres par défaut du navigateur pour l'affichage des polices

Voici les comportements de chargement de police par défaut des navigateurs courants:

Afficher le texte immédiatement

Ce guide décrit deux façons d'afficher du texte dès que possible: la première est simple et offre une bonne compatibilité avec les navigateurs. La deuxième approche est approfondie, mais peut vous fournir davantage d'options. Le meilleur choix pour votre site Web dépend de vos exigences.

Option 1: Utiliser font-display

font-display est une API permettant de spécifier la stratégie d'affichage des polices. swap indique au navigateur que le texte utilisant cette police doit s'afficher immédiatement avec une police système. Une fois que la police personnalisée est prête, la police système est remplacée.

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

Si un navigateur n'est pas compatible avec font-display, contrairement à tous les navigateurs récents, il continue de suivre son comportement par défaut pour le chargement des polices.

Option 2: Attendre que les polices personnalisées soient chargées avant d'utiliser les polices personnalisées

Avec un peu plus de travail, vous pouvez envisager une approche plus personnalisée.

Cette approche se décompose en trois parties:

• N'utilisez pas de police personnalisée lors du chargement initial de la page. Pour ce faire, refactorisez votre CSS pour qu'il n'utilise pas de polices personnalisées au départ. Ainsi, le navigateur affiche immédiatement le texte à l'aide d'une police système.
• détecter le moment où votre police personnalisée est chargée à l'aide de l'API CSS Font Loading ;
• Modifiez le style de la page pour utiliser la police personnalisée.

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

Pour ce faire, vous pouvez également utiliser la bibliothèque FontFaceObserver, dont l'API est plus facile à utiliser pour certains.

Cela permet de prendre en compte un certain nombre d'éléments supplémentaires lors du chargement des polices. Par exemple, toutes les polices peuvent être chargées en même temps, en évitant plusieurs mises en page lors du chargement de chaque police. Les sites peuvent également choisir de ne pas charger les polices pour les utilisateurs dont la connexion est plus lente ou pour ceux utilisant l'option Enregistrer les données.

Valider

Exécutez Lighthouse afin de vérifier que le site utilise font-display: swap pour afficher le texte:

1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
2. Cliquez sur l'onglet Lighthouse.
3. Assurez-vous que la case Performances est cochée dans la liste Catégories.
4. Cliquez sur le bouton Generate report (Générer un rapport).

Vérifiez que l'audit Assurez-vous que le texte reste visible pendant le chargement des polices Web est validé.