J’ai dernièrement fait un article et un thread Twitter associé, qui ont eu un certain succès, pour expliquer l’inutilité (a mon humble avis) des CDN des GAFAM type Google Font.

Maintenant la question que l’on se pose, c’est « Comment faire pour avoir les polices sur son propre CDN ? ».   C’est parti pour un petit tuto :

Un CDN ? Il nous faut un CDN ?

Alors, non, ce n’est pas obligé d’avoir un CDN mais cela peut aider si votre site doit servir beaucoup de ressources (images, CSS, JS, police, etc.).

Un Content Delivery Network (ou Réseau de diffusion de contenu, en français) permet de rapprocher les données statiques au plus proche de vos visiteurs. Le CDN que vous utiliserez aura des serveurs dans de nombreux pays et ils feront l’interface entre votre serveur et votre visiteur. Par exemple : un visiteur en Espagne recevra les ressources depuis un serveur à Madrid alors qu’un visiteur en France les recevra depuis un serveur à Paris.

Le CDN à deux grandes utilités :

• Réduire votre bande passante, vu que ce ne sont plus vos serveurs qui s’occupent d’envoyer les ressources les plus lourdes
• Accélérer la réception des ressources, les serveurs de CDN sont plus proches de vos utilisateurs, vous accélérez donc la vitesse de réception des ressources par visiteur.

Il existe beaucoup de prestataire, mais si vous souhaitez rester en Europe, je vous en conseille trois :

• OVH (en France)
• KeyCDN (en Suisse)
• Bunny (en Slovénie)

On passe aux polices ?

Que vous ayez ou pas un CDN, il va falloir maintenant récupérer les polices pour les stocker de votre coter. Mais, ce n’est pas si simple, il existe beaucoup de format de police (eot, ttf, woff, woff2, etc.) et en fonction du navigateur de votre visiteur et de sa version, il faudra lui proposer le bon format…

Heureusemant il existe un formidable outil : Google Webfonts Helper

Créé par Mario Ranftl, ce site va vous permettre de facilement récuperer la police dans chacun des formats ainsi que la configuration CSS associé. Il vous suffit de chercher la police dont vous avez besoin dans la colonne de gauche.

Dans mon exemple, avec la police Ubuntu, vous allez pouvoir selectionner plusieurs options.

Choisir un jeu de caractères

Vous devez choisir un (ou des) jeu de caractères, cela dépend des lettres que vous utilisez dans vos textes.

Le latin suffit pour les lettres de base en français, si vous avez vous utilisez des lettres accentuées peu communes comme Ā comme ou des ligatures comme œ vous aurez besoin de latin-ext. Vérifiez en amont que le jeu de caractères que vous avez choisi suffit, mais attention, plus vous ajoutez de jeu de caractères, plus votre police sera lourde ! N’en abusez pas.

Choisir un style

Si vous avez besoin d’afficher les caractères en italique ou en gras vous devrez cocher les bonnes cases.

Là encore n’en abusez pas, cela ne fera qu’alourdir la police pour votre visiteur. Si vous n’avez besoin que de l’italique alors décochez la case regular et si vous avez besoin du gras (bold en CSS) alors vous avez besoin du style 700.

Le CSS

Le premier point vous permet de choisir la compatibilité de votre code CSS, je vous recommande le Best Support pour que même les vieux navigateurs puissent afficher la police.

Cela rajoutera quelques lignes de CSS et vous aurez besoin de stocker plus de format de police différente, mais pas d’inquiétude, le navigateur de votre visiteur ne téléchargera que le format dont il a besoin !

Dans le deuxième point, vous devez renseigner le dossier où se trouveront les polices. Si vous avez un CDN, alors vous devez mettre l’URL direct comme ceci par exemple :

Si vous n’avez pas de CDN je vous conseille de renseigner le dossier en absolut depuis la racine de votre site, comme ceci :

Le CSS ainsi généré devra être rajouté dans le CSS de votre site.

Téléchargement des fichiers

La dernière étape sera de télécharger le fichier ZIP généré par le site, il contiendra tous les formats de polices dont vous aurez besoin. Vous n’aurez plus qu’à les envoyer dans le bon dossier de votre site ou CDN.

Attention, certaines polices sont sous licence, vous pouvez voir le détail de ces licences sur la page dédiée de Google Font.

Conclusion

Le travail pour ne plus dépendre de Google Font reste quand même assez simple et plutôt rapide grâce à Google Webfonts Helper et nous ne pouvons que remercier Mario Ranftl pour son travail.

Depuis des mois (voir des années) je me pose de plus en plus la question de relancer le blog. De me forcer à prendre le temps et de me remettre à écrire.

Aujourd’hui le seul et unique partage que je fais par écrit, c’est via mon compte Twitter, qui me permet rapidement de poser un embryon de partage, d’idée, de réaction et d’avoir rapidement des échanges sur le sujet.

Le fast-food de l’écrit…

Twitter est à mes yeux un peu le fast-food de l’écrit. C’est rapide et c’est efficace ! Mais, c’est surtout très limité. On ne peut pas se permettre de développer complètement sa pensée, on va devoir se limiter au carcan des 240 caractères et au pire utiliser un thread qui, avouons-le, rendra la lecture plus fastidieuse…

Et, surtout on ne garde pas un accès rapide à ce partage. Au bout de quelques jours (au mieux semaines) il sera perdu dans les méandres de Twitter.

Ainsi, j’ai décidé de me remettre à écrire et de me forcer à le faire.

Ceci est mon troisième billet de blog depuis le début de l’année, un exploit ! 😉

C’est un exercice qui me permettra, je pense, de pouvoir mieux organiser mes pensées et de partager potentiellement des idées, des contenus, des lectures.

Je ne vais pas m’arrêter là, je vais aussi me forcer à prendre le temps de réagir à mes lectures d’autres blogs, car ce qui faisait la richesse des blogs il fut un temps, c’étaient les billets de blog, mais également les commentaires très enrichissant que l’on pouvait trouver dessus.

C’est pour cela quand dans mon titre je ne parle pas de seulement relancer mon blog, je parle surtout de relancer les blogs dans leur entièreté (billets et commentaires)

Le double partage !

Je ne vais (bien sûr) pas abandonner Twitter, mais j’ai décidé de faire mes ecrits en double avec un thread sur Twitter qui à la fin donnera le lien vers le billet dédié sur mon blog. Cela me permettra, de garder des interactions sur Twitter tout en conservant mes écrits sur la durée.

Je l’ai testé avec mon dernier thread et je trouve cela plutôt bien pour le moment.

Une nouvelle version pour fêter ça 🎉

De plus, j’en ai profité pour quitter Tumblr et passer mon blog sur un petit hébergement avec du fichier statistique généré grâce à Hugo (l’outil de blogging geek) avec un design assez light et sans JavaScript de tracking. Je n’ai donc pas de statistique et je m’en fiche, je ne veux pas écrire pour faire du nombre, mais pour moi !

J’ai aussi ajouté Remark42 (je ferai surement un billet dédié sur son installation) qui permet d’avoir des commentaires sur chaque billet de blog tout en gardant la main sur les données (pas de service tiers).

En attendant mes prochains billets

Toi qui viens de te perdre sur mon blog et de me lire jusqu’au bout, je te le demande à toi aussi :

Relançons le blog ! Relançons les blogs !

Le 20 janvier 2022 le tribunal de Munich a condamné l’utilisation de Google Font sur un site web. Le tribunal considère que l’appel vers le CDN de Google Font équivaut à la « perte de contrôle du demandeur sur une donnée personnelle » en l’occurrence l’IP du visiteur.

Sans rentrer dans les détails de cette décision qui s’appuie sur le Règlement Général de la Protection des Données, il est très facile de se conformer à cette décision ! Il suffit de stocker et d’envoyer les polices utilisées sur son site depuis son propre domaine.

Et la web perf ?

Ce choix semble contre-productif en termes de performance web aux yeux de nombreux développeurs. Pour une raison extrêmement simple : si nous utilisons le CDN de Google Font alors il y a de grande chance que le visiteur ait déjà cette ressource dans son cache navigateur et cela accélèrera le temps d’affichage et donc l’expérience utilisateur.

C’était vrai, mais cela ne l’est plus depuis plus d’un an !

Partitionnement du cache

Maintenant les navigateurs (depuis Firefox 85, Chrome 86 etc…) n’autorisent plus cela pour empêcher le suivi des utilisateurs. Les navigateurs font du partitionnement de cache. Cela veut dire que la ressource sera bien mise en cache, mais seulement pour le domaine que nous sommes en train de visiter.

Ainsi, si vous consultez les pages du site toto.com qui inclut la police Roboto via Google Font, alors celle-ci sera téléchargée à la première page consultée, puis utilisé depuis le cache pour toutes les autres pages du site A. Maintenant si vous allez sur le site tutu.com qui inclut lui aussi la police Roboto via Google Font, alors votre navigateur ne la trouvera pas dans son cache pour ce site précis et va donc la téléchargée à nouveau…

Voilà à quoi ressemble les noms des caches partitionnés :

fonts.googleapis.com/css?family=Roboto-toto.com
fonts.googleapis.com/css?family=Roboto-tutu.com

Il n’y a donc plus aucun intérêt à utiliser le CDN de Google Font, mais également tous les autres CDNs pour d’autres ressources (par exemple Jquery).

Cela oblige votre visiteur a, en plus de télécharger la ressouce, faire un appel DNS supplémentaire pour résoudre le nom de domaine. Il vaut mieux la mettre sur son propre domaine (ou son propre CDN) et profiter par ailleurs d’HTTP/2 (si vous l’utilisez)

Pour ce billet je me suis inspiré du billet anglais « Say goodbye to resource-caching across sites and domains » de « Stefan Judis »

Chez WiziShop nous gérons pour le compte de nos commerçants des centaines de milliers de formulaires et malheureusement, quand il y a des formulaires, il y a des bots qui les spamment.

Pour les détecter nous utilisons des techniques classiques (honeypot, CSRF Token, etc.) ainsi que des contrôles que nous avons développés en interne en analysant le user-agent (type de navigateur, version de celui-ci), le nom d’hôte correspondant à l’IP et sa géolocalisation.

Cela a très bien fonctionné, mais, il y a deux mois, les bots sont devenus beaucoup plus fort que nous :

En vert foncé, vous pouvez voir le nombre de mails que l’on a tenté d’envoyer, en vert clair, les mails bien reçu et, en rouge, le nombre de “spam report”.

En clair, les bots sont passés entre les mailles de notre filet… …surtout sur le formulaire d’inscription à la newsletter (allez savoir pourquoi)

Les conséquences étaient très rapidement visibles sur la dérivabilité de nos emails, surtout chez nos amies de Microsoft (hotmail, live, outlook, etc.)

Il nous fallait une solution rapide pour pouvoir trier facilement les bons formulaires des mauvais formulaire (comme pour les bons et les mauvais chasseurs) et après avoir testé des dizaines de services, celui qui a retenu notre attention est CleanTalk

Ne vous fiez pas au design (horrible) du site, car leur API “spam_check” fonctionne terriblement bien et, en plus, elle est compatible RGPD !

De notre côté nous continuons d’utiliser nos filtres de base qui épurent une grande partie des bots et nous avons rajouté pour ceux qui ne se font pas prendre une vérification sur CleanTalk.

Pour cela, il nous suffit d’appeler la méthode API en lui passant l’IP et l’email de celui qui vient de valider le formulaire et pour éviter de divulguer l’IP et l’email de l’utilisateur nous passons ceux-ci avec du hachage SHA-256.

Comme vous pouvez le voir dans cet exemple, le retour JSON est extrêmement lisible et donne les valeurs spam_rate et appears autant pour l’IP que pour l’email.

Nous avons décidé que si l’IP ou l’email à la valeur appears à 1 et un spam_rate supérieur à 0,7 alors nous considérons le demandeur comme un bot.

Nous avons rajouté, aussi, au-dessus de cela un système de cache pour ne pas demander une IP ou un email plus d’une fois toutes les 48h, cela permet d’éviter un trop grand nombre d’appels sur l’API de CleanTalk, et donc une trop grosse facturation (celle-ci s’établit sur le nombre d’appels), surtout, que souvent, les bots utilisent soit la même IP, soit la même adresse email pour spammer un grand nombre de formulaires.

Depuis nos statistiques, d’envois d’emails liés à la validation de formulaires, vont beaucoup mieux :

Pour finir, si vous cherchez à éradiquer les bots, je ne peux que vous conseiller CleanTalk et si jamais une personne de chez CleanTalk passe sur ce blog, s’il vous plait, engagez une ou un véritable UX-Designer, vous avez un bon produit, mais une expérience utilisateur catastrophique… 🤷

J’aime les chansons engagées, celles qui font réfléchir, qui tente de faire passer un message, qui veulent vous faire réagir.

La chanson « Watson » de Tryo en fait partie !

J’écoute depuis longtemps les différents albums produits par le groupe Tryo et cette chanson m’a interpellé. J’ai au début pensé qu’ils parlaient d’un personnage fictif qui se bat pour défendre la mer (et surtout son écosystème)

Mais je me suis décidé à faire des recherches. C’est là que j’ai compris que Paul Watson n’est autre que le fondateur de Sea Shepherd. Voulant en savoir plus j’ai lu toutes les informations que l’on pouvait trouver sur lui et sa fondation sur Wikipédia.

En quelques minutes, j’ai pu (essayer) comprendre ce que Paul Watson à fait (et fait toujours) dans sa vie, j’ai pu retracer les grandes opérations de Sea Shepherd ces derniers années et surtout pourquoi Sea Shepherd a été créée.

Avec une “simple” chanson, Tryo a réussi à élargir ma vision des choses et mes connaissances.