Préchargez les polices facultatives pour éviter les décalages de mise en page et les flashs de texte invisible (FOIT).

À partir de Chrome 83, vous pouvez combiner link rel="preload" et font-display: optional pour supprimer complètement le jank de mise en page

Houssein Djirdeh

En optimisant les cycles de rendu, Chrome 83 élimine le changement de mise en page lors du préchargement des polices facultatives. La combinaison de <link rel="preload"> et de font-display: optional est le moyen le plus efficace de garantir l'absence de jank de mise en page lors du rendu des polices personnalisées.

Compatibilité du navigateur

Consultez les données de MDN pour obtenir des informations à jour sur la compatibilité entre les navigateurs :

• <link rel="preload">
• font-display

Rendu des polices

Le changement de mise en page, ou réagencement, 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 le rendu des polices Web peuvent directement entraîner des changements de mise en page de deux manières :

• Une 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 de texte invisible").

La propriété CSS font-display permet de modifier le comportement de rendu des polices personnalisées grâce à différentes valeurs compatibles (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. Toutefois, chacune de ces valeurs compatibles peut déclencher un réagencement 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 périodes pour gérer les polices qui doivent être téléchargées avant de pouvoir être affichées :

• Block : affiche du texte "invisible", mais passe à la police Web dès qu'elle a fini de se charger.
• Swap : affiche du texte à l'aide d'une police système de remplacement, mais passe à la police Web dès qu'elle a fini de se charger.
• Fail : affiche du texte à 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 les 100 ms, la police de remplacement est utilisée et aucun échange n'a lieu.

Toutefois, 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.

Chrome affiche la page deux fois dans les deux cas, que la police de remplacement soit utilisée ou que la police personnalisée ait fini de se charger à temps. Cela provoque un léger scintillement de texte invisible et, dans les cas où une nouvelle police est affichée, un jank 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 de rendu des polices facultatives préchargées avec <link rel="preload'>. Au lieu de cela, le rendu est bloqué jusqu'à ce que la police personnalisée ait fini de se charger ou qu'une certaine période se soit écoulée. Cette période de délai est actuellement définie sur 100 ms, mais elle pourra être modifiée prochainement pour optimiser les performances.

Le préchargement des polices facultatives dans Chrome élimine le risque de jank de mise en page et de flash de texte sans style. Cela correspond au comportement requis, comme spécifié dans le module de polices CSS de niveau 4, où les polices facultatives ne doivent jamais entraîner de réagencement et où les user-agents peuvent retarder le rendu pendant une période appropriée.

Bien qu'il ne soit pas nécessaire de précharger une police facultative, cela augmente considérablement les chances qu'elle se charge avant le premier cycle de rendu, 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 concernant le préchargement des polices facultatives avec ces nouvelles optimisations. Signalez un problème si vous rencontrez des difficultés ou si vous souhaitez faire des suggestions de fonctionnalités.