Optimiser les polices Web pour les performances: l'état de l'art

Cet article est une contribution de partenariat sur le terrain. Merci de soutenir nos sponsors.

soixante-sept pour cent des sites Web utilisent désormais des polices Web personnalisées. Cette adoption généralisée, cependant, présente des défis de performance et d'expérience utilisateur. Cet article explore les pièges communs dans la mise en œuvre des polices Web et propose des solutions, y compris des solutions de contournement établies et des normes à l'épreuve des futurs.

Points clés:

• Les polices Web personnalisées, utilisées sur 67% des sites Web, peuvent avoir un impact négatif sur les performances et l'expérience utilisateur en raison de leur taille et de leur temps de chargement, provoquant potentiellement un éclair de texte invisible (FOIT).
• L'optimisation des polices personnalisées consiste à minimiser les polices de caractères, à utiliser des formats compatibles avec le navigateur (prioriser WOFF2), en chargeant uniquement les styles nécessaires et en limitant les jeux de caractères.
• pour lutter contre le POIT, envisagez d'utiliser des polices système, en utilisant le chargeur de polices Web pour un chargement asynchrone ou en tirant parti de l'API de chargement de police CSS pour le contrôle granulaire.
• La propriété CSS font-display offre une gestion avancée de chargement de police, bien que le support du navigateur reste incomplet.
• Bien que le flash de texte non style (Fout) puisse persister, son impact peut être réduit en alignant les mesures de police de secours (X-Height et Largeur) avec la police personnalisée.

L'attrait des polices Web personnalisées:

Les visiteurs du site Web priorisent le contenu. La typographie exceptionnelle est donc essentielle pour la lisibilité, la lisibilité et l'identité de la marque. Polices Web personnalisées - fondements non préinstallés sur les appareils utilisateur - livraison de conception typographique supérieure. Bien que la règle CSS @font-face ait permis une adoption généralisée, la taille inhérente des fichiers de police peut avoir un impact sur les performances du site. Le chargement efficace des polices est primordial.

Comprendre le flash du texte invisible (FOIT):

La méthode typique de l'utilisation de polices personnalisées - les définir via CSS @font-face et s'appuyant sur le comportement par défaut du navigateur - est sous-optimale. Les navigateurs retardent souvent le chargement des polices jusqu'à ce que l'analyse CSS soit terminée. En outre, comme le souligne Zach Leatherman, les téléchargements de polices nécessitent des conditions spécifiques:

• un élément HTML en utilisant le spécifié font-family.
• Dans les navigateurs Webkit et clignotements, l'élément ne doit pas être vide.
• Pour les navigateurs prenant en charge les descripteurs de plage Unicode, le contenu doit correspondre à la plage spécifiée.

Ce téléchargement retardé se traduit souvent par l'invisibilité du texte jusqu'à ce que la police se charge. La manipulation du navigateur de POIT varie:

• Blink et Firefox utilisent un délai d'expiration de trois secondes; Si la police ne se charge pas, une police de secours s'affiche, conduisant potentiellement à Fout (flash de texte non style).
• Safari, le navigateur par défaut d'Android et BlackBerry Affichent aucun texte jusqu'à ce que la police se charge, laissant aux utilisateurs un espace vide.
• ie / edge Affichez directement la police de secours, une approche plus conviviale.

Alors que Fout est moins perturbateur que le POIT, idéalement, les deux doivent être évités. Cependant, de nombreux experts considèrent Fout préférable à Foit.

Optimisation des fichiers de police personnalisés:

Plusieurs stratégies minimisent la taille du fichier de police:

1. Minimiser les polices de caractères: Utilisez un petit nombre de polices soigneusement choisies.

2. Formats compatibles avec le navigateur: Préoriser Woff2, retombant à Woff. Exemple:

   @font-face {
     font-family: 'Open Sans';
     src: local('Open Sans'), local('OpenSans'),
          url('fonts/open-sans.woff2') format('woff2'),
          url('fonts/open-sans.woff') format('woff');
   }

3. Chargez uniquement les styles nécessaires: Évitez de charger des variations de police inutilisées (italique, gras, etc.).

4. Ensembles de caractères de sous-ensemble: Inclure uniquement les caractères utilisés sur votre page. (Voir les "temps de chargement de la page de slash de Dudley avec CSS Sous-setting" pour plus de détails).

Adommagent le Poit:

Plusieurs méthodes atténuent le Poit:

1. Évitez les polices personnalisées (seigneur de secours aux polices système): Une solution simple, quoique moins esthétique, la solution consiste à s'appuyer uniquement sur les polices système. Exemple:

   body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }

2. chargeur de polices Web: Cette bibliothèque JavaScript charge de manière asynchrone des polices, affichant des replies jusqu'à ce que la police personnalisée soit disponible.

3. API de chargement de police CSS: Cette API standard fournit un contrôle à grain fin sur le chargement des polices, permettant l'utilisation de polices système jusqu'à ce que les polices personnalisées soient prêtes. (Voir "le démarrage de Manuel Matuzovic avec le chargement des polices CSS" pour un tutoriel).

L'avenir: CSS font-display:

La propriété CSS font-display offre un contrôle granulaire sur le chargement des polices et le comportement de secours. Les valeurs incluent auto, block, swap, fallback et optional. Bien que la prise en charge du navigateur soit encore limitée, elle représente l'avenir du chargement des polices Web.

atténuant fout:

Bien que les méthodes ci-dessus traitent de FOIT, FOT peut encore se produire. La minimisation de son impact consiste à correspondre à la hauteur X et à la largeur de la police de secours aux dimensions de la police personnalisée à l'aide d'outils comme le matchur de style de police de Monica Dinculescu.

Conclusion:

La gestion efficace des polices Web nécessite l'optimisation de la taille du fichier et du contrôle du comportement de chargement des polices. Les méthodes discutées ici, ainsi que les ressources fournies, offrent des solutions efficaces pour améliorer les performances du site Web et l'expérience utilisateur.

Questions fréquemment posées (FAQ):

(La section FAQ de l'entrée d'origine est déjà bien écrite et ne nécessite pas de modification significative pour cette réécriture.) La section FAQ d'origine est conservée telle quelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!