OMGF : Google Fonts compatibles RGPD et site performant

Comme la plupart des créateurs de sites, vous vous servez sûrement des Google Fonts mises à disposition par votre thème ou votre constructeur de page. Mais, savez-vous que l’utilisation de ces Google Fonts (polices Google) n’est pas conforme au RGPD, qu’elles bloquent le rendu et réduisent la performance de chargement des pages de votre site, mais aussi qu’il est possible de pallier ces problèmes avec OMGF ?

Vous voulez en savoir plus ?

Alors, voyons tout de suite pourquoi les Google Fonts ne sont pas conformes au RGPD et nuisent à la performance d’un site web et surtout comment utiliser le plugin OMGF.

Pourquoi les Google Fonts ne sont pas conformes au RGPD

En fait, c’est assez simple :

Une page Web est composée de multiples fichiers qui sont servis par le serveur sur lequel ils sont stockés.

Chaque fois qu’un fichier est demandé, l’adresse IP de l’appareil du visiteur est partagée avec le serveur hébergeant ce fichier.

Le problème est qu’une adresse IP est considérée comme une donnée personnelle. En effet, elle peut conduire à l’identification d’une personne physique.

Si les fichiers proviennent de votre hébergement, on dit qu’ils sont en local. Et, bien évidemment, vous avez tout fait pour respecter le RGPD et les données personnelles. Donc, vous n’aurez aucun problème avec la CNIL.

Mais, si vous utilisez les serveurs de Google pour vos polices, l’adresse IP du visiteur est envoyée à Google. Google traitera alors les données de l’utilisateur à des fins internes, et ce, sans aucun consentement préalable. Qui plus est, aux États-Unis, en dehors de l’espace européen.

Voilà pourquoi les Google Fonts enfreignent le RGDP.

D’ailleurs, un tribunal allemand a déjà condamné en janvier 2022 l’intégration des Google Fonts sur un site en indiquant que celles-ci violaient le RGPD (LG Munich, arrêt du 19 janvier 2022, Az. 3 O 17493/20 (REWIS RS 2022, 1892)).

Pourquoi les Google Fonts sont des ressources qui bloquent le rendu

Voici un autre problème soulevé par l’utilisation des Google Fonts.

Lors des analyses de performance de sites WordPress, les Google Fonts sont des ressources qui bloquent le rendu.

Ce qui est somme toute assez logique puisqu’elles font appel à des ressources externes telles que fonts.googleapis.com ou fonts.gstatic.com.

Pour mieux comprendre, voyons comment fonctionnent les Google Fonts :

En bref, lorsque vous ajoutez une police Google sur votre site, un fichier CSS est créé et récupéré sur le domaine fonts.googleapis.com. Ce fichier CSS référence toutes les Google Fonts présentes sur votre site et utiles à l’affichage de la page. Ensuite, les Google Fonts elles-mêmes sont accessibles sur le domaine fonts.gstatics.com.

Par conséquent, il faut se rendre à l’évidence et constater que les requêtes externes sont multiples pour charger et afficher les polices de votre page.

Car, tout d’abord, il y a une première requête vers la feuille de style des Google Fonts, hébergée sur fonts.googleapis.com pour connaitre les polices à utiliser sur la page.

Puis, une deuxième requête est nécessaire pour télécharger la Google Font depuis fonts.gstatic.com.

Et si vous avez plusieurs polices différentes, les requêtes sont multipliées.

Tout cela prend du temps et nuit à la performance de votre site. En effet, pour être au top en termes de performance, chaque milliseconde compte.

Alors, existe-t-il une solution pour que vos polices soient conformes au RGPD et ne nuisent plus à la performance du site ?

Hébergement en local des Google Fonts

La réponse est oui, évidemment : il suffit de stocker les polices en local. Ainsi, il n’y aura plus de requêtes externes.

Comment faire ?

Il y a bien sûr la solution d’héberger les Google Fonts localement de manière manuelle. En bref, il faut :

• Télécharger les polices sur votre hébergement
• Créer les fichiers CSS pour les utiliser sur votre site
• Mettre à jour vos feuilles de styles.

Cela dit, vous pouvez utiliser Google Webfonts Helper. Ce site vous facilitera la tâche en vous permettant de télécharger les polices ainsi qu’une feuille de style.

Mais bon, c’est un peu compliqué. Donc, je vous propose une autre solution extrêmement simple que j’utilise depuis que je crée des sites sous WordPress : OMGF.

Voyons sans délai ce qu’est OMGF et comment l’utiliser.

La solution OMGF (Optimize My Google Fonts)

OMGF (Optimize My Google Fonts) est une extension freemium de Daan van den Bergh. Elle est présente dans le répertoire des plugins de WordPress depuis 2018.

Son auteur la met régulièrement à jour et répond rapidement aux questions posées dans la FAQ.

Le but d’OMGF est de vous permettre d’héberger vos polices Google Fonts localement.

Mais ce n’est pas tout. OMGF offre également la possibilité de les précharger et d’empêcher le chargement de celles que vous ne souhaitez pas utiliser.

OMGF est également disponible en version Pro pour des fonctionnalités plus avancées.

Installation et réglages d’OMGF

Comme pour toute installation d’extension, tapez le mot-clé (ici omgf), puis installez et activez le plugin.

Ensuite, rendez-vous dans Réglages/Optimize Google Fonts.

OMGF présente plusieurs onglets : Optimiser les polices, Réglages de détection, Advanced Settings et Help.

Il est à noter que les réglages de détection ne peuvent être faits qu’en version pro.

Dans “Advanced Settings”, je vous conseille de cocher “Remove Settings/Files At Uninstall”. Ainsi, tous les reliquats de l’extension seront supprimés si vous procédez à sa désinstallation.

Et si vous constatez que certaines polices ne s’affichent pas correctement sous Divi ou Elementor, cochez la case “Divi/Elementor Compatibility”.

Retournez à l’onglet “Optimiser les polices”, laissez “font-display options” sur “swap” et cliquez sur “Start optimization”.

OMGF se met au travail et scanne votre site WordPress pour trouver les Google Fonts.

Vous pouvez à présent cocher les polices que vous ne souhaitez pas charger sur votre site et celles que vous souhaitez charger et précharger.

Cliquez sur “enregistrer et optimiser”. OMGF va les télécharger, générer une feuille de style et supprimer les requêtes à fonts.googleapis.com et fonts.gstatic.com.

⚠️​ Si vous utilisez des extensions de cache (par exemple WP Rocket, Autoptimize, W3 Total Cache, etc.), assurez-vous de vider leurs caches pour que les optimisations d’OMGF prennent effet.

Solutions aux problèmes de détection par OMGF des Google Fonts

OMGF fonctionne très bien. Mais quelquefois une extension ou un thème que vous avez installé peut bloquer le processus de découverte des Google fonts.

Bien souvent, il s’agit d’extensions d’optimisation qui joue sur les Google fonts.

Voici quelques solutions qui pourront peut-être vous servir. 😉

Autoptimize : Allez dans l’onglet Extra et définissez “Optimiser les polices Google” sur “Laisser tel quel”.

Divi : Désactivez “Improve Google Fonts Loading” ainsi que “Limit Google Fonts support for Legacy Browsers” dans Divi/Theme Options/General/Performance.

iThemes Security : Désactivez iThemes Security avant d’exécuter la détection des Google fonts d’OMGF. Après avoir réussi, réactivez iThemes Security.

LiteSpeed Cache : Dans LiteSpeed ​​Cache/Page Optimization/Paramètres HTML, désactivez “Charger les Google Fonts de manière asynchrone”.

NinjaFirewall : Désactivez temporairement “Set X-Content-Type-Options” sous Ninja Firewall/Firewall Policies/Advanced Policies.

SG Optimizer : Désactivez “Web Fonts Optimization”.

Réflexion finale sur Optimize My Google Fonts – OMGF

Optimiser les Google Fonts et les rendre conformes au RGPD n’est pas difficile.

Depuis 2018, je me servais de OMGF pour optimiser la performance de mon site et jamais, je n’aurai jamais pensé qu’un jour cette extension me servirait pour rendre mon site également compatible au RGPD.

Voilà, maintenant, il me fait double usage.

Et vous, l’utilisez-vous ou le découvrez-vous ?

Dites-moi tout en commentaire ! 😉