[Pro Tips pour ne plus avoir de script Google Font chargé par erreur sur votre site]
Hey,
J'ai trouvé une solution pour tout ce qui a un script Google API / Google Font qui se charge pour rien sur votre site alors que vous ne l'utilisez pas.
Et en plus on peut vraiment s'en débarrasser sur un site live.
En gros Webflow la charge si vous en aviez besoin sur le site pour un usage lié à Google : ReCapcha, Youtube player, ou une font.
L'idée ici est d'identifier dans votre site où il peut y avoir cette utilisation.
9/10 c'est la Google Font qui se charge pour rien.
Dans ce cas voici la solution :
<link />https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
- Chercher le lien .CSS de Webflow
- Ajouter le code CSS dans VSC ou autre éditeur de code et unminify le code pour mieux le lire
- Chercher dans le code toute référence dans une class à cet font
- Allez la modifier en conséquence dans Webflow
- Republish et c'est bon 🙂
Point bonus à savoir !
Si vous chargez votre font custom provenant de Google et qu'il est pré-listé dans Webflow, il faut bien importer la font avec un nom différent ! Sinon Webflow va choisir en priorité la font dans sa liste.
Donc dans Body (All Pages) bien mettre sa font custom.
🙂A part dans une optique RGPD, c’est quoi l’intérêt d’uploader une font présente dans Google fonts à part éclater la bande passante ?
Car je vois pas mal de débats là-dessus sur le web, genre ça serait mieux pour les perfs, etc. Mais en vrai c’est pas très exact, souvent les CDN de Google ont de meilleures performances en plus d’épargner la bande passante côté usage Webflow
C’est un peu hors sujet mais vu qu’on parle de font et que j’aime bien niquer les threads… mdr
ahahahah putain Seb !
Le pb avec google font, c’est que ça t’upload tout donc c’est plus lourd de ce que j’ai compris que si tu le fais toi même avec que du Woff2.
Tu peux aussi choisir de ne pas upload toutes les font weight donc tu réduis le poids.
Et puis la RGPD mais ça tout le monde s’en bat les couilles ahah 😅
Ouais le format est un peu plus léger mais certaines fonts ne sont de toute façon pas en woff et les outils pour les compresser… voilà quoi.
Moi je sais pas si vous regardez un peu la BP des projets, mais la font c’est quand même souvent les 3 premières places. Dès que tu as un peu de traffic ça devient un réel sujet d’optimisation
Je regarde perso mais j’trouve pas que les fonts me font chier. mais je ne suis pas expert 🙂
Je suis en plein sur le sujet de la bande passante, et en effet c’est toujours tout en haut (j’ai des sites où c’est le truc le plus lourd).
Sur le site d’un client je suis passé de 320Kb (avec Inter) à 75Kb en passant sur une font variable et avec une compression des glyphs. Ca a déjà un impact assez important quand le site est chargé x fois
Il y a aussi l’option d’héberger une font custom ailleurs et la charger dans Webflow (pour ne pas être sur les serveurs de Webflow)
C’est à cause du format OTF qui est ultra lourd ;
Les outils pour compresser sont si mauvais que ça ?
Ben j’ai pas une très bonne expérience sur la compression des fonts perso, mais je pense que ça peut dépendre de pas mal de trucs
En tout cas, pour le client, quand tu lui dis “ok mec si on passe sur Google font tu reviens dans les cases pour la BP”, il n’hésite pas longtemps
Je rajoute un truc sur le sujet
Webflow a un vrai problème de transparence > ils ne mettent pas à dispo les logs sur les serveurs
Or de ce que je vois, un même site servi via Cloudflare a une consommation entre 100% et 300% de moins en bandwith sur Webflow (genre 100MB sur Webflow vs 32MB sur Cloudflare)
Ou alors Webflow a un gros problème de mise en cache
J'arrive après la bataille ahah
@Sébastien Wozny La Google Font charge toutes les tailles de police et tu n'as pas la main dessus.
Dans mon exemple avec "Merriweather" je passe d'un fichier de 2,2 Mo à 77Kb, soit -96% du poids !
Je ne charge uniquement 1 taille de fichier en woff2.
Je préfère charger ma font chez Webflow en natif plutôt que d'avoir 3 scripts Google qui se charge et qui remonte clairement dans le PageSpeed.
Pour ce qui est du RGPD, Google track ta visite via ce "pixel" de font. Quand tu dis ça au client généralement ils disent non !
Regarde la dif de taille avec ma font custom par rapport à la tienne ! Le best c'est variable + woff2.
@Benoît assez curieux d'en savoir plus sur ton Setup avec Cloudflare que tu mastérises depuis pas mal de temps. Tu as des vrais gains de chargement ?
En fait ça dépend vraiment des fonts c’est ça le problème. Aeonik c’est un bon exemple car j’ai tenté de la compresser sur un site multilingue, j’ai eu des problèmes donc j’ai dû repasser sur la font originale. J’ai aucune compétence tech en fonts donc je ne sais pas ce qui a pu jouer, du coup je me méfie un peu de ces outils.
Moi je crois que la partie cdn/cache de Google est un peu mystérieuse pour les fonts et je mettrais pas ma main à couper que c’est + intéressant d’internaliser les fonts (à part dans le cas où t’as une ttf versus une woff2 dispo officiellement ailleurs)
Tu vois j’ai creusé un peu la partie cache, pour l’exemple d’une font mainstream comme Inter, c’est à peu pres sûr que tu as déjà en cache dans ton browser le CSS et la font de Google via d’autres sites.
Du coup, quand il va y avoir un appel au serveur, il ne va faire qu’un check pour savoir si les fichiers ont été modifiés ou non avant de télécharger.
Si tu mets ta Inter uploadée direct sur webflow, à mon avis ça sera download chez tout le monde.
Je suis pas expert en cache mais je pense que cette histoire est bcp plus complexe que juste compresser une font pour économiser des ko
Tu aimerais savoir quoi exactement Nicolas ?
Mais grosso modo j’utilise les workers de Cloudlfare pour des milliards de trucs mais voilà 2 cas d’usage :
Hey @Benoît, je voulais savoir quel usage tu en avais du Cloudlfare. Très cool merci !