En 2020, Google a introduit les métriques Core Web Vitals pour mesurer certains aspects de l’expérience utilisateur sur le web. Ce blog a constamment obtenu de bons scores pour deux de ces métriques : Largest Contentful Paint et Interaction to Next Paint. Cependant, l’optimisation de la troisième métrique, Cumulative Layout Shift, qui mesure les changements de mise en page inattendus, a été plus difficile. Soyons honnêtes : optimiser pour cette métrique n’est pas vraiment utile pour un site comme celui-ci. Mais obtenir un meilleur score est toujours une bonne distraction. 💯

Pour éviter le « flash de texte invisible » lors de l’utilisation de polices web, les développeurs sont encouragés à placer la propriété font-display sur swap dans les règles @font-face. Cette méthode permet aux navigateurs d’afficher initialement le texte en utilisant une police de substitution, puis de la remplacer par la police finale lorsqu’elle est chargée. Bien que cela améliore le score LCP, cela provoque des décalages de mise en page si les polices de substitution n’ont pas des métriques compatibles. Ces décalages affectent négativement le score CLS. CSS fournit des propriétés pour résoudre ce problème en adaptant les métriques des polices de substitution : size-adjust, ascent-override, descent-override et line-gap-override.

Deux articles complets expliquent chaque propriété et leurs méthodes de calcul en détail : Creating Perfect Font Fallbacks in CSS et Improved font fallbacks.

Outil interactif#

Au lieu de calculer chaque propriété à partir des métriques moyennes des polices, j’ai créé un outil pour régler interactivement les métriques des polices de substitution.¹

Mode d’emploi#

1. Chargez votre police personnalisée.

2. Sélectionnez une police de substitution.

3. Ajustez la propriété size-adjust pour faire correspondre la largeur de votre police personnalisée avec celle de la police de substitution. Avec une police proportionnelle, il n’est souvent pas possible d’obtenir une correspondance parfaite.

4. Affinez la propriété ascent-override. Essayez d’aligner le point final du dernier paragraphe tout en surveillant la ligne de base de la police. Pour un ajustement plus précis, désactivez l’option « Définir la hauteur de ligne ».

5. Modifiez la propriété descent-override. L’objectif est de faire correspondre les deux boîtes. Vous devrez peut-être alterner entre cette propriété et la précédente pour obtenir des résultats optimaux.

6. Si nécessaire, ajustez la propriété line-gap-override. Cette étape n’est généralement pas requise.

Le processus doit être répété pour chaque police de substitution. Certaines plateformes peuvent ne pas inclure certaines polices. Notamment, Android n’a pas la plupart des polices présentes dans d’autres systèmes d’exploitation. Il remplace Georgia par Noto Serif, qui n’est pas compatible au niveau des métriques.

Outil#

Cet outil nécessite JavaScript.

Cet outil n’est pas disponible depuis le flux Atom.

La confédération BGP est une technique utilisée pour réduire le nombre de sessions iBGP et améliorer le passage à l’échelle dans les grands systèmes autonomes (AS). Elle divise un AS en sous-AS. La plupart des règles eBGP s’appliquent entre les sous-AS, sauf que le saut suivant, la MED et les préférences locales restent inchangés. La longueur du chemin d’AS ignore les contributions des sous-AS de la confédération. La confédération BGP est rarement utilisée et la réflexion des routes BGP lui est généralement préférée.
Le remplacement d’AS est une fonctionnalité qui permet à un routeur de remplacer l’ASN d’un voisin dans le chemin d’AS des routes BGP sortantes par le sien. C’est utile lorsque deux systèmes autonomes distincts partagent le même ASN. Cependant, cela interfère avec le mécanisme de prévention des boucles de BGP et doit être utilisé avec prudence.

Résultats#

Pour la police utilisée pour le texte de ce blog, j’obtiens la définition CSS suivante :

@font-face {
  font-family: Merriweather;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/merriweather.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Fallback for Merriweather";
  src: local("Noto Serif"), local("Droid Serif");
  size-adjust: 98.3%;
  ascent-override: 99%;
  descent-override: 27%;
}
@font-face {
  font-family: "Fallback for Merriweather";
  src: local("Georgia");
  size-adjust: 106%;
  ascent-override: 90.4%;
  descent-override: 27.3%;
}

font-family: Merriweather, "Fallback for Merriweather", serif;

Après un mois, la métrique CLS s’est bien améliorée à 0 :

À propos des polices personnalisées#

L’utilisation de polices systèmes ou d’un ensemble de polices est souvent plus simple. Cependant, je préfère les polices web personnalisées. Merriweather et Iosevka, qui sont utilisées dans ce blog, améliorent l’expérience de lecture. Une approche alternative serait d’utiliser Georgia comme police principale. Malheureusement, la plupart des polices à chasse fixe par défaut sont laides.

De plus, les paragraphes qui combinent des polices à chasse variable et fixe peuvent créer une perturbation visuelle. Cela se produit en raison des différences des métriques verticales ou des graisses. Pour résoudre ce problème, j’ajuste les métriques d’Iosevka et sa graisse pour les aligner avec les caractéristiques de Merriweather.