À partir de Chrome 83, link rel="preload" et font-display: optional peuvent être combinés pour supprimer complètement les à-coups dans la mise en page.
En optimisant les cycles de rendu, Chrome 83 élimine le décalage de mise en page lors du préchargement des polices facultatives.
Combiner <link rel="preload"> avec font-display: optional est le moyen le plus efficace de garantir l'absence d'à-coups lors de l'affichage des polices personnalisées.
Compatibilité du navigateur
Consultez les données MDN pour obtenir des informations à jour sur la prise en charge de différents navigateurs:
Rendu des polices
Le décalage de mise en page, ou remise en page, se produit lorsqu'une ressource d'une page Web change de manière dynamique, entraînant un "changement" du contenu. La récupération et l'affichage des polices Web peuvent directement entraîner des décalages de mise en page de l'une des deux manières suivantes:
- La police de remplacement est remplacée par une nouvelle police ("flash de texte sans style").
- Le texte "invisible" s'affiche jusqu'à ce qu'une nouvelle police soit affichée sur la page ("flash du texte invisible").
La propriété CSS font-display permet de modifier le comportement d'affichage des polices personnalisées via une plage de valeurs acceptées (auto, block, swap, fallback et optional). Le choix de la valeur à utiliser dépend du comportement à privilégier pour les polices chargées de manière asynchrone. Cependant, chacune de ces valeurs acceptées peut déclencher la remise en page de l'une des deux manières listées ci-dessus, jusqu'à présent.
Polices facultatives
La propriété font-display utilise une chronologie de trois points pour gérer les polices qui doivent être téléchargées avant de pouvoir être affichées:
- Bloquer:le texte est rendu "invisible", mais la police Web est utilisée dès que le chargement est terminé.
- Intervertir:affichez le texte à l'aide d'une police système de remplacement, mais passez à la police Web dès la fin du chargement.
- Échec:affichez le texte en utilisant une police système de remplacement.
Auparavant, les polices désignées par font-display: optional avaient une période de bloc 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 les 100 ms, elle est utilisée et aucun remplacement n'est effectué.
font-display: optional précédent dans Chrome lorsque la police est téléchargée après le bloc de 100 msToutefois, si la police est téléchargée avant la fin du délai de 100 ms, la police personnalisée est affichée et utilisée sur la page.
font-display: optional précédent dans Chrome lorsque la police est téléchargée avant le bloc de 100 msChrome affiche à nouveau la page deux fois dans les deux cas, que la police de remplacement soit utilisée ou que le chargement de la police personnalisée se termine à temps. Cela provoque un léger clignotement du texte invisible et, dans le cas où 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 disque du navigateur et peut se charger bien avant la fin de la période de blocage.
Les optimisations ont été introduites dans Chrome 83 pour supprimer complètement le premier cycle d'affichage des polices facultatives préchargées avec <link rel="preload'>.
L'affichage est bloqué jusqu'à la fin du chargement de la police personnalisée ou un certain temps. Ce délai avant expiration est actuellement défini sur 100 ms, mais il est possible qu'il change 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 le bloc 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 le bloc de 100 ms (pas de flash de texte invisible)Le préchargement des polices facultatives dans Chrome élimine les risques d'à-coups et de flash de texte sans style. Cela correspond au comportement requis, comme spécifié dans le module de niveau 4 des polices CSS, où les polices facultatives ne doivent jamais entraîner une nouvelle mise en page, et les user-agents peuvent retarder le rendu pendant un certain temps.
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 souhaite connaître votre avis sur le préchargement des polices facultatives grâce à ces nouvelles optimisations. Signalez un problème si vous rencontrez des problèmes ou si vous souhaitez envoyer des suggestions de fonctionnalités.