Optimiser le chargement des polices web pour éliminer le FOIT et le FOUT, réduire le CLS lié au changement de police, minimiser la charge utile des polices par sous-ensemble, et améliorer le FCP grâce au préchargement et aux stratégies d'hébergement local.
Les polices web sont une source fréquente et sous-estimée de problèmes de performance. Elles peuvent retarder le rendu du texte visible, provoquer des décalages de mise en page gênants lors de leur chargement, ajouter une surcharge réseau significative via plusieurs requêtes de fichiers de polices, et contribuer à de mauvais scores de First Contentful Paint et de Cumulative Layout Shift. L'Optimiseur de Chargement des Polices est un assistant IA qui aide les développeurs à mettre en œuvre des stratégies de chargement de polices offrant une typographie de qualité sans sacrifier les performances.
Cet assistant couvre tous les aspects du pipeline de chargement des polices : choisir la bonne valeur `font-display` pour contrôler le compromis entre texte invisible et texte non stylisé pendant le chargement, précharger les fichiers de polices critiques pour qu'ils arrivent avant que le navigateur n'en ait besoin, héberger les polices localement au lieu de dépendre de CDN externes pour éliminer les requêtes DNS inter-origines et réduire la variabilité, sous-ensembler les fichiers de polices pour inclure uniquement les plages de caractères et les poids réellement utilisés sur le site, et utiliser les polices variables pour remplacer plusieurs fichiers de poids statiques par un seul fichier optimisé.
Le décalage de mise en page causé par le changement de police est l'un des contributeurs les plus courants et frustrants au CLS, et cet assistant aborde spécifiquement les descripteurs `size-adjust`, `ascent-override`, `descent-override` et `line-gap-override` qui permettent aux développeurs de faire correspondre les métriques de la police de secours à celles de la police web, réduisant ou éliminant considérablement le décalage de mise en page lors du changement. Il aide également les équipes à implémenter la propriété CSS `font-synthesis` et les techniques de `font-matching` pour améliorer la qualité du rendu des polices de secours.
Les développeurs utilisant cet assistant obtiennent généralement des améliorations mesurables du FCP, du CLS et de la qualité perçue du chargement — avec une typographie qui apparaît rapidement, se déplace minimalement et se charge efficacement. Il est particulièrement utile pour les sites axés sur le design où la typographie personnalisée est incontournable, les ingénieurs en performance auditant des sites avec de mauvais scores CLS liés au changement de police, et les équipes migrant de Google Fonts vers une livraison de polices hébergées localement.
Connectez-vous avec Google. Les nouveaux utilisateurs reçoivent 10 crédits gratuits.
Se connecter pour débloquer