8 stratégies de chargement de polices pour améliorer vos principaux éléments vitaux Web (2022)

Initialement publié en octobre 2021 et mis à jour pour être complet en octobre 2022

Quand on parle de performances web et notamment de Core Web Vitals (CWV), on dirait presque que les techniques d'optimisation d'images et de JavaScript volent la vedette.

Cependant, il existe un autre acteur à ne pas négliger : les polices Web.

Étant donné qu'il s'agit souvent de fichiers volumineux qui prennent du temps à se charger et peuvent même bloquer le rendu du texte, l'optimisation des polices est un élément essentiel de la stratégie de performance globale.

La typographie est également fondamentale pour une bonne conception, une image de marque, une lisibilité et une accessibilité. Et les polices Web sont celles qui rendent toutes ces choses possibles.

Dans les lignes suivantes, nous verrons comment les polices affectent vos Core Web Vitals et comment vous pouvez optimiser leur chargement.

Commençons!

Ce que vous devez savoir sur le chargement des polices (en bref)

Il n'existe pas une seule technique d'optimisation des polices qui puisse résoudre tous vos problèmes.

C'est peut-être un peu dur, mais c'est la vérité. Le chargement des polices est un grand coupable des performances Web depuis des années. Et toutes les stratégies actuelles de diffusion des polices Web présentent des inconvénients importants.

Pendant un certain temps, si vous vouliez servir des polices Web, vous deviez choisir entre :

• Flash de texte invisible (FOIT) où le texte est caché jusqu'à ce que la police soit téléchargée.

Ou

• Flash of Unstyled Text (FOUT) utilise initialement la police système de secours, puis passe à la police Web lors du téléchargement.

En termes simples, vous pouvez soit obliger vos visiteurs à regarder un écran vide, soit risquer des changements de mise en page inattendus sur votre site Web.

Les deux sont des solutions inacceptables dans le monde actuel de Core Web Vitals.

Fondamentalement, la situation de chargement des polices était :

Ensuite, la propriété font-display a été annoncée.

font-display indique au navigateur comment il doit procéder au rendu du texte lorsque la police Web associée n'a pas été chargée. Il est défini par font-face .

Les navigateurs ont un comportement de chargement de police par défaut lors du rendu de texte utilisant une famille de polices qui n'est pas encore disponible :

Source : web.dev

Le processus de téléchargement de polices est divisé en trois grandes périodes :

• La première période est la période du bloc de police . Si la font-face n'est pas chargée pendant cette période, tout élément tentant de l'utiliser doit à la place s'afficher avec une fonte de secours invisible (FOIT). Si la font-face se charge avec succès durant cette première période, elle est alors utilisée normalement.
• La période de permutation des polices se produit immédiatement après la période de blocage des polices. Si la font-face n'est pas chargée pendant cette période, tout élément tentant de l'utiliser doit à la place s'afficher avec une police (système) de secours (FOUT). Si la font-face se charge avec succès pendant cette période, la police est alors utilisée normalement.
• La période d' échec des polices se produit immédiatement après la période de permutation des polices. Si la police n'est pas encore chargée au début de cette période, elle est marquée comme un échec de chargement, ce qui entraîne un remplacement normal de la police.

Comprendre ces périodes vous permettra d'utiliser plus efficacement les valeurs font-display :

• font-display : auto utilise la stratégie d'affichage des polices utilisée par l'agent utilisateur ;
• font-display: block donne à la police une courte période de bloc de 3 secondes (dans la plupart des cas) et une période de permutation infinie. En d'autres termes, il permute toujours dans la police Web lors du chargement. Utilisez cette valeur lorsque la police est importante pour la page ;
• font-display : swap affiche la police dès son chargement. Semblable à block, cette valeur ne doit être utilisée que lorsque le rendu du texte dans une police particulière est important pour la page ;
• font-display : fallback masque le texte jusqu'à 100 ms, puis n'intervertit la police Web que si elle se charge dans les trois secondes. Si la police n'est pas chargée pendant la période d'échange de trois secondes, la police de secours sera utilisée pour le reste de la durée de vie de la page ;
• font-display : facultatif donne à la police une période de bloc minimale de 100 ms. Ensuite, si la police n'est toujours pas disponible, elle reste avec la police de secours et n'est jamais échangée. Fondamentalement, la valeur facultative laisse au navigateur le soin de décider de lancer ou non le téléchargement de la police.

Source : Comment éviter les changements de mise en page causés par les polices Web

Lorsque vous décidez quelle valeur font-display utiliser pour votre site, une bonne règle de base est cette recommandation de Google :

• Si la performance est une priorité absolue : Use font-display : facultatif. Il s'agit de l'approche la plus « performante » : le rendu du texte n'est pas retardé de plus de 100 ms et il est garanti qu'il n'y aura pas de changement de mise en page lié à l'échange de polices.
• Si l'affichage de texte dans une police Web est une priorité absolue : utilisez font-display : swap, mais assurez-vous de fournir la police suffisamment tôt pour qu'elle ne provoque pas de changement de mise en page. »

Comme je l'ai dit plus tôt, il n'existe toujours pas de solution complète qui résout tous les problèmes de police possibles concernant le chargement des polices. Bien que Google lui-même recommande ces étapes, cela ne signifie pas qu'elles sont sans risque.

En fait, certaines des valeurs d'affichage de la police peuvent aggraver vos Core Web Vitals.

Impact des polices sur vos principaux éléments vitaux Web (CLS et LCP)

Si vous connaissez les Core Web Vitals, vous savez probablement que certaines méthodes de chargement de polices peuvent les endommager.

Par exemple, si une police n'a pas été chargée (FOIT), les navigateurs retardent généralement le rendu du texte ( font-display: block ). Dans certains cas, cela retarde le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP).

D'autre part, la pratique de l'échange de polices est bien connue pour provoquer des changements de mise en page inattendus, qui sont directement liés à la métrique Cumulative Layout Shift (CLS).

Passons maintenant en revue les meilleures pratiques de chargement des polices pour contrôler vos métriques CWV.

Éviter les décalages de mise en page lors du chargement des polices (CLS)

Le décalage de mise en page cumulé mesure l'importance des changements de mise en page inattendus sur une page. Des changements de mise en page inattendus se produisent lorsque le contenu de la page se déplace sans intervention de l'utilisateur ni notification préalable :

Deux éléments peuvent entraîner des changements de mise en page lors du processus de récupération et de rendu :

• Une police de secours est remplacée par une nouvelle police (FOUT) ;
• Un texte "invisible" est affiché jusqu'à ce que la police soit rendue (FOIT).

Pour résoudre ces problèmes, vous pouvez mettre en œuvre certaines des meilleures pratiques suivantes :

1) Combinez le lien rel=preload et font-display : facultatif

L'option de combiner le lien rel=preload avec font-display: optional est disponible depuis Chrome 83, et on dit que c'est un moyen infaillible d'éviter les changements de mise en page.

Comme mentionné précédemment, lorsqu'une police utilise la valeur facultative font-display: , elle dispose de 100 ms pour être téléchargée et exécutée avant que le navigateur ne revienne à la solution de secours.

Si la police est téléchargée avant la marque des 100 ms, la police personnalisée est utilisée sur la page.

Cela conduit le navigateur à restituer la page, ce qui provoque à son tour un léger scintillement du texte invisible.

Dans Chrome 83, le premier cycle de rendu est supprimé pour les polices facultatives qui utilisent le lien rel=preload et il est remplacé par une période de blocage (100 ms) jusqu'à ce que la police personnalisée soit chargée ou que la période se termine.

Maintenant, le processus de chargement de la police ressemble à ceci lorsque la police est préchargée et téléchargée après la période de blocage de 100 ms :

Et comme ceci lorsque la police est préchargée et téléchargée avant la marque des 100 ms :

Cette technique résout à peu près le problème des changements de mise en page inattendus et du clignotement des textes sans style.

2) Utilisez le réglage de la taille

Un autre problème avec l'échange de polices est que parfois, lorsque la police Web se charge, elle déplace la page entière car elle présente une taille de hauteur de boîte légèrement différente.

Mettre le descripteur d' ajustement de la taille dans la règle font-face conduira à un changement visuel minimal et à un échange presque transparent.

Consultez le guide de Google sur l'ajustement de la taille CSS pour @font-face pour savoir comment vous pouvez l'implémenter.

3) Faire en sorte que votre police de secours corresponde à votre police Web

Pour réduire l'effet d'échange, vous pouvez essayer de rendre la police de secours et la police Web aussi similaires que possible. Bien sûr, vous ne pouvez pas éviter complètement les changements, mais vous pouvez essayer de les rendre moins percutants afin qu'ils ne nuisent pas autant à l'expérience utilisateur.

L'application Font Style Matcher de Monica Dinculescu est un outil bien connu pour la correspondance des polices.

Il vous permet de superposer le même texte dans deux polices différentes pour voir à quel point elles sont différentes. Après cela, vous pouvez ajuster leurs paramètres de police pour les aligner plus étroitement.

Malheureusement, comme toute autre technique d'optimisation du chargement des polices, elle comporte ses risques et ses obstacles.

Le problème avec la correspondance des styles de police est que ces styles CSS ne peuvent pas s'appliquer uniquement aux polices de secours. Vous devez donc utiliser JavaScript et l'API FontFace.load pour appliquer ces différences de style lors du chargement de la police Web.

Dans sa conférence de 2018, Zach Leatherman explique cette technique plus en détail :

Assurez-vous que vos polices se chargent aussi rapidement que possible (LCP et FCP)

En ce qui concerne le chargement des polices et l'amélioration de la métrique Largest Contentful Paint, les techniques que nous allons utiliser sont un peu plus générales.

LCP mesure le temps nécessaire au chargement du plus grand élément de contenu au-dessus de la ligne de flottaison (par exemple, texte, image). Tout ce qui est en dessous de 2,5 s est considéré comme un bon temps LCP :

First Contentful Paint (FCP) est une autre métrique qui ne fait pas partie du CWV mais qui pourrait néanmoins être affectée par le chargement de fichiers de polices lourds.

FCP mesure le temps nécessaire au navigateur pour visualiser le premier élément de contenu DOM (par exemple, bloc de texte, image, SVG, élément de toile non vierge) sur une page.

Les deux mesures mesurent la vitesse à laquelle votre site Web peint les éléments du contenu au-dessus de la ligne de flottaison, qui jouent un rôle énorme dans les premières impressions des visiteurs.

S'ils regardent un écran vide pendant un certain temps (FCP), ce ne serait pas une excellente expérience utilisateur. Il en va de même pour attendre trop longtemps que votre élément le plus grand/héros (LCP) soit rendu.

L'optimisation de vos polices Web est un moyen d'améliorer les performances perçues de votre site et de garantir une meilleure expérience utilisateur.

Voici quelques techniques que vous voudrez peut-être essayer :

1) Compressez vos polices

Pour comprendre le fonctionnement de la compression des polices, vous devez connaître l'anatomie d'une police Web.

Une police Web est une collection de glyphes, et chaque glyphe est une forme vectorielle qui décrit une lettre ou un symbole. Bien que les glyphes individuels soient différents, ils contiennent de nombreuses informations similaires qui peuvent être compressées.

Pour pouvoir appliquer la bonne compression, vous devez d'abord connaître les différents formats de police :

• Embedded OpenType (EOT) - Peut être servi aux anciens navigateurs IE (inférieurs à I9). Non compressé par défaut. Vous pouvez appliquer la compression GZIP à cette police.
• TrueType (TTF) - Peut être servi aux anciens navigateurs Android (inférieurs à 4.4). Non compressé par défaut. Vous pouvez appliquer la compression GZIP à cette police.
• Web Open Font Format (WOFF) - Peut être servi à la majorité des navigateurs. Compression intégrée.
• Web Open Font Format 2 (WOFF 2) - Peut être servi aux navigateurs qui le prennent en charge. Il utilise des algorithmes de compression personnalisés pour offrir une réduction de la taille des fichiers d'environ 30 % par rapport aux autres formats.

Ensuite, vous pouvez appliquer la compression GZIP (si nécessaire) en utilisant un outil en ligne ou en effectuant certaines configurations de serveur.

2) Polices en ligne

En général, les polices sont stockées dans une feuille de style CSS externe. Pour utiliser la feuille de style, un lien est placé dans la balise head du balisage HTML comme ceci :

Cependant, l'exécution de fichiers CSS externes prend plus de temps car le navigateur doit d'abord localiser puis télécharger le fichier.

Pour accélérer le processus de chargement des polices, vous pouvez insérer des déclarations de polices et d'autres styles critiques dans la balise head du document principal plutôt que de les conserver dans une feuille de style externe :

Cela permettra au navigateur de localiser et de commencer à rendre la police plus rapidement car il n'a pas besoin d'attendre le téléchargement de la feuille de style externe.

3) Assurez-vous que vos polices sont téléchargées rapidement

Cela semble être un débat sans fin lorsqu'il s'agit de choisir entre des polices auto-hébergées ou de s'appuyer sur des tiers.

Bien que les polices Web soient une excellente option auto-hébergée car ce sont des ressources statiques qui ne sont pas régulièrement mises à jour, s'appuyer sur des ressources tierces n'est pas non plus une mauvaise option.

En fait, le Web Almanac a constaté que certains sites utilisant des polices tierces avaient un rendu plus rapide que les sites utilisant des polices propriétaires :

Source : Archives HTTP

En fin de compte, la chose la plus importante est la suivante : à quelle vitesse vos polices sont-elles téléchargées et rendues ? Et la plupart du temps, les réponses ne dépendent pas de votre approche d'hébergement, mais plutôt du fait que vous ayez ces trois choses en place ou non :

• Réseau de diffusion de contenu (CDN)
• HTTP/2
• Politique de mise en cache Web

Ainsi, au lieu de perdre du temps sur des questions telles que "Dois-je auto-héberger mes polices Web ou non?", Assurez-vous que les éléments les plus importants sont configurés.

4) Pré-connexion à des ressources tierces

Une autre technique qui permettra à vos polices d'être chargées rapidement consiste à utiliser le lien rel=preconnect .

Utilisez l'indicateur de ressource link rel=preconnect pour établir une ou plusieurs connexions précoces avec l'origine tierce.

L'ajout du lien rel=preconnect informe le navigateur de l'intention de votre page d'établir une connexion à un autre domaine et que vous souhaitez que le processus démarre dès que possible. Les ressources se chargeront plus rapidement car le processus de configuration est déjà terminé au moment où le navigateur les demande.

Les conseils de ressources doivent être placés dans la balise head du document.

5) Sous-ensemble vos polices

Pour en revenir au fait qu'une police Web est une collection de glyphes, une chose que vous devez savoir est que certaines polices peuvent inclure des milliers de glyphes. Et la vérité est que votre site ne les utilise pas tous.

Mais…

Le navigateur doit encore les télécharger, ce qui peut ralentir le temps de chargement !

Entrez le sous-ensemble de police.

Le sous-ensemble de polices consiste à réduire vos polices aux seuls glyphes que vous utilisez sur votre site. Les sous-ensembles peuvent générer des économies de taille considérables et conduire à un chargement des polices plus rapide et à de meilleures performances globales.

Une façon de le faire est d'utiliser fontTools qui vous permet de créer des sous-ensembles de polices par listes de caractères arbitraires. Mais pour le faire avec succès et efficacité, vous devez créer un processus solide pour obtenir chaque caractère que vous utilisez sur vos pages Web, ce qui n'est peut-être pas la tâche la plus facile à faire.

Prochainement : après des mois de travail acharné, nous sommes sur le point de publier notre propre fonctionnalité de création de sous-ensembles de polices. Cela permettra aux utilisateurs de NitroPack de créer automatiquement des sous-ensembles de leurs polices et de réduire massivement leurs tailles sans compromettre la conception ou les performances.

Comment NitroPack peut optimiser le chargement de vos polices et les éléments vitaux Web de base

L'amélioration des performances Web peut représenter beaucoup de travail et de maux de tête. C'est pourquoi l'utilisation d'outils et de services peut être très utile.

Par exemple, NitroPack inclut toutes sortes de fonctionnalités différentes qui vous feront gagner beaucoup de temps lors de l'optimisation des polices :

• CDN mondial
• Compression GZIP et Brotli
• Compatibilité HTTP/2
• Chargement différé des polices
• CSS critique

En outre, NitroPack vous permet de configurer le comportement de rendu des polices par défaut.

Pour les utilisateurs du mode manuel, il existe la possibilité de remplacer ce comportement à partir des "Paramètres avancés":

De plus, dans les "Paramètres avancés", vous trouverez également la possibilité d'optimiser votre diffusion CSS :

Nous testons également en permanence différentes configurations de polices pour voir leur impact sur Core Web Vitals et éventuellement trouver la meilleure solution. En fait, ce processus d'expérimentation continue, avec l'aide de nos Speed ​​Insiders, est ce qui nous permet d'offrir des résultats CWV optimaux à nos clients :

Et si vous décidez de faire partie de la communauté NitroPack, sachez que cela ne prend pas plus de 5 minutes pour le configurer, et vous pouvez essayer notre service avec le plan gratuit (pas de CC requis).