Assurez-vous que le texte reste visible pendant le chargement des polices Web

Les polices sont souvent de gros fichiers dont le chargement est lent. Certains navigateurs masquent le texte jusqu'à ce que la police se charge, ce qui entraîne un flash de texte invisible (FOIT).

Pourquoi l'audit de l'affichage des polices Lighthouse échoue-t-il ?

Lighthouse signale toutes les URL de polices susceptibles de clignoter du texte invisible:

Capture d'écran de l'audit "S'assurer que le texte reste visible pendant le chargement des polices Web" de Lighthouse

Éviter d'afficher du texte invisible

L'API font-display indique comment une police s'affiche lorsqu'elle est utilisée dans un style font-face. Les valeurs font-display suivantes indiquent au navigateur d'utiliser une police système si la police personnalisée n'est pas prête:

  • swap
  • optional
  • fallback

Exemple de CSS

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Exemple Google Fonts

Ajoutez le paramètre &display=swap/&display=optional/&display=fallback à la fin de votre URL Google Fonts:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Éviter les changements de mise en page causés par les polices différées

L'affichage temporaire d'une police système remplace un FOIT par un flash de texte sans style (FOUT). Cela améliore le FCP et le LCP en affichant le contenu plus tôt, mais le FOIT et le FOUT auront tous deux le même impact sur le CLS lorsque la police personnalisée remplacera la police système temporaire.

L'impact du chargement de polices sur le CLS peut être atténué à l'aide de préchargements en association avec font-display: optional. Toutefois, une utilisation excessive des préchargements peut avoir un impact négatif sur les métriques de charge. Nous vous recommandons d'effectuer des tests A/B pour vous assurer que le préchargement des polices n'entraîne aucune régression des performances.

Conseils spécifiques à la pile

Drupal

Lorsque vous définissez des polices personnalisées dans votre thème, vous pouvez le spécifier avec @font-display.

Magento

Indiquez @font-display lorsque vous définissez des polices personnalisées.

Ressources