À partir de Chrome 83, vous pouvez combiner link rel="preload" et font-display: optional pour supprimer complètement les à-coups de mise en page.
En optimisant les cycles d'affichage, Chrome 83 élimine les changements de mise en page lors du préchargement des polices facultatives.
La combinaison de <link rel="preload"> avec font-display: optional est le moyen le plus efficace de garantir l'absence de saccades de mise en page lors de l'affichage de polices personnalisées.
Compatibilité du navigateur
Consultez les données de MDN pour obtenir des informations à jour sur la compatibilité entre les navigateurs :
Affichage de la police
Un décalage de mise en page, ou une nouvelle mise en page, se produit lorsqu'une ressource d'une page Web change de manière dynamique, ce qui entraîne un "décalage" du contenu. La récupération et l'affichage des polices Web peuvent directement entraîner des décalages de mise en page de deux manières :
- Une police de remplacement est remplacée par une nouvelle police ("flash of unstyled text" ou FOUT).
- Le texte "invisible" s'affiche jusqu'à ce qu'une nouvelle police soit affichée sur la page ("flash de texte invisible").
La propriété CSS font-display permet de modifier le comportement d'affichage des polices personnalisées via une gamme de différentes valeurs acceptées (auto, block, swap, fallback et optional). Le choix de la valeur à utiliser dépend du comportement préféré pour les polices chargées de manière asynchrone. Cependant, chacune de ces valeurs acceptées peut déclencher une réorganisation de l'une des deux manières listées ci-dessus, jusqu'à maintenant !
Polices facultatives
La propriété font-display utilise une chronologie de trois périodes pour gérer les polices qui doivent être téléchargées avant de pouvoir être affichées :
- Block : affiche un texte "invisible", mais passe à la police Web dès que le chargement est terminé.
- Swap : affiche le texte à l'aide d'une police système de remplacement, mais passe à la police Web dès qu'elle a fini de se charger.
- Échec : le texte est affiché à l'aide d'une police système de remplacement.
Auparavant, les polices désignées par font-display: optional avaient une période de blocage de 100 ms et aucune période d'échange. Cela signifie que le texte "invisible" s'affiche très brièvement avant de passer à une police de remplacement. Si la police n'est pas téléchargée dans un délai de 100 ms, la police de remplacement est utilisée et aucun échange n'a lieu.
font-display: optional dans Chrome lorsque la police est téléchargée après la période de blocage de 100 msToutefois, si la police est téléchargée avant la fin de la période de blocage de 100 ms, la police personnalisée est affichée et utilisée sur la page.
font-display: optional dans Chrome lorsque la police est téléchargée avant la période de blocage de 100 msChrome affiche à nouveau la page deux fois dans les deux cas, que la police de remplacement soit utilisée ou que la police personnalisée se charge à temps. Cela provoque un léger scintillement du texte invisible et, lorsqu'une nouvelle police est affichée, un à-coup de mise en page qui déplace une partie du contenu de la page. Cela se produit même si la police est stockée dans le cache du disque du navigateur et peut se charger bien avant la fin de la période de blocage.
Des optimisations ont été apportées à Chrome 83 pour supprimer entièrement le premier cycle d'affichage des polices facultatives préchargées avec <link rel="preload'>.
Au lieu de cela, l'affichage est bloqué jusqu'à ce que la police personnalisée ait fini de se charger ou qu'un certain laps de temps se soit écoulé. Ce délai avant expiration est actuellement défini sur 100 ms, mais il est possible qu'il soit modifié dans un avenir proche pour optimiser les performances.
font-display: optional dans Chrome lorsque les polices sont préchargées et que la police est téléchargée après la période de blocage de 100 ms (pas de flash de texte invisible)
font-display: optional dans Chrome lorsque les polices sont préchargées et que la police est téléchargée avant la période de blocage de 100 ms (pas de flash de texte invisible)Le préchargement des polices facultatives dans Chrome élimine le risque de saccades de mise en page et de flash de texte sans style. Cela correspond au comportement requis, tel que spécifié dans le module de polices CSS de niveau 4, où les polices facultatives ne doivent jamais entraîner de réorganisation et où les user-agents peuvent retarder l'affichage pendant une période appropriée.
Bien qu'il ne soit pas nécessaire de précharger une police facultative, cela améliore considérablement les chances qu'elle se charge avant le premier cycle d'affichage, en particulier si elle n'est pas encore stockée dans le cache du navigateur.
Conclusion
L'équipe Chrome aimerait connaître votre expérience de préchargement des polices facultatives avec ces nouvelles optimisations en place. Signalez un problème si vous rencontrez des difficultés ou si vous souhaitez nous faire part de suggestions de fonctionnalités.