WordPress

Chargez les polices Google Fonts 5x plus rapidement sur WordPress

A l’heure où nous devons tous optimiser au maximum le temps de chargement de nos sites web pour être mieux placé sur Google, c’est Google lui-même qui propose un outil pour le ralentir avec Google Fonts ! Découvrez comment faire en sorte que les polices de Google Fonts chargent 5x plus rapidement sur un site sous WordPress.

L’utilisation de polices externe est monnaie courante avec les derniers thèmes. Montserrat, Roboto ou encore Open Sans, toutes ces polices chargent pratiquement toutes d’un seul fournisseur: Google.

Et vous n’êtes pas censé ignorer que le chargement d’une ressource externe nécessite un temps de chargement plus long pour l’utilisateur. En fait, l’utilisation de Google Fonts vous prend 500ms de temps de chargement.

Assurez-vous que le texte reste visible pendant le chargement des polices Web

Ce message, vous l’avez sûrement remarqué si vous utilisez PageSpeed Insights, un des outils que je vous conseille depuis pas mal de temps.

Comprendre le problème

Lorsque vous chargez une web font (une police provenant du web, non-installé sur l’appareil localement), vous envoyer une requête vers un serveur.

Avec Google Fonts, vous profitez d’un tas de serveurs présents un peu partout dans le monde pour permettre le téléchargement de cette police de manière optimale. C’est le principe du CDN (que l’on verra prochainement)

Cependant, malgré cette infrastructure, Google Fonts possède quelques défauts que l’on va tenter de comprendre et résoudre.

Pour chaque police Google Fonts, vous envoyez deux requêtes HTTP.

Regardez cet exemple. Lorsque vous ajoutez une police (par exemple Open Sans) provenant de Google Fonts, vous ajoutez cette ligne de code dans votre site:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Essayez d’accéder au lien sur votre navigateur web, vous tomberez sur le CSS suivant:

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
...

Vous ne remarquez rien?

Et si: la ressource que vous ajoutez sur votre site (donc le fameux lien pour une ressource de type CSS) charge un CSS provenant de fonts.googleapis.com. Ensuite, le CSS que vous venez d’afficher demande à charger une police au format woff2 qui se trouve sur fonts.gstatic.com

Deux liens donc… pour deux requêtes HTTP. Et généralement, un site charge en moyenne deux polices provenant de Google Fonts. Ce qui fait au final pas moins de 4 requêtes HTTP !

Notez également que ces requêtes ne se font pas en parallèle: il faut à chaque fois attendre que l’une se termine pour pouvoir lancer la suivante.

Et en attendant que nos requêtes se terminent… notre texte n’est pas visible!

Là est le deuxième gros problème. Tant que nos requêtes n’ont pas terminées de chargé, votre texte lui n’est pas visible par l’internaute.

Et je suis sûr que vous avez déjà été confronté à ce phénomène. Si vous ne voyez toujours pas de quoi je veux parler, regardez cette vidéo:

Ah… là ça vous parle! 🙂 Et c’est de ça que PageSpeed Insights parle lorsqu’il vous demande de vous assurer que le texte soit visible pendant le chargement d’une police web.

Pour régler ce problème, il suffit d’une seule ligne de code. Cependant, Google ne nous le propose pas par défaut. Qu’importe, nous allons le faire nous-même, du coup!

Étapes à suivre pour faire charger les polices Google Fonts plus rapidement

Pour cela, rendez-vous sur votre site où les polices Google Fonts charge de manière traditionnelle. Ensuite, affichez le code source en faisant un clic droit > Code source de la page.

Recherchez ensuite dans le code source le lien de votre police en tapant l’URL fonts.googleapis.com. Copier l’URL complète de votre police.

(exemple: https://fonts.googleapis.com/css?family=Poppins:400&subset=latin)

Collez ensuite cette URL sur l’outil Google Fonts de 3Perf: https://googlefonts.3perf.com/

Copiez/collez ensuite le code de résultat généré dans le head du fichier header.php de votre thème actif.

Assurez-vous ensuite de retirer tous les anciens appels Google Fonts “traditionnels” pour que ça fonctionne. Pour ce faire:

And… that’s it ! Normalement, vous ne devriez plus avoir cette erreur, et c’est le pur bonheur pour le temps de chargement de votre site. Si vous continuez à l’avoir, c’est qu’il doit y avoir des traces d’appels vers Google Fonts de manière traditionnel, ou que vous avez un plugin de cache, auquel cas videz-le manuellement.

Fonctionne également sur les autres CMS et sur les sites hand-coded

Cette manipulation fonctionne également sur tous les autres sites (ceux qui tournent sans WordPress). Cependant, il fera faire en sorte que tous les appels traditionnels vers Google Fonts soient retirés d’une manière ou d’une autre.

C’est fini pour aujourd’hui 🙂 Je tiens avant de vous dire bye bye que cet article est tiré de l’excellent post publié sur Coffee N Coding que je me suis permis de traduire. Tous les kudos leurs sont donc attribués!

Bye Bye !

Chargez les polices Google Fonts 5x plus rapidement sur WordPress
5 (100%) 6 vote[s]

Brüsk Kurt

Web & UI Designer. Développeur web. Gamer. Blogger. Etudiant en informatique de gestion. Ça fait beaucoup mais ça ne suffit pas!

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Fermer