Un guide sur l’optimisation des polices Web dans WordPress

Les polices Web sont un élément de base de la conception Web moderne et sont utilisées par l’écrasante majorité des sites WordPress. L’optimisation de l’utilisation et de la distribution des polices Web est essentielle car des polices mal optimisées peuvent nuire à la performance de votre site. Malgré ce risque, la solution n’est pas de remplacer les polices Web par des polices sûres pour le Web. Les polices Web sont populaires pour plusieurs raisons valables.

• Les concepteurs adorent les polices Web pour la licence créative qu’ils fournissent et les UX améliorées qui les rendent possibles.
• Les polices Web offrent souvent un rendu plus efficace que les polices sécurisées sur le Web pour une large gamme de tailles et de résolutions d’appareils.

Cet article présente les polices Web et explore les méthodes et outils que vous pouvez utiliser pour améliorer l’optimisation de vos polices Web dans WordPress.

• Que sont les polices Web ?
• Hébergement et livraison de polices Web
• Optimiser les polices du service de polices Web
• Utiliser des polices auto-hébergées avec WordPress
• Optimiser les polices Web avec CSS Inlining
• Les polices variables arrivent

Que sont les polices Web ?

Avant de parler de la façon d’optimiser la livraison des polices Web, je veux m’assurer que nous sommes sur la même longueur d’onde. Lorsqu’il s’agit de sites, il existe deux types basiques de polices :

• Les polices sécurisées pour le Web (web-safe) sont des polices préinstallées sur un périphérique. Les polices courantes comme Arial, Times New Roman et Courier New, ainsi que les familles de polices génériques comme serif, sans-serif et monospace sont des polices sécurisées pour le Web.
• Les polices Web sont des polices qui ne sont pas préinstallées sur un appareil et qui doivent être téléchargées par le navigateur de l’utilisateur avant d’être affichées.

Essentiellement, les polices Web doivent être téléchargées par le navigateur du visiteur d’un site, tandis que les polices sécurisées pour le Web ne nécessitent pas de téléchargement supplémentaire. Par conséquent, les sites qui utilisent des polices Web doivent réfléchir à l’impact des ressources de polices supplémentaires sur la vitesse de chargement du site.

Hébergement et livraison de polices Web

Une fois que vous avez décidé d’utiliser des polices Web, vous devez décider comment héberger les ressources de polices. Il y a deux options disponibles pour héberger les polices web :

• Auto-hébergement : Les ressources de polices sont hébergées sur votre propre serveur avec le reste des fichiers de votre site.
• Hébergement par des tiers : Les ressources de polices sont hébergées par un service de polices tel que Google Fonts ou Adobe Fonts.

L’utilisation d’un service de polices tiers tel que Google Fonts est beaucoup plus courante et constitue un moyen plus simple d’utiliser les polices Web. Cependant, certains développeurs préfèrent éviter de dépendre de ressources hébergées à l’extérieur pour des raisons de performance ou de sécurité, et dans ce cas, l’auto-hébergement est une option. Vous pouvez consulter notre tutoriel détaillé sur la façon d’héberger des polices locallement dans WordPress. En réalité, à moins que vous n’ayez un problème de sécurité important ou que vous ne disposiez des prouesses techniques et de la puissance d’un serveur pour fournir des ressources de polices plus rapidement que Google ou Adobe, il est probablement plus logique d’utiliser un service de polices pour héberger et fournir des polices Web.

L’optimisation des polices Web est un sujet complexe et il existe différentes façons d’optimiser la livraison des polices. L’option qui convient le mieux à votre site dépendra d’une variété de facteurs, notamment la vitesse de votre serveur et de votre réseau, la taille du CSS de votre site et vos propres capacités techniques.

Optimiser les polices Web du service de polices de caractères

Nous allons commencer par cette option parce que c’est la plus simple et la plus courante. Bien qu’Adobe Fonts soit populaire parmi les développeurs professionnels, Google Fonts est la source la plus commune de polices tierces. Voici notre liste des meilleures polices Google. C’est gratuit et si populaire que de nombreux utilisateurs n’ont pas besoin de télécharger de nombreuses ressources de polices Google Fonts parce que les polices sont déjà stockées dans le cache de leur navigateur.

L’ajout des polices Google à votre site WordPress est facile. Pour une implémentation la plus légère possible, ajoutez les polices directement dans le fichier header.php de votre thème en utilisant un élément HTML link ou dans le fichier functions.php avec wp_enqueue_script().

Une fois vos polices ajoutées dans header.php ou functions.php, appliquez-les avec des règles CSS personnalisées.

Gardez à l’esprit que vous devrez utiliser un thème enfant si vous apportez des modifications aux fichiers de thème. Sinon, vous perdrez tous vos changements la prochaine fois que votre thème sera mis à jour.

Si vous préférez ne pas plonger dans les fichiers de votre thème, il existe plusieurs plugins WordPress que vous pouvez utiliser pour ajouter des polices Google à votre site.

Plugin Google Fonts for WordPress

Google Fonts for WordPress est l’un des plugins les plus faciles à utiliser parmi les plugins de polices disponibles, et est livrée avec un support exceptionnel du développeur. Il n’y a pas de pages de réglages complexes, tout se fait via l’outil de personnalisation et les changements sont reflétés instantanément dans la prévisualisation.

Le panneau « Réglages basiques » vous permet de choisir une police de caractères unique pour l’ensemble de votre site. Ou pour le contrôle de la granularité fine, vous pouvez accéder au panneau « Réglages avancés » et personnaliser chaque élément individuellement. Les réglages avancés incluent tout, des types de sous-titres individuels (H1, H2, H3, etc.) jusqu’au contenu du pied de page.

Google Fonts for WordPress est fréquemment mis à jour, ce qui signifie que vous avez accès à plus de 870 belles polices Google. Avec plus de 140 évaluations cinq étoiles et la plupart des demandes de support résolues en 24 heures, ce plugin est un excellent choix pour gérer votre typographie.

Plugin Easy Google Fonts

Une autre option populaire pour ajouter des polices Google à WordPress est Easy Google Fonts. Avec ce plugin, il est facile de configurer les styles de police pour chaque élément de texte et de créer des sélecteurs personnalisés pour des éléments spéciaux. Les styles de police sont assignés à chaque élément et sélecteur personnalisé dans l’outil de personnalisation. Par conséquent, vous obtenez un aperçu en direct de chaque changement au fur et à mesure que vous le faites.

Optimiser les polices Google

Toutes les polices Google sont compressées et livrées via le CDN de Google, ce qui permet une livraison la plus rapide possible. Même si Google Fonts inclut ces optimisations intégrées, cela vaut quand même la peine de faire ce que vous pouvez pour accélérer la livraison des polices en étant sélectif.

Lorsque vous sélectionnez Google Fonts, ne sélectionnez pas tous les styles et jeux de caractères disponibles juste au cas où. Réfléchissez bien aux styles et aux jeux de caractères dont vous aurez réellement besoin et ajoutez seulement ces styles et sous-ensembles spécifiques. Gardez à l’esprit que vous n’avez pas à sélectionner toutes les variantes de police italique et grasse. Les navigateurs se rapprocheront de ces styles si la police appropriée n’est pas disponible.

De nombreux sites utilisent une police d’affichage unique pour styliser le titre du site. Cependant, cela signifie que vous avez ajouté un fichier de police supplémentaire qui doit être téléchargé. Minimisez l’impact de ce style de police supplémentaire en téléchargeant uniquement les caractères spécifiques utilisés dans votre titre. Vous pouvez le faire en ajoutant &text=, suivi des lettres spécifiques que vous souhaitez télécharger, à la fin de l’URL des polices Google.

Par exemple, si nous voulions charger le mot Kinsta en utilisant Bungee Shade, nous pourrions le faire avec le lien suivant :

<link href='//fonts.googleapis.com/css?family=Bungee+Shade&text=Kinsta' rel='stylesheet'>

Notez l’ajout de &text=Kinsta à l’élément de lien. Ce que cet ajout fait, c’est dire au CDN de Google Fonts de ne délivrer que la lettre majuscule K, et les lettres minuscules i, n, s, t, et a.

Utiliser des polices auto-hébergées avec WordPress

L’auto-hébergement des polices Web est la meilleure option si vous utilisez des polices qui ne sont pas disponibles à partir d’un service de polices, si vous êtes capable de fournir des polices plus rapidement qu’un service de polices, ou si vous souhaitez supprimer toutes les dépendances sur les ressources hébergées à l’extérieur.

Cela n’est pas si difficile d’ajouter manuellement des polices auto-hébergées à WordPress :

• Téléversez les fichiers de polices sur votre site.
• Ajoutez une règle @font-face au fichier style.css de votre thème pour chaque police chargée.
• Appliquez les polices à l’aide de CSS personnalisés.

Cependant, si vous souhaitez rendre les choses un peu plus faciles, Use Any Font est un plugin qui vous permettra de téléverser des polices et de les affecter à des éléments HTML directement depuis le tableau de bord WordPress. Vous pouvez utiliser la version gratuite de Use Any Font pour téléverser un seul fichier de polices. Cependant, si vous donnez 10$ ou plus, vous pouvez téléverser un nombre illimité de polices.

Optimiser les polices auto-hébergées

Lorsque vous utilisez des polices auto-hébergées, il est facile de mal faire les choses, ce qui finit par nuire à la vitesse de chargement de votre site. Pour éviter cette erreur, suivez ces directives.

Tout d’abord, gardez vos ressources de polices aussi légères que possible. Lorsque vous créez une ressource de polices ou ajoutez des polices à votre site, n’incluez que les styles et les jeux de caractères que vous prévoyez d’utiliser.

Deuxièmement, fournissez les polices dans quatre formats : woff2, woff, ttf, et eot. Lorsque vous ajoutez ces polices à votre CSS avec une règle @font-face, incluez-les dans cet ordre. Cela garantira que les navigateurs choisissent le format le plus léger et le plus rapide qu’ils sont capables d’utiliser.

Troisièmement, envisagez d’utiliser le sous-réglage de la plage unicode pour limiter les ressources de polices téléchargées aux seuls caractères que vous allez utiliser.

Optimiser les polices Web avec CSS Inlining

Si vous avec une tendance technique et que vous vous souciez de chaque milliseconde, vous pouvez réduire la vitesse de chargement des pages de votre site, l’inlining est une option à considérer.

L’idée de base est d’utiliser l’encodage base64 pour intégrer des polices en ligne dans une feuille de style CSS. Cela réduit la nécessité pour le navigateur d’un visiteur de télécharger et de traiter les ressources de polices, mais cela signifie que votre site récupère un fichier CSS assez volumineux.

Les avis sont partagés sur la question de savoir si les polices en ligne amélioreront la vitesse de chargement des pages de votre site. La raison pour laquelle certains sites prennent cette route est pour les avantages de la mise en cache du navigateur. Une fois que la ressource de police a été téléchargée, les pages suivantes qui utilisent la même ressource seront affichées plus rapidement. Par conséquent, cette stratégie vaut la peine d’être considérée si votre site voit beaucoup de visiteurs réguliers et plusieurs pages vues par session.

L’encodage de vos fichiers de polices dans une feuille de style CSS n’est pas difficile. localFont est une interface web facile à utiliser que vous pouvez utiliser pour convertir les fichiers de polices woff, woff2, et ttf en CSS en ligne. L’outil fournit même du JavaScript qui vérifiera le cache du navigateur de chaque utilisateur pour le fichier de police CSS avant de le télécharger pour la deuxième fois. Vous pouvez en savoir plus sur localFont en lisant Introduction à localFont, dans lequel le développeur Jaime Caballero explique le concept et l’histoire de l’outil.

Une technique supplémentaire d’optimisation des polices Web pour les sites légers

Si vous êtes passé des fichiers de polices auto-hébergés aux polices CSS en ligne, l’étape logique suivante est d’envisager d’intégrer le CSS directement dans le HTML de votre site. Avec cette stratégie en place, les ressources de polices sont incluses dans le document HTML du site, ce qui élimine le besoin d’aller-retour sur le serveur pour récupérer les ressources de polices. Cependant, cette tactique élimine également l’avantage de stocker les ressources de polices dans le cache du navigateur d’un utilisateur puisque les polices sont codées directement dans le HTML du site et incluses avec chaque chargement de page.

Si vous insérez une police CSS directement dans le HTML de votre site, n’insérez qu’une seule famille de polices, un seul style et un seul jeu de caractères. Si votre site a besoin de familles de polices, de styles et de jeux de caractères supplémentaires, chargez-les séparément. Très franchement, si vous utilisez un site WordPress, à moins que vous n’utilisiez un thème personnalisé qui est intentionnellement minimal, l’intégration d’une police CSS en HTML ne va probablement pas améliorer les performances globales du site et représente presque certainement plus de problèmes que ce qu’il vaut.

Les polices variables arrivent

Les polices variables commencent également à devenir populaires et sont supportées par tous les navigateurs modernes. Celles-ci sont impressionnantes parce qu’elles permettent à un fichier de police de se transformer simplement avec des propriétés différentes. Cependant, il n’y a pas encore beaucoup de polices gratuites à choisir. Cependant, Google a quelques polices variables dans Early Access.

Résumé et lectures complémentaires

L’optimisation des polices Web est un sujet complexe et il est difficile impossible de rendre justice à ce sujet en moins de 2000 mots. Si vous voulez en savoir plus sur les stratégies d’optimisation des polices web, voici quelques ressources supplémentaires pour vous aider dans votre démarche.

• Options et rapidité des polices Webfont par Patrick Sexton.
• Optimisation de la police Web par Ilya Grigorik.
• Motifs de chargement de polices Web par Bram Stein.