Module 2 : Améliorer la vitesse d'un site mobile

2.3.4 Optimisation des polices Web

La typographie est un élément fondamental pour la conception, le branding, la lisibilité et l'accessibilité. Et ce sont les polices Web qui sont au cœur de tout cela, et de bien d'autres fonctionnalités : elles permettent de sélectionner du texte, de faire des recherches, de zoomer, et présentent un format PPP de qualité permettant d'obtenir un affichage du texte précis, peu importe la taille et la résolution de l'écran. Les polices Web sont essentielles pour que la conception graphique, l'expérience utilisateur et les performances soient optimales.

Votre stratégie globale d'amélioration des performances doit obligatoirement prendre en compte l'optimisation des polices Web. Les polices sont des ressources supplémentaires, et certaines d'entre elles peuvent bloquer l'affichage du texte. Toutefois, l'utilisation de polices Web ne devrait pas ralentir l'affichage de votre page. Bien au contraire, si vous utilisez des polices optimisées et que vous les associez à une stratégie judicieuse de chargement et d'application sur la page, vous parviendrez à réduire la taille globale et le délai d'affichage.

Voici quelques astuces et techniques à ne pas oublier lorsque vous travaillez sur votre stratégie de mise en cache :

  • Surveillez l'utilisation des polices : n'utilisez pas trop de polices différentes sur vos pages et, pour chaque police, minimisez le nombre de variantes. Vous offrirez ainsi à vos internautes une expérience utilisateur plus homogène et plus rapide.
  • Regroupez les ressources de police en sous-ensembles : la plupart des polices peuvent être regroupées en sous-ensembles ou plages Unicode afin de fournir les glyphes requis pour une page précise. Cette opération permet de réduire la taille des fichiers et d'augmenter la vitesse de téléchargement des ressources. Toutefois, lorsque vous définissez des sous-ensembles, pensez bien à la réutilisation des polices. Par exemple, ne téléchargez pas des ensembles de caractères différents sur chaque page, mais des ensembles qui se chevauchent. Pour ce faire, il est recommandé d'effectuer des sous-ensembles en fonction du script : Latin, Cyrillic, etc.
  • Fournissez des formats de police optimisés pour chaque navigateur : fournissez chaque police aux formats WOFF2, WOFF, EOT, et TTF. N'oubliez pas d'effectuer une compression GZIP aux formats EOT et TTF, car ces derniers ne sont pas compressés par défaut.
  • Spécifiez un jeton de revalidation et des règles de mise en cache optimales : les polices sont des ressources statiques qui ne sont pas souvent mises à jour. Vous devez donc vous assurer que vos serveurs fournissent un horodatage de longévité maximale et un jeton de revalidation afin de pouvoir réutiliser les polices efficacement sur les différentes pages.
  • Utilisez l'API Font Loading pour optimiser le chemin critique du rendu : par défaut, le comportement de chargement long peut retarder l'affichage de la page. L'API Font Loading vous permet de remplacer ce comportement pour des polices précises, et de spécifier un affichage personnalisé et des stratégies de délai d'inactivité pour différents contenus de la page. Si vous disposez d'un navigateur obsolète qui n'est pas compatible avec l'API, vous pouvez utiliser la bibliothèque Web Font Loader de JavaScript ou la stratégie d'incorporation CSS.

Pour en savoir plus, cliquez ici.

Cet article vous a-t-il été utile ?
Comment pouvons-nous l'améliorer ?