Texte visible pendant le chargement

Silktide vérifie si votre texte reste 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 face à une page sans aucun mot.

Pourquoi c’est important

Les fichiers de polices sont souvent volumineux et, pendant leur téléchargement, un navigateur qui n’a pas reçu d’instruction contraire peut rendre le texte utilisant cette police invisible. Sur une connexion lente, ce « flash de texte invisible » peut durer des 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.

La partie frustrante est que le texte est déjà là. Une ligne de par police indique au navigateur de l’afficher avec 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 avec une police système et bascule lorsque la police personnalisée arrive :

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

Pour les polices chargées depuis 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 proches de votre police personnalisée, afin que le basculement provoque le moins de mouvement possible — voir Décalages de mise en page.

Comment Silktide teste ceci

Charger 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.
Examiner chaque police personnalisée utilisée par la page et vérifier si sa règle @font-face maintient le texte visible pendant le chargement de la police.
Signaler chaque fichier de police qui masque le texte, avec une estimation de la durée pendant laquelle le texte est resté invisible.
Noter la page selon le temps total qui pourrait être économisé : environ 100 millisecondes fait baisser la note, et 200 millisecondes ou plus est considéré comme 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 la correction se situe généralement dans la manière de la demander : la plupart des services de polices acceptent une option d’affichage dans l’URL ou proposent un code d’intégration mis à jour. Si un fournisseur ne permet pas 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

Avec la police en cache, ou sur une connexion rapide, l’intervalle est trop court pour être remarqué — ce contrôle est important pour les nouveaux visiteurs sur des réseaux plus lents. Il existe aussi un compromis à connaître : avec swap, ces visiteurs voient brièvement la police de secours à la place. Un bref changement de police est presque toujours préférable à un texte manquant.

Nous utilisons une police d’icônes

Le basculement d’une police d’icônes affiche des caractères de remplacement à la place des icônes, ce qui peut paraître cassé. 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.