Contrôler les performances de police avec font-display

Déterminer le comportement d'une police Web lors de son chargement peut être une technique importante d'optimisation des performances. Le nouveau descripteur d'affichage de la police pour @font-face permet aux développeurs de choisir le rendu (ou la création de remplacement) de leurs polices Web en fonction du temps de chargement.

Différences d'affichage des polices aujourd'hui

Les polices Web permettent aux développeurs d'incorporer une typographie riche dans leurs projets. Toutefois, si l'utilisateur ne possède pas déjà une police de caractères, le navigateur doit prendre du temps à la télécharger. Étant donné que les réseaux peuvent être irréguliers, cette durée de téléchargement peut avoir une incidence négative sur l'expérience utilisateur. Après tout, personne ne se souciera de la beauté de votre texte s'il met trop de temps à s'afficher !

Pour réduire certains risques liés à un téléchargement de police lent, la plupart des navigateurs appliquent un délai avant expiration après lequel une police de remplacement est utilisée. Cette technique est utile, mais les navigateurs diffèrent sur le plan de la mise en œuvre réelle.

Navigateur Délai avant expiration Action de remplacement Échange
Chrome 35 ou version ultérieure 3 secondes Oui Oui
Opera 3 secondes Oui Oui
Firefox 3 secondes Oui Oui
Internet Explorer 0 seconde Oui Oui
Safari Aucun délai d'inactivité N/A N/A
  • Chrome et Firefox disposent d'un délai de trois secondes après lequel le texte s'affiche avec la police de remplacement. Si la police parvient à se télécharger, un remplacement se produit et le texte s'affiche à nouveau avec la police souhaitée.
  • Internet Explorer présente un délai avant expiration de zéro seconde, ce qui entraîne l'affichage immédiat du texte. Si la police demandée n'est pas encore disponible, une création de remplacement est utilisée. Le texte s'affiche à nouveau une fois que la police demandée est disponible.
  • Safari n'a aucun comportement de délai avant expiration (ou du moins rien au-delà du délai d'expiration du réseau de référence).

Pire encore, les développeurs ont un contrôle limité sur l'impact de ces règles sur leur application. Un développeur soucieux des performances peut préférer bénéficier d'une expérience initiale plus rapide utilisant une police de remplacement, et n'utiliser la police Web plus agréable lors des visites ultérieures qu'après avoir eu le temps de la télécharger. À l'aide d'outils tels que l'API Font Loading, il peut être possible d'ignorer certains comportements par défaut du navigateur et d'améliorer les performances, mais cela implique d'écrire des quantités importantes de JavaScript, qui doivent ensuite être intégrées à la page ou demandées à partir d'un fichier externe, ce qui entraîne une latence HTTP supplémentaire.

Pour remédier à ce problème, le groupe de travail CSS a proposé un nouveau descripteur @font-face, font-display, ainsi qu'une propriété correspondante permettant de contrôler l'affichage d'une police téléchargeable avant son chargement complet.

Chronologie de téléchargement de la police

À l'instar des comportements existants de délai avant expiration des polices mis en œuvre par certains navigateurs, font-display segmente la durée de vie du téléchargement d'une police en trois périodes principales.

  1. La première période correspond à la période de blocage de police. Pendant cette période, si le type de police n'est pas chargé, tout élément qui tente de l'utiliser doit s'afficher avec un type de police de remplacement invisible. S'il se charge correctement pendant la période de blocage, il est alors utilisé normalement.
  2. La période de remplacement des polices intervient immédiatement après celle du bloc de polices. Pendant cette période, si le style de police n'est pas chargé, tout élément qui tente de l'utiliser doit s'afficher avec un style de police de remplacement. Si la police se charge correctement pendant la période d'échange, elle est utilisée normalement.
  3. La période d'échec de la police se produit immédiatement après celle d'échange de police. Si le cadran n'est pas encore chargé au début de cette période, il est marqué comme ayant échoué, ce qui entraîne un remplacement de police normal. Sinon, le type de police est utilisé normalement.

Comprendre ces délais signifie que vous pouvez utiliser font-display pour déterminer le mode d'affichage de votre police selon qu'elle a été téléchargée ou non.

Quel affichage de police vous convient le mieux ?

Pour utiliser le descripteur font-display, ajoutez-le à vos règles @font-face:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

font-display accepte actuellement la plage de valeurs suivante, auto | block | swap | fallback | optional.

auto

auto utilise la stratégie d'affichage des polices utilisée par le user-agent. La plupart des navigateurs utilisent actuellement une stratégie par défaut semblable à la stratégie de blocage.

bloc

block attribue au cadran une courte période de blocage (3 s recommandée dans la plupart des cas) et une période d'échange infinie. En d'autres termes, le navigateur dessine au début le texte "invisible" si la police n'est pas chargée, mais change le style de police dès qu'il est chargé. Pour ce faire, le navigateur crée un type de police anonyme dont les métriques sont semblables à celles de la police sélectionnée, mais dont les glyphes ne contiennent pas d'encre. N'utilisez cette valeur que si l'affichage du texte d'une police de caractères particulière est nécessaire pour que la page soit utilisable.

échange

La valeur swap définit une période de bloc de zéro seconde et une période d'échange infinie. Cela signifie que le navigateur affiche immédiatement le texte avec une création de remplacement si la police n'est pas chargée, mais la permute dès qu'elle se charge. Comme pour block, cette valeur ne doit être utilisée que lorsque l'affichage du texte dans une police particulière est important pour la page. Toutefois, l'affichage dans n'importe quelle police permet de transmettre un message correct. Le texte du logo est un bon choix pour l'échange, car l'affichage du nom d'une entreprise avec une solution de remplacement raisonnable permettra de faire passer le message. Toutefois, vous finirez par utiliser la police de caractères officielle.

Remplacement

fallback attribuent à la police de caractères une période de bloc extrêmement petite (dans la plupart des cas, 100 ms maximum) et une courte période d'échange (3 secondes dans la plupart des cas). En d'autres termes, le type de police s'affiche au début avec une création de remplacement s'il n'est pas chargé, mais la police est remplacée dès son chargement. Toutefois, si trop de temps s'écoule, la création de remplacement est utilisée jusqu'à la fin de la durée de vie de la page. La fonctionnalité de remplacement est idéale pour les éléments tels que le corps du texte : vous souhaitez que l'utilisateur commence à lire le plus rapidement possible sans perturber son expérience en déplaçant le texte à mesure qu'une nouvelle police se charge.

facultative

optional donne à la police une période de bloc extrêmement petite (100 ms maximum dans la plupart des cas) et une période d'échange de zéro seconde. Comme pour les créations de remplacement, il s'agit d'un bon choix lorsque la police à télécharger est plus agréable à avoir, mais qu'elle n'est pas essentielle à l'expérience. Avec la valeur facultative, c'est le navigateur qui décide de lancer ou non le téléchargement de la police, ce qu'il peut choisir de ne pas faire ou de ne le faire qu'avec une faible priorité, en fonction de ce qu'il pense être le plus adapté pour l'utilisateur. Cela peut être utile dans les situations où la connexion de l'utilisateur est faible et que le fait de faire glisser une police vers le bas n'est pas forcément la meilleure utilisation des ressources.

Prise en charge des navigateurs

font-display est actuellement associé à l'indicateur "Experimental Web Platform Features" (Fonctionnalités expérimentales de la plate-forme Web) dans Chrome 49 pour ordinateur, et est disponible dans Opera et Opera pour Android.

Démonstration

Consultez l'exemple pour essayer font-display. Pour les développeurs soucieux des performances, il peut s'agir d'un outil supplémentaire utile.