Texte visible pendant le chargement

Silktide vérifie si votre texte demeure lisible pendant le téléchargement des polices personnalisées. Certaines configurations de polices amènent les navigateurs à masquer complètement le texte jusqu’à l’arrivée du fichier de police, laissant les visiteurs devant une page sans aucun mot.

Pourquoi c’est important

Les fichiers de police sont souvent volumineux et, pendant qu’un fichier se télécharge, un navigateur qui n’a pas reçu d’instructions contraires peut rendre le texte utilisant cette police invisible. Sur une connexion lente, ce « flash de texte invisible » peut durer plusieurs secondes : la page semble chargée - images et mise en page en place - mais ne dit rien. Les visiteurs ne peuvent pas lire, et les actions basées sur le texte, comme la navigation, sont effectivement absentes.

Le plus frustrant, c’est que le texte est déjà là. Une ligne de par police indique au navigateur d’afficher le texte dans une police de secours jusqu’à ce que la police personnalisée soit prête.

Comment corriger

Ajoutez font-display: swap à chaque règle @font-face, afin que le texte s’affiche immédiatement dans une police système puis bascule lorsque la police personnalisée arrive :

@font-face {
  font-family: 'Pacifico';
  src: url('pacifico.woff2') format('woff2');
  font-display: swap; \/* afficher le texte de secours immédiatement *\/
}

Pour les polices chargées à partir d’un service d’hébergement, utilisez l’option prévue par le service - par exemple un paramètre display=swap dans l’URL de la feuille de style - ou le code d’intégration actuel, qui l’inclut généralement déjà.
Choisissez une police de secours aux proportions semblables à votre police personnalisée, afin que l’échange provoque le moins de déplacement possible - voir Décalages de mise en page.

Comment Silktide teste cela

Charge la page dans un véritable navigateur, en utilisant le type d’appareil, la vitesse de connexion et l’emplacement de test configurés pour vos tests de vitesse.
Examine chaque police personnalisée utilisée par la page et vérifie si sa règle @font-face maintient le texte visible pendant le chargement de la police.
Signale chaque fichier de police qui masque le texte, avec une estimation de la durée pendant laquelle le texte est resté invisible.
Évalue la page en fonction du temps total pouvant être économisé : autour de 100 millisecondes dégrade la note, et 200 millisecondes ou plus est jugé médiocre.

Dépannage

La police provient d’une feuille de style tierce

Vous ne pouvez pas modifier une feuille de style hébergée par un autre service, mais le correctif se trouve habituellement dans la façon dont vous la demandez : la plupart des services de polices acceptent un paramètre d’affichage dans l’URL ou offrent un code d’intégration mis à jour. Si un fournisseur n’offre aucun moyen de définir cela, envisagez d’héberger la police vous-même afin de contrôler la règle.

Je ne vois jamais de texte invisible

Lorsque la police est en cache, ou sur une connexion rapide, l’écart est trop court pour être perceptible - cette vérification est importante pour les nouveaux visiteurs sur des réseaux plus lents. Il y a aussi un compromis à connaître : avec swap, ces visiteurs voient brièvement la police de secours. Un bref changement de police est presque toujours préférable à un texte manquant.

Nous utilisons une police d’icônes

L’échange d’une police d’icônes affiche des caractères de remplacement à l’endroit où les icônes devraient apparaître, ce qui peut sembler brisé. Pour les polices d’icônes en particulier, une courte période de blocage (font-display: block) ou le remplacement de la police par des icônes SVG est souvent le meilleur choix.