Font Fallback et CLS

…dans le contexte de Core Web Vitals

Le chargement d’une police personnalisée (une police qui n’est pas connue par défaut de tous les navigateurs) peut facilement entraîner des retards dans la séquence de chargement et un problème CLS (Cumulative Layout Shift). C’est le cas lors du premier chargement de page sur votre site, jusqu’à ce que la police soit mise en cache par le navigateur.

Vous pouvez essayer de précharger et/ou de pousser la police personnalisée, mais il y aura toujours un moment où le navigateur rendra le corps avec une police par défaut. Cela est particulièrement vrai sur les appareils lents ou sur une connexion lente. Vous pouvez masquer l’ensemble du corps jusqu’à ce que la police soit chargée, mais les scores FCP (First Contentful Paint) et LCP (Large Contentful Paint) seront alors fortement pénalisés.

Vous pouvez également utiliser des astuces CSS telles que font-display: optional, mais la police peut ne pas être chargée du tout lors d’une connexion lente : le navigateur a l’instruction de l’ignorer après un certain délai (court).

Cette dernière solution n’empêche pas l’impact sur le score CLS : lors de la permutation de la police, la taille du contenu peut changer et la mise en page peut « changer ».

Un autre mécanisme peut être utilisé pour éviter ces 2 problèmes (délai de chargement des polices et CLS) : utiliser une police de secours.

L’idée de la police de secours est de mettre à l’échelle une police par défaut du navigateur de sorte que, lorsqu’elle est appliquée au contenu d’une page, le contenu occupe le même « espace » avec la police de secours et avec la police personnalisée. Ainsi, vous pouvez échanger l’un avec l’autre sans modifier la disposition. Si vous utilisez une police par défaut qui ressemble suffisamment à la police personnalisée, ces quelques millisecondes de premier chargement de page ressembleront beaucoup à l’expérience que vous souhaitez fournir avec la police personnalisée. Vous pouvez ensuite différer le chargement de la police personnalisée ou au moins la rendre non bloquante dans la séquence de chargement.

Extension font-fallback

Nous avons créé une extension Chrome pour aider à calculer le remplacement des polices.

Lorsque vous ouvrez l’extension sur une page, elle analyse les faces de police utilisées sur cette page : une face de police est une combinaison de la famille de polices et de l’épaisseur de la police. Désormais, pour chacune de ces faces de police, vous pouvez sélectionner une police de navigateur par défaut et exécuter le calcul de remplacement de la police. Pour chaque police, l’extension calcule la size-adjustment de la police par défaut du navigateur qui est requise afin que le contenu ait la même largeur pour les deux polices.
Le calcul se fait uniquement sur la largeur, car la hauteur doit être contrôlée par la line-height : vous devez définir une line-height sur votre site pour que la police ne puisse pas décider de la hauteur du texte. C’est le cas pour les paragraphes, les en-têtes, les listes…

Remarque : avec les kits de polices, il existe une tendance à charger de nombreuses faces de police qui ne sont jamais utilisées (ou utilisées ailleurs sur le site que sur la page active). L’extension indique également le nombre total de fichiers chargés. C'est également un bon indicateur si une optimisation peut être effectuée : optimisez le kit de polices en réduisant les faces de polices qu'il délivre, vous pouvez économiser beaucoup d'octets à transférer !

Une fois le travail de calcul effectué, vous pouvez copier le CSS calculé et le coller dans votre CSS principal.

Les familles de polices générées doivent être ajoutées après la police personnalisée dans votre font-family CSS : au départ, le navigateur ne trouvera pas la police personnalisée et utilisera la version de secours jusqu’à ce que, ultérieurement, la police personnalisée soit chargée. Comme ils utilisent le même espace, le swap ne génère pas de CLS !

Pour affiner la valeur d’ajustement de la police, vous pouvez également utiliser le panneau de simulation.

Cochez cette case pour remplacer la police personnalisée par la police de remplacement calculée directement dans la page. La saisie de texte vous permet de modifier la valeur size-adjust et de visualiser immédiatement le résultat (vous devez activer la case à cocher chaque fois que vous modifiez la valeur).

Cas Edge

L’extension effectue un calcul basé sur un site existant, avec le contenu existant et les règles CSS. Dans un contexte différent, le size-adjust peut ne pas s’adapter parfaitement et le remplacement des polices peut toujours produire un CLS :

Vous trouverez plus de détails techniques et d’autres outils directement dans le référentiel d’extension : https://github.com/adobe/helix-font-fallback-extension